This cheeky number is one that we’ve only come across recently, and we cannot get enough of it! A lot of sites these days have elements that interact with scrolling through a site, making different parts become visible as they come in view. What scrollReveal does is allow for this functionality and interaction on your site with incredibly simple html markup.
It really is as easy as relating the plugin file to your site, and then adding ‘data-sr’ to any elements that you want to animate on scroll, and VOILA!
What makes this plugin super awesome is the natural language you can bring into customising the way elements are revealed.
<div data-sr="enter left, hustle 20px"> Foo </div>
<div data-sr="wait 2.5s, ease-in-out 100px"> Bar </div>
<div data-sr="move 16px scale up 20%, over 2s"> Baz </div>
<div data-sr="enter bottom, roll 45deg, over 2s"> Bun </div>
As you can see, it can literally be the case of writing a sentence for what you want to happen. I mean, come on, don’t tell me you’re not impressed by that!