Loading, please wait...

ARTDESIGN WINDOW CONTENT

EXAMPLES

Default navigation (right)

  • 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
<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>

Left navigation

  • 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
<ul class="ArtDesignWindowContent" data-ad-window-content-options="LeftNavigation">
    <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>