Parallax effect without using Parallax
Hello all,
At the moment I am working at a responsive optimized project, the client suggested a parallax effect background, still I saw really few good parallax responsive sites out there in spite of the number of parallax frameworks under developement and I need my site to be as quick as possible. I checked for my first time the code of this famous plugin and I discovered that the main layer-delayed background effect is a piece of cake.
Making it with custom and lite is no big deal, I’ll now explain what many already know but adding my code to realize a simple and quick parallax basic-feature clone!
First we’ll understand how the effect works, look at this image:
HTML
<div id="container">
<!-- insert your stuff here -->
</div>
This is the typical webpage ( awesome photoshop skills here) and we want to scroll down and have a super-cool-background-effect. Next image:
HTML
<div id="background"></div>
<div id="container">
<!-- insert your stuff here -->
</div>
CSS
#container{
position: relative;
z-index: 2;
}
#background{
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
We put a background image as the background of a div. Something like this, but instead of making it the background of the body or positioning it as absolute we’ll make it fixed.
While scrolling down we expect that the background will remain stable while the content will comes up.
Right, now we’ll had the final code in order to achieve this:
JAVASCRIPT
<script>
$(function(){
$(window).scroll(function(){
/* our layer */
var scroll_top = -1*parseInt($(document).scrollTop())/10;
$('#background').css('top',scroll_top );
/* another layer */
var scroll_top_2 = -1*parseInt($(document).scrollTop())/5;
$('#background2').css('top',scroll_top_2);
/* horizontal scroll */
var scroll_left = -1*parseInt($(document).scrollLeft())/3;
$('#background').css('left',scroll_left );
})
)}
</script>
With this simple js trigger, when a user scroll down of 100px, the background will slide top of 10px, making a simple and smooth movement. The trick is all in the equation which changes the top direction (-1) and reducing the pixel scrolled (/10).
If you want to add more layers it’s easy, you could use your fantasy to create random functions and anything you come up.
FINAL NOTES
I’ve made a quick look on other effects, like CSS zoom, which is widely supported by all browsers, but unfortunately it seems that zoom is an heavy feature which drains a lot of memory resulting in a noticeable screen swap so i’ll suggest you to avoid it unless necessary.
That’s all guys. I don’t want to conclude that this script could fully replace the features of parallax but still gives you the grasp of it without having to use external resources. 🙂
No comments yet.