Loading, please wait...

ARTDESIGN WINDOW CONTENT

Description

ArtDesign Window Content is a JavaScript PlugIn, which presents ul li content in a dynamic framework with transition effects for each content element
Full support of all advanced Web browsers
Custom positions of navigation: Left and Right
Navigation buttons with ToolTips
6 animation effects: Scale, Fade, TopBottom, BottomTop, LeftRight, RightLeft
Integration with ArtDesign Icons and ArtDesign ToolTip
Hover / Click Animations
Listening for Click Events
Public Methods: Destroy

Demo

  • Scale animation 1
    TopBottom animation 1
    LeftRight animation 1
    RightLeft animation 1
    BottomTop animation 1
    Fade animation 1
  • Scale animation 2
    TopBottom animation 2
    LeftRight animation 2
    RightLeft animation 2
    BottomTop animation 2
    Fade animation 2
  • Scale animation 3
    TopBottom animation 3
    LeftRight animation 3
    RightLeft animation 3
    BottomTop animation 3
    Fade animation 3

HTML

<ul class="ArtDesignWindowContent">
    <li data-ad-window-panel-tooltip="Page one">
        <table class="WindowContent">
            <tbody>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Scale" data-ad-window-panel-animation-speed="0.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Scale animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="TopBottom" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">TopBottom animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="LeftRight" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">LeftRight animation</div></td>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="RightLeft" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">RightLeft animation</div></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="BottomTop" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">BottomTop animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Fade" data-ad-window-panel-animation-speed="1.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Fade animation</div></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </li>
    <li data-ad-window-panel-tooltip="Page two">
        <table class="WindowContent">
            <tbody>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Scale" data-ad-window-panel-animation-speed="0.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Scale animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="TopBottom" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">TopBottom animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="LeftRight" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">LeftRight animation</div></td>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="RightLeft" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">RightLeft animation</div></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="BottomTop" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">BottomTop animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Fade" data-ad-window-panel-animation-speed="1.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Fade animation</div></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </li>
    <li data-ad-window-panel-tooltip="Page three">
        <table class="WindowContent">
            <tbody>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Scale" data-ad-window-panel-animation-speed="0.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Scale animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="TopBottom" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">TopBottom animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="LeftRight" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">LeftRight animation</div></td>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="RightLeft" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">RightLeft animation</div></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="1.4" data-ad-window-content-animation="BottomTop" data-ad-window-panel-animation-speed="1" data-ad-window-panel-animation-ease="Back.easeOut.config(1.2)">BottomTop animation</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="Element" data-ad-window-panel-delay="0.8" data-ad-window-content-animation="Fade" data-ad-window-panel-animation-speed="1.75" data-ad-window-panel-animation-ease="Back.easeOut.config(3)">Fade animation</div></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </li>
</ul>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $(".ArtDesignWindowContent").ArtDesignWindowContent();
    });
</script>