On-scroll animations are one of the most popular and enduring web-development techniques from recent years; with them, HTML elements remain hidden until the user scrolls the page, whereupon the element reveals itself with an impressive (assuming you’ve coded it correctly!) animation that makes your site look dynamic and modern, unlike the static pages of old. In our latest business-focused templates such as MO and John S we included a helpful additional script called scrollReveal.js, which allows customers to define animations without any HTML or CSS knowledge.
Usually, an on-scroll animation is created with a CSS3 transition and a script to detect the current page position in the browser window. Very nice when you know how, but if you’re a beginner, it can be a daunting, frustrating prospect. Thankfully, the ScrollReveal library is here to simplify the process so that even someone with fairly basic skills can get the animations up and running without any blood, sweat or tears.
The first simplification, which will please those of us who struggle with the often unclear syntax that CSS3 produces, is that scrollReveal.js uses declarative language to describe the animation; this means no CSS or JavaScript code. Take a look at this sample animation description; it’s quite a bit clearer than average:
<div data-scroll-reveal="enter left and move 50px over 1.33s"> Foo </div>
This simple line of HTML code has actually defined a complete animation already, believe it or not! The description of what should happen is all that’s needed to get the animation going. The element starts off invisible; hidden from view, like a dancer waiting in the wings. Once your browser window reaches the element it will enter from the left side and move 50 pixels to its end position (think of the ‘move’ command as defining how far away from its final position the element should start from). How long will this animation take? That’s what the final number’s for; by declaring ‘over 1.33s’ the animation knows to get everything done within 1.33 seconds.
It’s really easy to understand, even for inexperienced users, but the benefits are huge. If you’re looking to use scrollReveal.js you’ll need to add the script to your website, just like any other standard JavaScript library, with the code:
<script src='{your_JavaScript_path}/scrollReveal.js'></script>
The code above may be added to the HEAD area or right before the BODY closing tag (