Demo by Gajendar Singh about using the AOS library accompanying the following article on SitePoint:
Cool on Scroll Animations Made Easy With the AOS Library URL: https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library
Demo by Gajendar Singh about using the AOS library accompanying the following article on SitePoint:
Cool on Scroll Animations Made Easy With the AOS Library URL: https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library
<h1>Using AOS to Add Animations</h1> | |
<h2>Basic Animation</h2> | |
<p>You need to scroll down to see the effect.</p> | |
<div class="box a" data-aos="fade-up"> | |
<h2>Animated using <code>fade-up</code>.</h2></div> | |
<div class="box b" data-aos="flip-down"><h2>Animated using <code>flip-down</code>.</h2></div> | |
<div class="box b" data-aos="zoom-in"><h2>Animated using <code>zoom-in</code>.</h2></div> |
AOS.init(); | |
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script> |
body { | |
font-size: 1.2em; | |
font-family: 'Lato'; | |
font-weight: 300; | |
text-align: center; | |
} | |
.box { | |
width: 40%; | |
height: 200px; | |
background: orange; | |
border-radius: 2px; | |
padding: 10px; | |
color: white; | |
text-align: center; | |
} | |
.a { | |
margin: 120vh auto 0 auto; | |
} | |
.b { | |
margin: 40vh auto 0 auto; | |
} |
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" /> |