fullscreen-parallax

More and more websites are using parallax styled background to make their websites look awesome. fullscreen-parallax does all the hard work for you and allows you to super easily create webpages that employ a parallax effect.

Click the arrow in the bottom right to scroll down smoothly and learn more!   Quick download link

How do I use fullscreen-parallax?

It's super simple. To use the parallax effect with minimum settings, just use the following code:

<section data-background-speed="0.5" class="parallax">
	Any text, or internal divs and whatnot go here!
</section>

followed by hooking the script into jQuery's document.ready function:

$(fullscreenParallax);

Note, using a div, or other block will work fine. It doesn't have to be section specifically.

Main options

data- Description Reasonable values Default
background-speed-y The rate of scrolling vertically. A value of 1 means "scroll with page" like a normal image would, 0 is "don't scroll relatively". -1 to 1 1
background-speed-x The rate of scrolling horizontally. A value of 0 means "don't scroll", negative values move to the right, positive to the left. -1 to 1 0
parallax-align Whether the image should stick to the top or bottom of the parallax section. "top" | "bottom" "top"
parallax-stick-y Should the vertical parallax effect stop once it has reached its position? (Hard to explain, see example below) "before" | "after" ""
parallax-stick-x Should the horizontal parallax effect stop once it has reached its position? (Hard to explain, see example below) "before" | "after" ""
parallax-height What percent size of the screen to fill up. 0 - 100 100
parallax-offset-y-percent How much to offset the image by vertically. -100 to 100 0
parallax-offset-x-percent How much to offset the image by horizontally. -100 to 100 0

Stickyness

This section is an example of

data-parallax-stick-x="before"
in action.


The code for this section is:

<section data-background-speed-y="0.3" data-background-speed-x="0.5" data-parallax-stick-x="before" data-parallax-align="bottom" class="parallax" style="background-image: url(img/mountain.jpg); background-repeat: repeat-y;">

background-speed-y="0"

This and the next section demonstrate "static" backgrounds.


The code for this section is:

<section data-background-speed-y="0" data-parallax-align="bottom" class="parallax" style="background-image: url(img/museum.jpg);">

Download!









Enjoy using fullscreen-parallax, and if you have any questions, issues, or want to show off a place you've used it, feel free to shoot me an email at topher@winwardo.co.uk!



All images found on flickr under a Creative Commons license. Original images can be found here, here, here, here, here, and finally here! Many thanks to all the original photographers.