Have you ever seen a website that seems to add elements to the page as you continue to scroll down? Check out this demo (which uses only Javascript and CSS, no jQuery)

Scroll down in the demo to see the added elements

If you read my last post on using onscroll in javascript, then you might have an idea of what’s going on here. Lets start with the HTML

<p>Lorum Ipsum.....</p>
<p>Lorum Ipsum.....</p>
<div id="one"><p>Some content to add</p></div>
<p>Lorum Ipsum.....</p>
<div id="two"><p>Some content to add</p></div>
<p>Lorum Ipsum.....</p>
<div id="three"><p>Some content to add</p></div>

Inside the divs with the IDs one, two, and three, you can add anything, it can be text, an image, both, anything you want. Now the Javascript

<script>
onscroll = function() {
	if (window.pageYOffset > 50){
		document.getElementById('one').className = 'scrolled'
	}
	if (window.pageYOffset > 500){
		document.getElementById('two').className = 'scrolled'
	}
	if (window.pageYOffset > 1100){
		document.getElementById('three').className = 'scrolled'
	}
} 
</script>

Basically what I’m doing is checking how far down the page has been scrolled, then add a class to each of my three divs at the appropriate scroll amount. The three numbers, 50, 500, and 1100 are in px, and are what work for the demonstration, your site will require different numbers. Now the really interesting part is the CSS, because most people will tell you that for moving elements around, fading them in and out ect. you need to use jQuery, but CSS3 transitions have made a lot more possible with just using native languages. This CSS is for the div#one

#one {background:rgb(230,230,230);
	border-radius:20px;
	position:relative;
	left:-5000px;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#one.scrolled {left:0px;}

I’ve done a few things here. First I position the div relative all the way off the screen with a left:-5000then gave it a transition of 1 second. Once the page is scrolled down far enough and the javascript is triggered, we add the class of scrolled, and now position the div back to its natural place. When it goes from its position of -5000px to 0 over the 1 second that we declare, it will animate in from the left side of the screen.

#two {
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#two p{color:white;}
#two.scrolled {
	border-radius:40px;
	background:rgb(75,75,75);
}

The div#two is really suited for text elements but its especially interesting because it really fakes the jQuery .fadein() method. It follows the same principals as the first example, except this time I make the font color white so it blends in with the background, then I fade in a dark background color which allows the text to become visible.

#three{
	overflow:hidden;
}
#three pre {
	position:relative;
	top:300px;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

}
#three.scrolled pre{
	top:0
}

This is an example of how to fake the .scrollup() or .scrolldown() jQuery methods. We start by creating a div and give it an overflow:hidden, then position its inner content to be outside of its content area with a position:relative; top:300px;. Then when the javascript is triggered, the content enters its parent div#three’s view.

A lot of developers are so quick to throw in the jQuery library when it’s not at all necessary. Don’t be afraid to use native Javascript and CSS, it can allow for a lot of really interesting affects