Parallax With jQuery - Quick and Simple

by: Preston Schmidt

A Simple jQuery Parallax

Below is a JS Fiddle with some jQuery parallax code.

Looking closer at the script:

$('.vertical').css('top','+' + ((scrolledY*1.3)) + 'px');
$('.horizontal1').css('left','+' + ((scrolledY*0.2)) + '%');
$('.opacity').css('opacity','0' + (scrolledY*0.001));

You declare your class. Add your .css. And pass some parameters.

If you'll notice, you can use top, left, right, and bottom for position parameters. It's all referenced against $(window).scrollTop() and a multiplier. Values can be in pixels or percentages. And you can see that you can even do opacity. Pretty much anything you can do with css. Notice also that the script references your css... Play around and get a feel for the values and application. In your css you can play around with the positioning, margins, sizes, whatever you need to get your desired effect. Then calculate the scroll speed in the script.

Outlier

Video, Web, and Design Agency