Home / JavaScript / Animate on scroll with wow.js

Animate on scroll with wow.js

animate-on-scroll-with-wow-js

Animate on scroll with wow.js

 

HTML

<div id="main">

    <!-- FONT AWESOME DEMO -->               
    <div class="col_third">   
        <i class="fa fa-heart fa-5x icn_red wow pulse" data-wow-iteration="infinite" data-wow-duration="500ms"></i>
    </div>

    <div class="col_third">   
        <i class="fa fa-heart fa-5x icn_blue wow shake" data-wow-iteration="infinite" data-wow-duration="1500ms"></i>       
    </div>

    <div class="col_third end">   
        <i class="fa fa-heart fa-5x icn_green wow bounce" data-wow-iteration="infinite" data-wow-duration="800ms"></i>
    </div>
    <div class="clear"></div>
    <!--END / FONT AWESOME DEMO -->   


    <!-- 3 COLUMN DEMO  -->       
    <div class="col_third">   
        <section class="section--yellow wow fadeInLeft" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;"></section>
    </div>

    <div class="col_third">   
        <section class="section--yellow wow fadeInLeft" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;"></section>       
    </div>

    <div class="col_third end">   
        <section class="section--yellow wow fadeInLeft" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></section>       
    </div>
    <div class="clear"></div>
    <!-- END / 3 COLUMN DEMO -->       

    <section class="section--purple"></section>
    <section class="section--blue"></section>

    <div class="wow fadeInUp" data-wow-duration="2s">
        <h2 align="center"><strong>Reveal</strong> Animations When You Scroll</h2>
    </div>

    <section class="section--purple wow fadeInLeft" data-wow-duration="2s"></section>
        <section class="section--green wow fadeInLeft" data-wow-duration="2s"></section>
    <div class="clear"></div>

    <!-- 3 COLUMN DEMO  -->       
    <div class="col_third">   
        <section class="section--yellow wow fadeInRight" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;"></section>
    </div>

    <div class="col_third">   
        <section class="section--yellow wow fadeInRight" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;"></section>       
    </div>

    <div class="col_third end">   
        <section class="section--yellow wow fadeInRight" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></section>       
    </div>
    <div class="clear"></div>
    <!-- END / 3 COLUMN DEMO -->

    <div class="service-section">
        <div class="wow_imgage wow fadeInLeft" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">                   
            <figure>       
                <img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
            </figure>               
        </div>

        <div class="wow_imgage wow fadeInLeft" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">   
            <figure>   
                <img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>   
            </figure>
        </div>

        <div class="wow_imgage end wow fadeInLeft" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
            <figure>   
                <img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
            </figure>   
        </div>
    </div>
    <!--.SERVICES SECTION-->
    <div class="clear"></div>

    <section class="section--yellow wow fadeInDown" data-wow-duration="1s"></section>
    <section class="section--purple wow fadeInDown" data-wow-duration="2s"></section>
    <section class="section--blue wow fadeInDown" data-wow-duration="2s"></section>
    <section class="section--green wow fadeInDown" data-wow-duration="3s"></section>

    <div class="service-section">
        <div class="wow_imgage wow fadeInLeft" data-wow-delay="0.1s">
            <img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>   
        </div>

        <div class="wow_imgage wow fadeInLeft" data-wow-delay="0.2s">
            <img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
        </div>

        <div class="wow_imgage end wow fadeInLeft" data-wow-delay="0.3s">
            <img src="https://cdn.pixabay.com/photo/2019/12/05/00/36/leaves-4673997_960_720.jpg" width="270" height="180"></img>
        </div>
    </div>
    <!-- End Images SECTION-->           

    <!-- 3 COLUMN DEMO  -->       
    <div class="col_third">   
    <section class="section--yellow wow fadeInDown"></section>
    </div>

    <div class="col_third">   
    <section class="section--yellow wow fadeInDown"></section>       
    </div>

    <div class="col_third end">   
    <section class="section--yellow wow fadeInDown"></section>       
    </div>
    <div class="clear"></div>
    <!-- END / 3 COLUMN DEMO -->       

    <!-- FONT AWESOME DEMO -->               
    <div class="col_third">   
    <i class="fa fa-heart fa-5x icn_red wow pulse" data-wow-iteration="infinite" data-wow-duration="500ms"></i>
    </div>

    <div class="col_third">   
    <i class="fa fa-heart fa-5x icn_blue wow shake" data-wow-iteration="infinite" data-wow-duration="1500ms"></i>       
    </div>

    <div class="col_third end">   
    <i class="fa fa-heart fa-5x icn_green wow bounce" data-wow-iteration="infinite" data-wow-duration="800ms"></i>
    </div>
    <div class="clear"></div>
    <!--END / FONT AWESOME DEMO -->   

    </div>
