Cheesetoast » parallax http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Simple Lightweight Parallax Scrolling Background http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/ http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/#comments Thu, 20 Feb 2014 21:34:51 +0000 http://www.cheesetoast.co.uk/?p=1246 I recently incorporated the parallax scrolling effect into a page and I wanted to share the code for it. I've seen some pretty sophisticated jQuery plugins that offer some neat options but this is just a simple lightweight version. Continue reading

The post Simple Lightweight Parallax Scrolling Background appeared first on Cheesetoast.

]]>
I recently incorporated the parallax scrolling effect into a page and I wanted to share the code for it. I’ve seen some pretty sophisticated jQuery plugins that offer some neat options but this is just a┬ásimple lightweight version. Parallax scrolling is about making the background image move at a different rate than the foreground image to create the illusion of depth. This is achieved by using javascript to detect the user’s scroll position and dynamically change the background image position accordingly through CSS.


See the Pen Parallax Scrolling Snow by Graham Clark (Cheesetoast) on CodePen

Let’s start with some basic HTML:

<body id="parallax">
  <section>
    <!-- Content goes here -->
  </section>
</body>

CSS (can be applied to divs also):

html {
  background-image: url(background-image.jpg);
}

body {
  background-image: url(transparent-image.png);
  background-repeat: repeat-x; // Optional
}

Javascript:

<script>
var parallax = document.getElementById("parallax");
var speed = -1;

window.onscroll = function() {
  var yOffset = window.pageYOffset;
  parallax.style.backgroundPosition = "0px " + (yOffset / speed) + "px";
}
</script>

Hope you like it!

The post Simple Lightweight Parallax Scrolling Background appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/simple-lightweight-parallax-scrolling-background-effect/feed/ 0