Oooooooo Pretty Scrolls.

Ben-pretty-client-side-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…

ben-pretty-cs-dev-scrolls

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.

ben-pretty-cs-dev-scrolls2

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

ben-pretty-cs-dev-scrolls3

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….

ben-pretty-cs-dev-scrolls4

The div when not scrolled past 50% of the screen

ben-pretty-cs-dev-scrolls6

And then when scrolled..

ben-pretty-cs-dev-scrolls8

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

want to speak to one of our experts?

Ben Davies Thumbnail
Ben Davies
front end Developer
Ben started his career in 2013 as a full stack developer but has since specialised in client-side development.
Ben Davies Thumbnail

Ben Davies

05 Jun 2017 - 10 minute read
share this

stay in the know, stay ahead.

Get the latest from the agency, including news, events and expert content.
explore services in the article
find out what we can do for you
read some of our case studies