Parallax Slider with jQuery

Codrops started new year with a vibrant image slider tutorial: Parallax Slider with jQuery. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

Parallax Slider with jQuery

The main idea of this slider is to slide the images (obviously) and to animate the three backgrounds differently to create some perspective. So, when we, for example, slide to the next image, we will animate the left value of the slider ul to minus the window width (because that’s the width of one li). We will also animate the background div that is visually the top-most background, but the animation will only be half of the window width. The background behind that one will move one quarter of the window width and so on. So the background which is “more far” will move less, just what the parallax principle describes.

Demo Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *