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

Kitten Fade In Elements

 

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

Kitten Fade In Elements

 

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

Kitten Fade In Elements From the Left

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.

Comments

  1. Thanks for that post!

  2. Christine Bergman says

    This was really helpful – thanks so much!

  3. Thanks for that amazing post <3

    How can I fade the image at middle of scroll and not on bottom? 🙁

    • Thanks for the feedback!
      You can adjust when the action occurs by playing with the values of ‘bottom_of_element’ or ‘bottom_of_window’. The ideal settings can definitely vary depending on the height of the image as a really tall image would not work well with this code out of the box.
      var bottom_of_element = $(this).offset().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      Right now it is triggering once the bottom of the element enters the visible area. ‘bottom_of_element’ is tracking the bottom edge of the image, and ‘bottom_of_window’ is tracking the bottom of the screen. So for example, if you remove the addition of $(this).outerHeight(), then it will be tracking the top edge of the image and will trigger when the top edge hits the bottom of the screen. That might be too soon. So at that point, you may want to cut the $(window).height() in half so that the load triggers when the top edge of the image enters the middle of the screen.

      Example:
      var bottom_of_element = $(this).offset().top;
      var bottom_of_window = $(window).scrollTop() + ($(window).height() / 2);

      That might give you the CSS fade-in effect that you are looking for, but if not, play around with the values more until it is something that looks good to you!

  4. Thanks a lot. very helpfull.

  5. Faruqi Jeniri says

    Thanks a lot, I feel better now! I was struggling with jQuery for fade in but this post help me a lot. Thanks once again.

Speak Your Mind

*