wow implementation

by Nabaraj Saha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<div style="overflow:hidden">
    <div id="div1" class="div1 dd wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.2s">div1</div>
    <div id="div2" class="div2 dd wow slideInRight" data-wow-duration="2s" data-wow-delay="0.2s">div2</div>
    <div id="div3" class="div3 dd wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.2s">div3</div>
    <div id="div4" class="div4 dd wow slideInRight" data-wow-duration="2s" data-wow-delay="0.2s">div4</div>
    <div id="div5" class="div5 dd wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.2s">div5</div>
    <div id="div6" class="div6 dd wow slideInRight" data-wow-duration="2s" data-wow-delay="0.2s">div6</div>
    <div id="div7" class="div7 dd wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.2s">div7</div>
    <div id="div8" class="div8 dd wow slideInRight" data-wow-duration="2s" data-wow-delay="0.2s">div8</div>
</div>

CSS

.dd{
    height:500px;
    border:#333333 1px solid;
}
.div1{
    background-color:#FF8C8C;
}
.div2{
    background-color:#FF8CDF;
}
.div3{
    background-color:#8CF2FF;
}
.div4{
    background-color:#00DB56;
}
.div5{
    background-color:#FFCE8C;
}
.div6{
    background-color:#4F51FA;
}
.div7{
    background-color:#01D21C;
}
.div8{
    background-color: cyan;
}

JavaScript

new WOW().init();