How to add parallax effect to a website

I wanted an image to enlarge as you scrolled past it on my site.

I used Skrollr 0.6.27 to achive this.

First I installed Skrollr via Bower. Within terminal I located the project and installed Skrollr:

$ cd /project-location
$ bower install skrollr --save-dev

I added a data attribute to the image for the start size and end size using data-top and data-bottom which Skrollr defines as when the item passes the top of the viewport or the bottom.

You can also set your own position in pixels from the top of the page with data-500 (500 being the number of pixels from the top of the page).

<img src="my-image.jpg" data-bottom="width:10%" data-top="width:100%" />

I also had to make sure my CSS gave this element the same starting width.

img {
  width: 10%;

Then I call Skrollr in my Java Script file (custom.js)

var s = skrollr.init();

For support on mobile you need to assign the id skrollr-body to at least one element on the page. I did it on the body tag. Read more here.

<body id="skrollr-body">

I had an issue that the height of the page kept changing so I would not see the effect. To solve this I made sure the IMG had a wrapping DIV which I set with a fixed height.

There are many more options and examples on the Skrollr repository.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s