MADE WITH BY SUPADEZIGN

Feel free to donate if you like my tutorials ;)

Very simple parallax background effect

There are many libraries to add parallax effects, some of them have many features, and other are quite "big".
This one is simple, easy to add and very light as the file is only 1.85 KB.

Of course if you want more options, you can use any other parallax libraries but if you only want a simple background effect, this one works like a charm.

WHAT A NICE PARALLAX EFFECT

done with Universal Parallax

Step 1

Download the package : https://github.com/marrio-h/universal-parallax
Then upload and enqueue the file universal-parallax.min.js :

wp_enqueue_script( 'universal-parallax-js', plugin_dir_url( __FILE__ ) . 'assets/js/universal-parallax.min.js', '','', true );

[ see HOWTO to learn how to add custom files ]

Step 2

Add these CSS in a Code Block :

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}

.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	width: 100%;

	/* BG behaviour */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

Step 3

And for the Javascript :

new universalParallax().init({
	speed: 6
});

 

Step 4

Now that everything is ready, we can add our background image.

Add a new Section, change the height, add some elements inside (Headings, images...), just like a normal section.

Add a Div inside this section and add the class "parallax" to it :

Finally add a background image to the Div (no need to change any other settings) :

The structure looks like this :

That's it.

If it looks messy in the backend, just save and reload the page.

For more info, don't forget to check the official page : https://github.com/marrio-h/universal-parallax