</div>

================================================ 

CSS 

body {
    overflow: scroll;
    font-family: "Open Sans", Arial, Helvetica;
    text-align: center;
    background-color: #1e202b;
    color: #666666;
    background-image: url(https://subtlepatterns.com/patterns/stardust.png);
    background-position: initial initial;
    background-repeat: initial initial;
}

.clear    {
    clear: both;
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 30px 0;
    font-weight: 300;
}
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

#container {
    width:  860px;
    margin: 0 auto;
}

section {
    position: relative;
    height: 200px;
    margin: 60px 0;
}

.section--white {
    background-color: #FFFFFF;
}

.section--red {
    background-color: #E74C3C;
}

.section--purple {
    background-color: #D6A8E9;
}

.section--blue {
    background-color: #33CCF7;
}

.section--yellow {
    background-color: #F4E9B4;
}

.section--green {
    background-color: #80D99D;
}
.section--cyan{
    background-color: #80D99D;
}

.section--pale{
    background-color: #F4E9B4;
}

.col_third section { margin: 0; }

.icn_red { color: #FF3D6A; }
.icn_purple { color: #9B59B6; }
.icn_blue{ color: #3498DB; }
.icn_yellow { color: #F1C40F; }
.icn_green { color: #80D99D; }

/*-=-=-=-=-=-=-=-=-=-*/
/* Wow Image */
/*-=-=-=-=-=-=-=-=-= */

.service-section {
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.wow_imgage {
    position: relative;
    float: left;
    margin: 0 20px 20px 0;
    width: 270px;
    height: 180px;
}

.wow_imgage img {
    border: 4px solid #e4e4e1;
}

/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
    position: relative;
    display:inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.end { margin-right: 0 !important; }

/*-=-=-=-=-=-=-=-=-=-*/
/* Links */
/*-=-=-=-=-=-=-=-=-= */

a {    text-decoration: none; color: #666666;}
a:hover, a:active { outline: 0; color: #666666; }

================================================

 ANIMATION CSS

@charset "UTF-8";.animated {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both }.animated.infinite {-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite }.animated.hinge {-webkit-animation-duration:2s;animation-duration:2s }@-webkit-keyframes bounce {0%, 100%, 20%, 50%, 80% {-webkit-transform:translateY(0);transform:translateY(0) }40% {-webkit-transform:translateY(-30px);transform:translateY(-30px) }60% {-webkit-transform:translateY(-15px);transform:translateY(-15px) }}@keyframes bounce {0%, 100%, 20%, 50%, 80% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }40% {-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px) }60% {-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px) }}.bounce {-webkit-animation-name:bounce;animation-name:bounce }@-webkit-keyframes flash {0%, 100%, 50% {opacity:1 }25%, 75% {opacity:0 }}@keyframes flash {0%, 100%, 50% {opacity:1 }25%, 75% {opacity:0 }}.flash {-webkit-animation-name:flash;animation-name:flash }@-webkit-keyframes pulse {0% {-webkit-transform:scale(1);transform:scale(1) }50% {-webkit-transform:scale(1.1);transform:scale(1.1) }100% {-webkit-transform:scale(1);transform:scale(1) }}@keyframes pulse {0% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }50% {-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1) }100% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }}.pulse {-webkit-animation-name:pulse;animation-name:pulse }@-webkit-keyframes rubberBand {0% {-webkit-transform:scale(1);transform:scale(1) }30% {-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75) }40% {-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25) }60% {-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85) }100% {-webkit-transform:scale(1);transform:scale(1) }}@keyframes rubberBand {0% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }30% {-webkit-transform:scaleX(1.25) scaleY(0.75);-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75) }40% {-webkit-transform:scaleX(0.75) scaleY(1.25);-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25) }60% {-webkit-transform:scaleX(1.15) scaleY(0.85);-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85) }100% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }}.rubberBand {-webkit-animation-name:rubberBand;animation-name:rubberBand }@-webkit-keyframes shake {0%, 100% {-webkit-transform:translateX(0);transform:translateX(0) }10%, 30%, 50%, 70%, 90% {-webkit-transform:translateX(-10px);transform:translateX(-10px) }20%, 40%, 60%, 80% {-webkit-transform:translateX(10px);transform:translateX(10px) }}@keyframes shake {0%, 100% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }10%, 30%, 50%, 70%, 90% {-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px) }20%, 40%, 60%, 80% {-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px) }}.shake {-webkit-animation-name:shake;animation-name:shake }@-webkit-keyframes swing {20% {-webkit-transform:rotate(15deg);transform:rotate(15deg) }40% {-webkit-transform:rotate(-10deg);transform:rotate(-10deg) }60% {-webkit-transform:rotate(5deg);transform:rotate(5deg) }80% {-webkit-transform:rotate(-5deg);transform:rotate(-5deg) }100% {-webkit-transform:rotate(0deg);transform:rotate(0deg) }}@keyframes swing {20% {-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg) }40% {-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg) }60% {-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg) }80% {-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg) }100% {-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg) }}.swing {-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing }@-webkit-keyframes tada {0% {-webkit-transform:scale(1);transform:scale(1) }10%, 20% {-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg) }30%, 50%, 70%, 90% {-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg) }40%, 60%, 80% {-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg) }100% {-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0) }}@keyframes tada {0% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }10%, 20% {-webkit-transform:scale(0.9) rotate(-3deg);-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg) }30%, 50%, 70%, 90% {-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg) }40%, 60%, 80% {-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg) }100% {-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0) }}.tada {-webkit-animation-name:tada;animation-name:tada }@-webkit-keyframes wobble {0% {-webkit-transform:translateX(0%);transform:translateX(0%) }15% {-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg) }30% {-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg) }45% {-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg) }60% {-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg) }75% {-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg) }100% {-webkit-transform:translateX(0%);transform:translateX(0%) }}@keyframes wobble {0% {-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%) }15% {-webkit-transform:translateX(-25%) rotate(-5deg);-ms-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg) }30% {-webkit-transform:translateX(20%) rotate(3deg);-ms-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg) }45% {-webkit-transform:translateX(-15%) rotate(-3deg);-ms-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg) }60% {-webkit-transform:translateX(10%) rotate(2deg);-ms-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg) }75% {-webkit-transform:translateX(-5%) rotate(-1deg);-ms-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg) }100% {-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%) }}.wobble {-webkit-animation-name:wobble;animation-name:wobble }@-webkit-keyframes bounceIn {0% {opacity:0;-webkit-transform:scale(.3);transform:scale(.3) }50% {opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05) }70% {-webkit-transform:scale(.9);transform:scale(.9) }100% {opacity:1;-webkit-transform:scale(1);transform:scale(1) }}@keyframes bounceIn {0% {opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3) }50% {opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05) }70% {-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9) }100% {opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }}.bounceIn {-webkit-animation-name:bounceIn;animation-name:bounceIn }@-webkit-keyframes bounceInDown {0% {opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px) }60% {opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px) }80% {-webkit-transform:translateY(-10px);transform:translateY(-10px) }100% {-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes bounceInDown {0% {opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px) }60% {opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px) }80% {-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px) }100% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.bounceInDown {-webkit-animation-name:bounceInDown;animation-name:bounceInDown }@-webkit-keyframes bounceInLeft {0% {opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px) }60% {opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px) }80% {-webkit-transform:translateX(-10px);transform:translateX(-10px) }100% {-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes bounceInLeft {0% {opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px) }60% {opacity:1;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px) }80% {-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px) }100% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.bounceInLeft {-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft }@-webkit-keyframes bounceInRight {0% {opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px) }60% {opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px) }80% {-webkit-transform:translateX(10px);transform:translateX(10px) }100% {-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes bounceInRight {0% {opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px) }60% {opacity:1;-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px) }80% {-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px) }100% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.bounceInRight {-webkit-animation-name:bounceInRight;animation-name:bounceInRight }@-webkit-keyframes bounceInUp {0% {opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px) }60% {opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px) }80% {-webkit-transform:translateY(10px);transform:translateY(10px) }100% {-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes bounceInUp {0% {opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px) }60% {opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px) }80% {-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px) }100% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.bounceInUp {-webkit-animation-name:bounceInUp;animation-name:bounceInUp }@-webkit-keyframes bounceOut {0% {-webkit-transform:scale(1);transform:scale(1) }25% {-webkit-transform:scale(.95);transform:scale(.95) }50% {opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1) }100% {opacity:0;-webkit-transform:scale(.3);transform:scale(.3) }}@keyframes bounceOut {0% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }25% {-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95) }50% {opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1) }100% {opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3) }}.bounceOut {-webkit-animation-name:bounceOut;animation-name:bounceOut }@-webkit-keyframes bounceOutDown {0% {-webkit-transform:translateY(0);transform:translateY(0) }20% {opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px) }100% {opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px) }}@keyframes bounceOutDown {0% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }20% {opacity:1;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px) }100% {opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px) }}.bounceOutDown {-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown }@-webkit-keyframes bounceOutLeft {0% {-webkit-transform:translateX(0);transform:translateX(0) }20% {opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px) }100% {opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px) }}@keyframes bounceOutLeft {0% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }20% {opacity:1;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px) }100% {opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px) }}.bounceOutLeft {-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft }@-webkit-keyframes bounceOutRight {0% {-webkit-transform:translateX(0);transform:translateX(0) }20% {opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px) }100% {opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px) }}@keyframes bounceOutRight {0% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }20% {opacity:1;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px) }100% {opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px) }}.bounceOutRight {-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight }@-webkit-keyframes bounceOutUp {0% {-webkit-transform:translateY(0);transform:translateY(0) }20% {opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px) }100% {opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px) }}@keyframes bounceOutUp {0% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }20% {opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px) }100% {opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px) }}.bounceOutUp {-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp }@-webkit-keyframes fadeIn {0% {opacity:0 }100% {opacity:1 }}@keyframes fadeIn {0% {opacity:0 }100% {opacity:1 }}.fadeIn {-webkit-animation-name:fadeIn;animation-name:fadeIn }@-webkit-keyframes fadeInDown {0% {opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px) }100% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes fadeInDown {0% {opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px) }100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.fadeInDown {-webkit-animation-name:fadeInDown;animation-name:fadeInDown }@-webkit-keyframes fadeInDownBig {0% {opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px) }100% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes fadeInDownBig {0% {opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px) }100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.fadeInDownBig {-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig }@-webkit-keyframes fadeInLeft {0% {opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px) }100% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes fadeInLeft {0% {opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px) }100% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.fadeInLeft {-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft }@-webkit-keyframes fadeInLeftBig {0% {opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px) }100% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes fadeInLeftBig {0% {opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px) }100% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.fadeInLeftBig {-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig }@-webkit-keyframes fadeInRight {0% {opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px) }100% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes fadeInRight {0% {opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px) }100% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.fadeInRight {-webkit-animation-name:fadeInRight;animation-name:fadeInRight }@-webkit-keyframes fadeInRightBig {0% {opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px) }100% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes fadeInRightBig {0% {opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px) }100% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.fadeInRightBig {-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig }@-webkit-keyframes fadeInUp {0% {opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px) }100% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes fadeInUp {0% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px) }100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.fadeInUp {-webkit-animation-name:fadeInUp;animation-name:fadeInUp }@-webkit-keyframes fadeInUpBig {0% {opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px) }100% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes fadeInUpBig {0% {opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px) }100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.fadeInUpBig {-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig }@-webkit-keyframes fadeOut {0% {opacity:1 }100% {opacity:0 }}@keyframes fadeOut {0% {opacity:1 }100% {opacity:0 }}.fadeOut {-webkit-animation-name:fadeOut;animation-name:fadeOut }@-webkit-keyframes fadeOutDown {0% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px) }}@keyframes fadeOutDown {0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px) }}.fadeOutDown {-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown }@-webkit-keyframes fadeOutDownBig {0% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px) }}@keyframes fadeOutDownBig {0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px) }}.fadeOutDownBig {-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig }@-webkit-keyframes fadeOutLeft {0% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px) }}@keyframes fadeOutLeft {0% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px) }}.fadeOutLeft {-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft }@-webkit-keyframes fadeOutLeftBig {0% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px) }}@keyframes fadeOutLeftBig {0% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px) }}.fadeOutLeftBig {-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig }@-webkit-keyframes fadeOutRight {0% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px) }}@keyframes fadeOutRight {0% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px) }}.fadeOutRight {-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight }@-webkit-keyframes fadeOutRightBig {0% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px) }}@keyframes fadeOutRightBig {0% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px) }}.fadeOutRightBig {-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig }@-webkit-keyframes fadeOutUp {0% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px) }}@keyframes fadeOutUp {0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px) }}.fadeOutUp {-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp }@-webkit-keyframes fadeOutUpBig {0% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px) }}@keyframes fadeOutUpBig {0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px) }}.fadeOutUpBig {-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig }@-webkit-keyframes flip {0% {-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }40% {-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }50% {-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in }80% {-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in }100% {-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in }}@keyframes flip {0% {-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }40% {-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }50% {-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in }80% {-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in }100% {-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in }}.animated.flip {-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip }@-webkit-keyframes flipInX {0% {-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0 }40% {-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg) }70% {-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg) }100% {-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1 }}@keyframes flipInX {0% {-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0 }40% {-webkit-transform:perspective(400px) rotateX(-10deg);-ms-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg) }70% {-webkit-transform:perspective(400px) rotateX(10deg);-ms-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg) }100% {-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1 }}.flipInX {-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX }@-webkit-keyframes flipInY {0% {-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0 }40% {-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg) }70% {-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg) }100% {-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1 }}@keyframes flipInY {0% {-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0 }40% {-webkit-transform:perspective(400px) rotateY(-10deg);-ms-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg) }70% {-webkit-transform:perspective(400px) rotateY(10deg);-ms-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg) }100% {-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1 }}.flipInY {-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY }@-webkit-keyframes flipOutX {0% {-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1 }100% {-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0 }}@keyframes flipOutX {0% {-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1 }100% {-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0 }}.flipOutX {-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important }@-webkit-keyframes flipOutY {0% {-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1 }100% {-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0 }}@keyframes flipOutY {0% {-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1 }100% {-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0 }}.flipOutY {-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY }@-webkit-keyframes lightSpeedIn {0% {-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0 }60% {-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1 }80% {-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1 }100% {-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1 }}@keyframes lightSpeedIn {0% {-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0 }60% {-webkit-transform:translateX(-20%) skewX(30deg);-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1 }80% {-webkit-transform:translateX(0%) skewX(-15deg);-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1 }100% {-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1 }}.lightSpeedIn {-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }@-webkit-keyframes lightSpeedOut {0% {-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1 }100% {-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0 }}@keyframes lightSpeedOut {0% {-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1 }100% {-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0 }}.lightSpeedOut {-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in }@-webkit-keyframes rotateIn {0% {-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0 }100% {-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }}@keyframes rotateIn {0% {-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);-ms-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0 }100% {-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }}.rotateIn {-webkit-animation-name:rotateIn;animation-name:rotateIn }@-webkit-keyframes rotateInDownLeft {0% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }100% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }}@keyframes rotateInDownLeft {0% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }100% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }}.rotateInDownLeft {-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft }@-webkit-keyframes rotateInDownRight {0% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }100% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }}@keyframes rotateInDownRight {0% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }100% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }}.rotateInDownRight {-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight }@-webkit-keyframes rotateInUpLeft {0% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }100% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }}@keyframes rotateInUpLeft {0% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }100% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }}.rotateInUpLeft {-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft }@-webkit-keyframes rotateInUpRight {0% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }100% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }}@keyframes rotateInUpRight {0% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }100% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }}.rotateInUpRight {-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight }@-webkit-keyframes rotateOut {0% {-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0 }}@keyframes rotateOut {0% {-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);-ms-transform:rotate(200deg);transform:rotate(200deg);opacity:0 }}.rotateOut {-webkit-animation-name:rotateOut;animation-name:rotateOut }@-webkit-keyframes rotateOutDownLeft {0% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }}@keyframes rotateOutDownLeft {0% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }}.rotateOutDownLeft {-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft }@-webkit-keyframes rotateOutDownRight {0% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }}@keyframes rotateOutDownRight {0% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }}.rotateOutDownRight {-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight }@-webkit-keyframes rotateOutUpLeft {0% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }}@keyframes rotateOutUpLeft {0% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0 }}.rotateOutUpLeft {-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft }@-webkit-keyframes rotateOutUpRight {0% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }}@keyframes rotateOutUpRight {0% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1 }100% {-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0 }}.rotateOutUpRight {-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight }@-webkit-keyframes slideInDown {0% {opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px) }100% {-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes slideInDown {0% {opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px) }100% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.slideInDown {-webkit-animation-name:slideInDown;animation-name:slideInDown }@-webkit-keyframes slideInLeft {0% {opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px) }100% {-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes slideInLeft {0% {opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px) }100% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.slideInLeft {-webkit-animation-name:slideInLeft;animation-name:slideInLeft }@-webkit-keyframes slideInRight {0% {opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px) }100% {-webkit-transform:translateX(0);transform:translateX(0) }}@keyframes slideInRight {0% {opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px) }100% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }}.slideInRight {-webkit-animation-name:slideInRight;animation-name:slideInRight }@-webkit-keyframes slideOutLeft {0% {-webkit-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px) }}@keyframes slideOutLeft {0% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px) }}.slideOutLeft {-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft }@-webkit-keyframes slideOutRight {0% {-webkit-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px) }}@keyframes slideOutRight {0% {-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0) }100% {opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px) }}.slideOutRight {-webkit-animation-name:slideOutRight;animation-name:slideOutRight }@-webkit-keyframes slideOutUp {0% {-webkit-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px) }}@keyframes slideOutUp {0% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px) }}.slideOutUp {-webkit-animation-name:slideOutUp;animation-name:slideOutUp }@-webkit-keyframes slideInUp {0% {opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px) }100% {opacity:1;-webkit-transform:translateY(0);transform:translateY(0) }}@keyframes slideInUp {0% {opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px) }100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }}.slideInUp {-webkit-animation-name:slideInUp;animation-name:slideInUp }@-webkit-keyframes slideOutDown {0% {-webkit-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px) }}@keyframes slideOutDown {0% {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0) }100% {opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px) }}.slideOutDown {-webkit-animation-name:slideOutDown;animation-name:slideOutDown }@-webkit-keyframes hinge {0% {-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }20%, 60% {-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }40% {-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }80% {-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1 }100% {-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0 }}@keyframes hinge {0% {-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }20%, 60% {-webkit-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }40% {-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }80% {-webkit-transform:rotate(60deg) translateY(0);-ms-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1 }100% {-webkit-transform:translateY(700px);-ms-transform:translateY(700px);transform:translateY(700px);opacity:0 }}.hinge {-webkit-animation-name:hinge;animation-name:hinge }@-webkit-keyframes rollIn {0% {opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg) }100% {opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg) }}@keyframes rollIn {0% {opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg) }100% {opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg) }}.rollIn {-webkit-animation-name:rollIn;animation-name:rollIn }@-webkit-keyframes rollOut {0% {opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg) }100% {opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg) }}@keyframes rollOut {0% {opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg) }100% {opacity:0;-webkit-transform:translateX(100%) rotate(120deg);-ms-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg) }}.rollOut {-webkit-animation-name:rollOut;animation-name:rollOut }@-webkit-keyframes zoomIn {0% {opacity:0;-webkit-transform:scale(.3);transform:scale(.3) }50% {opacity:1 }}@keyframes zoomIn {0% {opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3) }50% {opacity:1 }}.zoomIn {-webkit-animation-name:zoomIn;animation-name:zoomIn }@-webkit-keyframes zoomInDown {0% {opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}@keyframes zoomInDown {0% {opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}.zoomInDown {-webkit-animation-name:zoomInDown;animation-name:zoomInDown }@-webkit-keyframes zoomInLeft {0% {opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}@keyframes zoomInLeft {0% {opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}.zoomInLeft {-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft }@-webkit-keyframes zoomInRight {0% {opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}@keyframes zoomInRight {0% {opacity:0;-webkit-transform:scale(.1) translateX(2000px);-ms-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateX(-48px);-ms-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}.zoomInRight {-webkit-animation-name:zoomInRight;animation-name:zoomInRight }@-webkit-keyframes zoomInUp {0% {opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}@keyframes zoomInUp {0% {opacity:0;-webkit-transform:scale(.1) translateY(2000px);-ms-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out }60% {opacity:1;-webkit-transform:scale(.475) translateY(-60px);-ms-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out }}.zoomInUp {-webkit-animation-name:zoomInUp;animation-name:zoomInUp }@-webkit-keyframes zoomOut {0% {opacity:1;-webkit-transform:scale(1);transform:scale(1) }50% {opacity:0;-webkit-transform:scale(.3);transform:scale(.3) }100% {opacity:0 }}@keyframes zoomOut {0% {opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1) }50% {opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3) }100% {opacity:0 }}.zoomOut {-webkit-animation-name:zoomOut;animation-name:zoomOut }@-webkit-keyframes zoomOutDown {40% {opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom }}@keyframes zoomOutDown {40% {opacity:1;-webkit-transform:scale(.475) translateY(-60px);-ms-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateY(2000px);-ms-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom }}.zoomOutDown {-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown }@-webkit-keyframes zoomOutLeft {40% {opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center }}@keyframes zoomOutLeft {40% {opacity:1;-webkit-transform:scale(.475) translateX(42px);-ms-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center }}.zoomOutLeft {-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft }@-webkit-keyframes zoomOutRight {40% {opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center }}@keyframes zoomOutRight {40% {opacity:1;-webkit-transform:scale(.475) translateX(-42px);-ms-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateX(2000px);-ms-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center }}.zoomOutRight {-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight }@-webkit-keyframes zoomOutUp {40% {opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top }}@keyframes zoomOutUp {40% {opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear }100% {opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top }}.zoomOutUp {-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp }


 ================================================

JAVA SCRIPT

<script>

(function() {
  var Util,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  Util = (function() {
    function Util() {}

    Util.prototype.extend = function(custom, defaults) {
      var key, value;
      for (key in custom) {
        value = custom[key];
        if (value != null) {
          defaults[key] = value;
        }
      }
      return defaults;
    };

    Util.prototype.isMobile = function(agent) {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
    };

    return Util;

  })();

  this.WOW = (function() {
    WOW.prototype.defaults = {
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true
    };

    function WOW(options) {
      if (options == null) {
        options = {};
      }
      this.scrollCallback = __bind(this.scrollCallback, this);
      this.scrollHandler = __bind(this.scrollHandler, this);
      this.start = __bind(this.start, this);
      this.scrolled = true;
      this.config = this.util().extend(options, this.defaults);
    }

    WOW.prototype.init = function() {
      var _ref;
      this.element = window.document.documentElement;
      if ((_ref = document.readyState) === "interactive" || _ref === "complete") {
        return this.start();
      } else {
        return document.addEventListener('DOMContentLoaded', this.start);
      }
    };

    WOW.prototype.start = function() {
      var box, _i, _len, _ref;
      this.boxes = this.element.getElementsByClassName(this.config.boxClass);
      if (this.boxes.length) {
        if (this.disabled()) {
          return this.resetStyle();
        } else {
          _ref = this.boxes;
          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            box = _ref[_i];
            this.applyStyle(box, true);
          }
          window.addEventListener('scroll', this.scrollHandler, false);
          window.addEventListener('resize', this.scrollHandler, false);
          return this.interval = setInterval(this.scrollCallback, 50);
        }
      }
    };

    WOW.prototype.stop = function() {
      window.removeEventListener('scroll', this.scrollHandler, false);
      window.removeEventListener('resize', this.scrollHandler, false);
      if (this.interval != null) {
        return clearInterval(this.interval);
      }
    };

    WOW.prototype.show = function(box) {
      this.applyStyle(box);
      return box.className = "" + box.className + " " + this.config.animateClass;
    };

    WOW.prototype.applyStyle = function(box, hidden) {
      var delay, duration, iteration;
      duration = box.getAttribute('data-wow-duration');
      delay = box.getAttribute('data-wow-delay');
      iteration = box.getAttribute('data-wow-iteration');
      return box.setAttribute('style', this.customStyle(hidden, duration, delay, iteration));
    };

    WOW.prototype.resetStyle = function() {
      var box, _i, _len, _ref, _results;
      _ref = this.boxes;
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        box = _ref[_i];
        _results.push(box.setAttribute('style', 'visibility: visible;'));
      }
      return _results;
    };

    WOW.prototype.customStyle = function(hidden, duration, delay, iteration) {
      var style;
      style = hidden ? "visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;" : "visibility: visible;";
      if (duration) {
        style += "-webkit-animation-duration: " + duration + "; -moz-animation-duration: " + duration + "; animation-duration: " + duration + ";";
      }
      if (delay) {
        style += "-webkit-animation-delay: " + delay + "; -moz-animation-delay: " + delay + "; animation-delay: " + delay + ";";
      }
      if (iteration) {
        style += "-webkit-animation-iteration-count: " + iteration + "; -moz-animation-iteration-count: " + iteration + "; animation-iteration-count: " + iteration + ";";
      }
      return style;
    };

    WOW.prototype.scrollHandler = function() {
      return this.scrolled = true;
    };

    WOW.prototype.scrollCallback = function() {
      var box;
      if (this.scrolled) {
        this.scrolled = false;
        this.boxes = (function() {
          var _i, _len, _ref, _results;
          _ref = this.boxes;
          _results = [];
          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            box = _ref[_i];
            if (!(box)) {
              continue;
            }
            if (this.isVisible(box)) {
              this.show(box);
              continue;
            }
            _results.push(box);
          }
          return _results;
        }).call(this);
        if (!this.boxes.length) {
          return this.stop();
        }
      }
    };

    WOW.prototype.offsetTop = function(element) {
      var top;
      top = element.offsetTop;
      while (element = element.offsetParent) {
        top += element.offsetTop;
      }
      return top;
    };

    WOW.prototype.isVisible = function(box) {
      var bottom, offset, top, viewBottom, viewTop;
      offset = box.getAttribute('data-wow-offset') || this.config.offset;
      viewTop = window.pageYOffset;
      viewBottom = viewTop + this.element.clientHeight - offset;
      top = this.offsetTop(box);
      bottom = top + box.clientHeight;
      return top <= viewBottom && bottom >= viewTop;
    };

    WOW.prototype.util = function() {
      return this._util || (this._util = new Util());
    };

    WOW.prototype.disabled = function() {
      return !this.config.mobile && this.util().isMobile(navigator.userAgent);
    };

    return WOW;

  })();

}).call(this);


wow = new WOW(
  {
    animateClass: 'animated',
    offset: 100
  }
);
wow.init();

</script>

Animate on scroll with wow.js Animate on scroll with wow.js Reviewed by govtjobsalertindia on 20:16 Rating: 5

You May Also Like

No comments:

Post a Comment

Subscribe to: Post Comments ( Atom )
Powered by Blogger.