How to create a simple parallax effect using vanilla JS @ IndiThemes

Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86

In this tutorial, we are going to create a simple parallax effect using vanilla JS. There are plenty of JS and jQuery plugins out there which can achieve the same parallax effect. But doing it without any plugin or third party script has its advantages. There is one less file to load. Which means the server is lighter one file, however, small it might be. Moreover, if there is jQuery involved, the library itself is quite bulky and may increase the loading time of the site. So, without further delay, let’s learn this amazing effect which haas become an integral part of modern web design.

Here is the JS code –


// Get all the elements to be parallaxed
const parallaxElements = document.querySelectorAll('.parallax')

// The parallax function
const parallax = elements => {
	if ('undefined' !== elements &amp;&amp; elements.length > 0) {
		elements.forEach( element => {
			let y = window.innerHeight - element.getBoundingClientRect().top
			if (y > 0) {
				element.style.transform = 'translate3d(0, -' + (0.15 * y) + 'px ,0)'
			}
		})
	}
}

//If element is in viewport, set its position
parallax(parallaxElements)

//Call the function on scroll
window.onscroll = () => {
	parallax(parallaxElements)
}

// Get all the elements to be parallaxed

const parallaxElements = document.querySelectorAll('.parallax')

// The parallax function

const parallax = elements => {

if ('undefined' !== elements && elements.length > 0) {

elements.forEach( element => {

let y = window.innerHeight - element.getBoundingClientRect().top

if (y > 0) {

element.style.transform = 'translate3d(0, -' + (0.15 * y) + 'px ,0)'

}

})

}

//If element is in viewport, set its position

parallax(parallaxElements)

//Call the function on scroll

window.onscroll = () => {

parallax(parallaxElements)

}

According to this code, each element on the page which has a class parallax will have the parallax effect.

Firstly, all the elements having the parallax class are selected in the form of an array. Then, we create a function parallaxElements in which the array of selected elements is iterated over using the forEach() loop. Before the loop, we do an obligatory check if there are any parallax elements on the page.

In the forEach() loop, we calculate the value of the position of the current element with respect to the page. window.innerHeight gives us the height of the viewport and element.getBoundingClientRect().top outputs the distance on the element from the top of the page. We subtract both of these to get the position of the element from the bottom of the page (Maths, I know ).When the element is below the viewport, this value will be negative. As soon as the element reaches the bottom of the viewport on scroll, this value, which we have assigned y , becomes 0. Since we want the parallax to work as soon as the element enters the viewport, we do the y > 0 check.

Finally, we use transform property to manipulate the scroll speed of the element. As you can see in the code, translate3d value is modified with the y variable we created earlier. The 0.15 multiplier is used to regulate the speed of the parallax. The lesser the value of the multiplier, the lesser the parallax. At 0 multiplier, there will be no parallax.

In the end, we bind this function to the window.onscroll event. This way, the function parallax functions runs every time we scroll the page. This way, we can create a simple parallax effect without needing any other library or plugin. Check out this pen.

See the Pen Parallax in Vanilla JS by Divjot Singh (@dabbu_440) on CodePen.