Fade In Elements on Scroll with JQuery

Adding in the little finishing touches to a website can take it to another level. Subtle animations can help highlight items, draw the eye, and just make the page more engaging. These effects may look really fancy and complicated, but with the jQuery script I will provide below, you’ll be able to easily add fade in elements with ease to any of your existing pages’ elements. We can also do some slight modifications to handle slide in effects as well and combine several effects into one. We’ll take a look at an example of each.

Fade In Elements on Scroll Code

You can just load add this script to your site as-is for a standard fade in element option. The basic run-through of this code is that it executes whenever the user scrolls. Once a scroll is detected it will run through any element with the assigned class and check that element’s position on the screen and if it is in view it will start the animation.

$(document).ready(function() {
    $(window).scroll( function(){
        $('.fadein').each( function(i){
            
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            if( bottom_of_window > bottom_of_element ){
                $(this).animate({'opacity':'1'},1000);
            }
            
        }); 
    });
});

In addition, to the above code you need to add in this CSS code to prep your chosen items to fade in on scroll. This just sets the base opacity to start it off as invisible.

.fadein {
    opacity:0;
}

Once you have the jQuery and CSS code put into the site, you can just add the ‘fadein’ class to any element that you want to fade in. That was easy, right?

Fade In Element Demo

Slide In Element Code

Now we’ll mix it up a little bit and try out a slide in animation. In this example we will be sliding the element in from the left. I am using a 300 pixel offset, but you can vary that to whatever you think looks good.

$(document).ready(function() {
    $(window).scroll( function(){
        $('.slideinleft').each( function(i){
            
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            if( bottom_of_window > bottom_of_element ){
                $(this).animate({'margin-left':'0px'},1000);
            }
            
        }); 
    });
});

Here is the CSS code you need to add in to prep your elements to slide in on scroll. This CSS starts the div off to the left and will animate back to a 0px left margin. Adding the max-width here makes the whole element slide as a set unit. Not adding a width or max-width here could result in the contents stretching to the negative left margin instead of moving the full element over.

.slideinleft {
	margin-left:-300px;
	max-width:100%;
}

Slide In Element Demo

Fade In Element with Slide In Effect Code

In this example, we will combine the previous two effects into one single effect within a single animate statement. Combining them into one will allow them to execute at the same time instead of one after another.

$(document).ready(function() {
    $(window).scroll( function(){
        $('.fadeinleft').each( function(i){
            
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            if( bottom_of_window > bottom_of_element ){
                $(this).animate({'opacity':'1','margin-left':'0px'},1000);
            }
            
        }); 
    });
});

Here is the CSS code you need to add in to prep your elements to fade in and slide in on scroll.

.fadeinleft {
	opacity:0;
	margin-left:-300px;	
	max-width:100%;
}

Fade In Element From the Left Demo

There you have a fade in, slide in, and fade-slide combo effect. You can use all three of these elements on your website and mix and match their usage as you see fit on any page by just adding any of the generated CSS classes to your site elements.

Begin Effect on Page Load

If your element is at the top of the page and you don’t want to require the user to scroll before they can see the element effect begin, you just need to take the core code out of the scroll function.

$(document).ready(function() {
    $('.fadeonload').each( function(i){
        $(this).animate({'opacity':'1','margin-left':'0px'},1000);
    }); 
});

Wrap Up

We saw how to fade in elements, slide in elements, and combine the two together, but there are a lot more potential variations you can mix in. Experiment with the settings and try it out on your own site. It’s amazing how much of a difference just adding in some fade in elements can do for making your page come alive.