Oooooooo Pretty Scrolls.

Today I’m going to share my technique in having a smooth effect which triggers when scrolling through a webpage using SCSS, you will need to following plugin...

jQuery Waypoints (see: http://imakewebthings.com/waypoints/)

That’s about it… OH! And some creatigation (Creative and imagination mashed together). I demonstrate both of these here with me making a new word. Can you make a new word? If not then this isn’t for you…

If so congratulations!

Let’s make a start…

If you place the above code snippet into your document ready function this is a good starting point, basically what this will do, will give every class off scroll-effect an additional in-view when the class is at the halfway point on screen, it’s good to have a fairly low offset to being with so you can see animation clearly, Ideally the finished product should have an offset of somewhere between 75% - 85%. So the effect is very subtle.

The HTML.

I’ve highlighted in a very clear black square as what we we’ll be looking at specifically, You can see the scroll effect class, this is given to all the elements you would like to have the scrolling animation, the additional ‘UI001’ class is the identifier which will become clear in the SCSS as to what this does.

So the SCSS.

Firstly, I like to make my own scss file so there is more structure and the scroll effect styling

doesn’t bloat out other scss files you will have.. So let’s have a look at the SCSS.

You can see that the purpose of the UI00X class is to give each component specificity.

Especially if you have more elements to animate, like so….

The div when not scrolled past 50% of the screen

And then when scrolled..

So to go over once more…

Using the jQuery waypoints plugin we can pick up any class and toggle a class, which will animate the entrance of any element on the page.

And remember…..

creatigation