Simple parallax effect

README.md

A very simple parallax effect with jQuery

Standard example:

<div class="example-element" data-parallax></div>

Inverted example:

<div class="example-element" data-parallax="invert"></div>

Movement modifier example: Lower the number, the more the element moves (default: 20)

<div class="example-element" data-parallax data-modifier="10"></div>

parallax.js

( function( $ ) {
	'use strict';
	
	window.requestAnimationFrame( function animation() {
		$( '[data-parallax]' ).each( function() {
			const $this			= $( this );
			const invert		= $this.data( 'parallax' ) === 'invert';
			const breakpoint	= parseInt( $this.data( 'breakpoint' ) || 0 );
			const modifier		= parseInt( $this.data( 'modifier' ) ) || 20

			let _scroll = $( window ).scrollTop() + ( $( window ).height() / 2 );
			let _offset = $this.offset().top;


			if ( window_width > breakpoint ) {
				const parallax = ( _offset - _scroll ) / modifier;
				$this.css( 'transform', 'translateY(' + ( invert ? -parallax : parallax ) + 'px)' );
			} else {
				$this.css( 'transform', '' );
			}

		} );

		window.requestAnimationFrame( animation );
	} );
} )( jQuery || window.jQuery );