The result of this code, with a bit of style to be more pleasant, is displayed below and also available as a JSFiddle: The library will execute a simple fade in on all the divs. With this last step performed, we’re now ready to open the page. With this simple code in place, all you need to do is to add the following JavaScript code: new scrollReveal() So, let’s say that you have the following HTML code in your page: As we’ll see in the next section you can change the animations applied by setting a value for this attribute, but in its simple use, having the attribute is enough.
Specifically, scrollReveal.js searches for elements on the page with an attribute named data-sr. With the library in place, we need to add or modify some elements that the library will animate. In case you have downloaded it using Bower, the path should resemble the following: Once downloaded, you have to include the library in your page by adding a script element as shown in the following code:
#SCROLL REVEAL UNPKG INSTALL#
As usual this can be done either by downloading it from its GitHub repository, or through Bower using the following command: bower install scrollReveal.js In order to use scrollReveal.js in our web pages, we have to obtain a copy of the library.
0 kommentar(er)
