Animate page based on the users scroll position

Today I am going to give away a freebie. I am planning on doing this regularly, so if anyone has any suggestions on what they would like to see. Leave a comment if you have any ideas.
These posts will consist of ready to use scripts. Most of the time I will create more than one style, to make it easy for you to copy this over to your project.

Today I have some cool animations. I am going to shrink headers, have fullscreen images reveal our content and more. Every animation will be triggered if the user has scrolled passed a certain threshold. Below there is example, try it. Keep an eye out for the red box in the upper right corner.

See the Pen zNXJvo by Skippy (@Skippy) on CodePen.0

This demo will be the base of all the variations posted below. It uses a simple jQuery script, that detects if the user has scrolled, and by how much.

Here is the complete script

  $(window).scroll(function(event) {
    var scrolledValue = $(window).scrollTop();
    var topElem = $('.header');
    $('.scrollcounter').empty().append(scrolledValue+"px");

    
     if(scrolledValue >= 50){
       topElem.addClass('slim');
     }else{
       topElem.removeClass('slim');
     }
  });

First, the script needs to be fired when the user scroll in the window.

$(window).scroll(function(event) { //code goes here });

Then, you will need to save the current scroll position of the window to a variable.

var scrolledValue = $(window).scrollTop();

You also need to store a jQuery object of the header in a variable.

var topElem = $(‘.header’);

In the examples there is a bright red box in the upper right corner. This is a debug window that will show the current scroll position of the window. You can remove it from the html, and delete the following line to completely disable it.

$(‘.scrollcounter’).empty().append(scrolledValue+”px”);

Now, this is where all the magic is happening.

if(scrolledValue >= 50){
  topElem.addClass('slim');
}else{
  topElem.removeClass('slim');
}

If the value, that has been set with the users scroll position, is greater than or equal to 50 (pixels) the class .slim  will be added to the topElem which has been set with the jQuery object .header. If these criteria are not met, it will remove the class. This is a simple script, you can extend this if you please. But for the demos posted below, this is the JavaScript that does all the detecting.

If you look at the code, you can see you only need 1 element and 2 classes to make this to work. First you need a .header element in the HTML. I would recommend a div , or header. In the CSS you can give it your own personal styling, you do need to give it a height. Otherwise it is impossible to shrink the header. You also need to create the class .slim in your CSS file. Give it a smaller height than you have set the .header  at.

Shrink a fullscreen image to header

With the base code in place, we can easily create effects that will shrink our header. Like in the first shown example. But you can do much cooler things with this.

In the example below, you see a fullscreen image hiding the content. A title is centered in the screen, and if the user scrolls past the threshold of 50 pixels the image will slide up and fade out. The title will move up and fits nicely inside the header. A shadow has been applied to the header to give it a more floating appearance and it will be clear that this is a separate object on the screen for the viewer if you keep using a white background for it. Since the header is white in this example, the title will be made black.

In this example, we have hidden the content below the fullscreen image.

See the Pen apgNKa by Skippy (@Skippy) on CodePen.dark

Create header background and shrink logo

In the next example there is no header. There is an image but it is not animated. The image does have a fixed background attachment. The div still scrolls out of the screen, but the image sticks to the top of the screen. Giving it a parallax illusion. You can do this with the following line. background-attachment: fixed;

If the user scrolls, the logo will shrink a tiny bit. A white background appears and shrinks down to an acceptable header size. The content will be appearing to slide over the background image.

See the Pen egwZaK by Skippy (@Skippy) on CodePen.dark

Use the script on more than 1 element that are not in the same scope

Sometimes, you just need a little more freedom. Like in the following example. I have created a large screen filling hero image with the company’s logo. I don’t want it to be cluttered with the menu already, I want the first impression to be peace and serenity (I am making this up as I type this, whatever reason you have). And a logo, they both are in the root of the document. So I cannot use the jQuery script from before, as this only applies the .slim class to the .header  element. If you change the topElem variable in the jQuery like so. var topElem = $(‘body’); you can now do the following in your css and have the effects all applied at the same time.

before:

.header.slim{

/*my css*/ }

Now you can do this:

.slim .logo{
  /*my css*/
}
.slim .header{
  /*my css*/
}
.slim .title{
  /*my css*/
}
/* you can do this as much as you want.*/

So with that problem out of the way, I can now animate the logo and the menu bar at the same time. If the user scrolls, the menu bar pops in from above and the logo will shrink to make it fit in the menu bar.

See the Pen wgLzjO by Skippy (@Skippy) on CodePen.dark

And that is it for today, I hope anyone can use any of these scripts. You are free to copy, modify and distribute any of my creations. The images used are downloaded from Pexels, a free stock photo search engine.

If you have used these scripts in another way than shown up here, post it below in the comments. Until next time!