Must say I do like the fact that the data-when attribute accepts enter(= when the element enters the viewport), exit(= when the element exits the viewport), and span(= as long as the element is shown in the current viewport) as a value.
<div data-sr="enter left please, and hustle 20px"> Foo </div>
<div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div>
<div data-sr="enter bottom and scale up 20% over 2s"> Baz </div>
window.sr = new scrollReveal();
Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute is waiting for you to describe the type of animation you want. It’s as simple as using a few keywords and natural language.
Related: the aforementioned Skrollr allows you to define CSS changes linked to the current scroll position. It doesn’t use natural language, but allows you to manipulate each CSS property individually. Must say I prefer that way of working more.
HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually.
Works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.
Uses CSS’ ::before and ::after to repeat the characters seen on screen. The key part – where the character is passed from the HTML to CSS – uses a data-* HTML attribute along with content: attr(data-nameoftheattribute); in CSS. Finally, some more CSS is used to only show half/a third of the orginal and overlaid characters.
The repository also ships with a jQuery plugin to automate the effect