5A - Web Technology Demo
Who
Manoela Ilic via Codrops.
Where
This was demonstrated on: Codrops.
What
This combination of HTML/CSS/JS provides a very interesting text reveal when scrolling content on a website. As the user scrolls, text moves from out-of-focus to in-focus in a smooth manner.
After setting up the necessary javascript dependencies and css, the blur effect can be added to paragraphs using the blur-text class and blur-text--# where # represents the number correlating to the effect you would like to use. Data-effect-# for the correlating effect must also be added to the element.
Why
This concept is interesting because it provides a dynamic, stylized and modern way to introduce text to the user - in an easy to use package with very few dependencies.
View Demo Download DemoHTML
CSS
JS