Fade parts of your html page as you scroll using JQuery

Posted Tuesday 23rd Oct 2012 by Claire Jennings 1 Comment

Something that can add a nice little effect to your site is to have parts of the page fade in as you scroll down the page. Make different parts of your site fade-in as you scroll, in whatever order you want!

Take a look at the demo »
Download the demo plugin »

Step 1: Load Jquery into your Head

Insert the below code between your tags:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.js"></script>

Step 2: HTML

Insert the below HTML into your main tags:

<div class="example1"> Loads DIV When your Page Loads </div>
<div class="example2"> Loads DIV when Scrollbar moves to 100px</div>
<div class="example3">Loads DIV when Scrollbar is near the bottom of the page </div>
<div class="example4"> Loads DIV when Scrollbar hits the Bottom of the Page </div>

Step 3: CSS

Add the below into your CSS file.

.example1, .example2, .example3, .example4 { opacity:0; filter:alpha(opacity=0); }

As you can see for each class, there are two CSS rules, these rules ensure that the DIV is hidden until scroll. Older browsers that do not support this will just load the website without the fading effects.

Step 4: Fading in

Below is the Jquery you need to add to your jquery.js file:

a) Fade in when scrollbar hits 100px:

/* Loads DIV when Scrollbar moves to 100px */
	$(window).scroll( function() {
        if ( $(window).scrollTop() > 100 ) {
           loadDiv2(); 
        }
	});

	function loadDiv2() {
		$('.example2').fadeIn('slow', function() {
			$(this).fadeTo("slow", 1);
		});
	}

b) Fade in when scrollbar is 200px from bottom:

/* Loads DIV when Scrollbar is near the bottom of the page */
	$(window).scroll( function() {
        if ( $(window).scrollTop() + $(window).height() >= $(document).height() - 100 ) {
           loadDiv3(); 
        }
	});

	function loadDiv3() {
		$('.example3').fadeIn('slow', function() {
			$(this).fadeTo("slow", 1);
		});
	}

c) Fade in when scrollbar hits bottom of the page:

/* Loads DIV when Scrollbar hits the Bottom of the Page */
	$(window).scroll( function() {
        if ( $(window).scrollTop() + $(window).height() >= $(document).height() ) {
           loadDiv4(); 
        }
	});

	function loadDiv4() {
		$('.example4').fadeIn('slow', function() {
			$(this).fadeTo("slow", 1);
		});
	}

Not Working?

First of all, if you have changed your classes, you need to ensure that these are all relating to eachother in the jquery.js file, CSS file and your html file. Secondly, check that you are sourcing your CSS and your jquery.js files from the correct location. To ensure it is compatible with older browsers you can also use CSS3 Pie my colleague James wrote about a few days ago.View CSS3 pie post »

By Claire Jennings

Claire loves to design pretty website's all day long, she especially likes creating Magento and Wordpress based websites, and finding out new nifty tricks along the way. In her spare time likes to make Truffles, Think up new ideas whilst brushing her teeth, and change her hair colour. (On that note what colour shall i do next?)

See all of posts.