Simple JavaScript Parallax
Parallax Scrolling (having elements scroll differently than the rest of the page) is popular with current web design. But it can sometimes be difficult to get it to work right, especially when using pure CSS.
That’s why I developed this simple Parallax Scrolling plugin, which can be found in action on this CodePen
Here’s the code I developed:
Minified JavaScript:
/** Parallax Scrolling by maxpelic.com **/
(function(a,b){function c(a,d,e){let b=a[2].toLowerCase(),c=parseInt(a[1]);return c*d+b;}a=document.body.querySelectorAll('[parallax]'),b=-1,window.setInterval(function(){if(window.scrollY===b)return;for(let d=0;d<a.length;d++){let j=a[d].style.transform;a[d].style.transform='';let e=a[d].getBoundingClientRect(),h=e.height+window.innerHeight,f=window.innerHeight-e.top;if(f<0||f>h){a[d].style.transform=j;continue;}let i=f/h;a[d].movement||(a[d].movement={},a[d].hasAttribute('movex')&&(a[d].movement.x=a[d].getAttribute('movex').match(/(-?[0-9]*)(.*)/)),a[d].hasAttribute('movey')&&(a[d].movement.y=a[d].getAttribute('movey').match(/(-?[0-9]*)(.*)/)));let g=[];a[d].movement.x&&g.push('translateX('+c(a[d].movement.x,i,e)+')'),a[d].movement.y&&g.push('translateY('+c(a[d].movement.y,i,e)+')'),a[d].style.transform=g.join(' ');}b=window.scrollY;},60);})();
CSS:
[parallax]{transition:transform 60ms linear;}
You can copy-paste this code (complete with JavaScript and CSS):
<script>/*from maxpelic.com*/(function(a,b){function c(a,d,e){let b=a[2].toLowerCase(),c=parseInt(a[1]);return c*d+b;}a=document.body.querySelectorAll('[parallax]'),b=-1,window.setInterval(function(){if(window.scrollY===b)return;for(let d=0;d<a.length;d++){let j=a[d].style.transform;a[d].style.transform='';let e=a[d].getBoundingClientRect(),h=e.height+window.innerHeight,f=window.innerHeight-e.top;if(f<0||f>h){a[d].style.transform=j;continue;}let i=f/h;a[d].movement||(a[d].movement={},a[d].hasAttribute('movex')&&(a[d].movement.x=a[d].getAttribute('movex').match(/(-?[0-9]*)(.*)/)),a[d].hasAttribute('movey')&&(a[d].movement.y=a[d].getAttribute('movey').match(/(-?[0-9]*)(.*)/)));let g=[];a[d].movement.x&&g.push('translateX('+c(a[d].movement.x,i,e)+')'),a[d].movement.y&&g.push('translateY('+c(a[d].movement.y,i,e)+')'),a[d].style.transform=g.join(' ');}b=window.scrollY;},60);})();</script><style>[parallax]{transition:transform 60ms linear;}</style>
Documentation
This plugin is really easy to use. To add parallax scrolling to an element, add the parallax attribute, and either the movex or the movey attribute set to the distance you want it to move.
For example, this would make an element move a total of 100px vertically when it’s visible:
<div parallax movey="100px"></div>
In this example, the element would move 20vw to the left while it’s visible:
<div parallax movex="-20vw"></div>
Like I mentioned, you can view this in action in this CodePen and view a formatted version here.