Multiple Practical Effect For Building Parallax Websites

Download   Demo
Websites with scroll animations are all the rage these days. we’re going to show you a few practical examples for building them. You can think of this article as a collection of building blocks which you can mix and match into an impressive interactive web page.

The Basic Idea

The usual way that these websites are built is by using a JavaScript library. Some of the popular choices are Scrollr, scrollMagic, Parallax.js, scrollReveal.js and others. We are going to use Scrollr today as it is the most popular and works on mobile devices.

To use Scrollr, you only need to download it’s source and create a link to it in your HTML. After that’s done, calling skrollr.init(); will enable Scrollr for all elements on the page.

<script src="assets/skrollr.min.js"></script>

<script>

skrollr.init();

</script>

The library is very powerful and you can create all kinds of scroll animations with it. See the website that we were able to build with it:
Want to learn how it was made? Keep on reading!

Introduction to Scrollr

Once you have the Scrollr library in your page, you add data attributes to the elements you wish to animate while the page is scrolled. Here’s the most basic example, which animates a div from blue to red:

<div data-bottom-top="background-color: rgb(255,0,0);"

data-center-center="background-color: rgb(0,0,255);">

</div>

We have a simple div with a pair of attributes. The first attribute will tell Scrollr when the animation starts and the second one when it should end. As you can see, the animation itself is done via CSS properties (note that you need to specify the colors as rgb). The library smoothly transitions from one to the other.
Using these data attributes, you can create all kinds of interesting effects. Here are a few practical examples that show you what you can do.