Easy Parallax Scrolling Plugin in Pure Javascript

Category: Parallax Scrolling | July 14, 2018
Easy Parallax Scrolling plugin
Author: marrio-h
Official Page: Go to Website
Last Update: August 31, 2019
License: MIT

This is Javascript plugin Cross-browser support to create easy parallax scrolling website. It works well on mobile platforms. It allows to easily set up on any type of website.

This plugin allows making the different section of parallax images or content. Whether you want to add a parallax scrolling effect in content area or header, you can do it easily.

Furthermore, it’s responsive and works well the small devices. The implementation is quite easy and simple. You only need to call the plugins files then apply data-parallax-image data attribute to the element.

You don’t need to include jQuery to build nice and awesome looking effect. It is a pure Javascript plugin which needs some CSS style to get your job done.

It also adaptive height and support transparent backgrounds without affecting content.

How to Use Parallax Scrolling Plugin

Download the plugin and import the files into HTML page inside the head.

<link href="css/universal-parallax.min.css" rel="stylesheet">
<script src="js/universal-parallax.min.js"></script>

The CSS isn’t quite too long so you can add it into your exciting file. Let’s have a look at the styles.

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

	/* optional - can be put in separate class */
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

Add the CSS class “parallax” to the main div and specify the parallax image using the data attribute “data-parallax-image”

<section>
	<div class="parallax" data-parallax-image="path/to/your_image">
</section>

If you don’t want to use the data attribute then you can also define the image inside the stylesheet by defining background-image

Initialize the JS function

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

That’s it. The cool-looking parallax effect is ready to use. You can implement on your website to make it outstanding.

You May Also Like

Leave a Comment