Variable Speed Parallax Effects in Squarespace: Rellax.js
Parallax web design effects have been growing in popularity for years. It’s a beautiful way to add visual interest to your website when done correctly.
I like to be conservative with the use of parallax because it’s easy to overdo it to the point that it starts to make people motion sick. However, It’s impossible to ignore the feeling of depth and interactivity it brings.
What is Parallax?
The first uses of parallax can be seen in classic 2D, side-scrolling video games where the background moved slower than the foreground and your character to give the illusion of depth before 3D graphics were available.
By now, you’ve undoubtedly seen a plethora of websites using this same effect to make it seem as if large banner images are way in the background while sections move in front of them. Some do it right; some way overdo it.
The more items you have moving at different speeds, the greater the depth effect you can achieve.
Parallax in Squarespace
The Brine family of Squarespace templates allow you to toggle parallax on an off for banner images. It looks good, but there is really no way to customize the parallax speed, and it only works for banner images.
In this article, I’m going to show you how you can add a parallax effect to other objects with a handy little Javascript library called Rellax.js.
Here’s How It’s Done
First, paste the code into your site-wide code injection panel. Navigate to Settings > Advanced > Code Injection and paste the following code into the ‘Footer’ section of the code injection area:
<script> (function(n,h){"function"===typeof define&&define.amd?define([],h):"object"===typeof module&&module.exports?module.exports=h():n.Rellax=h()})("undefined"!==typeof window?window:global,function(){var n=function(h,p){var a=Object.create(n.prototype),l=0,r=0,k=0,t=0,c=[],u=!0,B=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){return setTimeout(a,1E3/60)},q=null,C=window.cancelAnimationFrame|| window.mozCancelAnimationFrame||clearTimeout,D=window.transformProp||function(){var a=document.createElement("div");if(null===a.style.transform){var b=["Webkit","Moz","ms"],e;for(e in b)if(void 0!==a.style[b[e]+"Transform"])return b[e]+"Transform"}return"transform"}();a.options={speed:-2,center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,callback:function(){}};p&&Object.keys(p).forEach(function(d){a.options[d]=p[d]});h||(h=".rellax");var m="string"===typeof h?document.querySelectorAll(h): [h];if(0<m.length)a.elems=m;else throw Error("The elements you're trying to select don't exist.");if(a.options.wrapper&&!a.options.wrapper.nodeType)if(m=document.querySelector(a.options.wrapper))a.options.wrapper=m;else throw Error("The wrapper you're trying to use don't exist.");var w=function(){for(var d=0;d<c.length;d++)a.elems[d].style.cssText=c[d].style;c=[];r=window.innerHeight;t=window.innerWidth;x();for(d=0;d<a.elems.length;d++){var b=a.elems[d],e=b.getAttribute("data-rellax-percentage"), g=b.getAttribute("data-rellax-speed"),h=b.getAttribute("data-rellax-zindex")||0,l=b.getAttribute("data-rellax-min"),n=b.getAttribute("data-rellax-max"),v=a.options.wrapper?a.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;a.options.relativeToWrapper&&(v=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-a.options.wrapper.offsetTop);var f=a.options.vertical?e||a.options.center?v:0:0,k=a.options.horizontal?e||a.options.center? window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0:0;v=f+b.getBoundingClientRect().top;var m=b.clientHeight||b.offsetHeight||b.scrollHeight,p=k+b.getBoundingClientRect().left,q=b.clientWidth||b.offsetWidth||b.scrollWidth;f=e?e:(f-v+r)/(m+r);e=e?e:(k-p+t)/(q+t);a.options.center&&(f=e=.5);g=g?g:a.options.speed;e=y(e,f,g);b=b.style.cssText;f="";0<=b.indexOf("transform")&&(f=b.indexOf("transform"),f=b.slice(f),f=(k=f.indexOf(";"))?" "+f.slice(11,k).replace(/\s/g,""):" "+ f.slice(11).replace(/\s/g,""));c.push({baseX:e.x,baseY:e.y,top:v,left:p,height:m,width:q,speed:g,style:b,transform:f,zindex:h,min:l,max:n})}u&&(window.addEventListener("resize",w),u=!1);z()},x=function(){var d=l,b=k;l=a.options.wrapper?a.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;k=a.options.wrapper?a.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset; a.options.relativeToWrapper&&(l=((document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset)-a.options.wrapper.offsetTop);return d!=l&&a.options.vertical||b!=k&&a.options.horizontal?!0:!1},y=function(d,b,e){var c={};d=100*e*(1-d);b=100*e*(1-b);c.x=a.options.round?Math.round(d):Math.round(100*d)/100;c.y=a.options.round?Math.round(b):Math.round(100*b)/100;return c},A=function(){x()&&!1===u&&z();q=B(A)},z=function(){for(var d,b=0;b<a.elems.length;b++){d=y((k-c[b].left+ t)/(c[b].width+t),(l-c[b].top+r)/(c[b].height+r),c[b].speed);var e=d.y-c[b].baseY,g=d.x-c[b].baseX;null!==c[b].min&&(a.options.vertical&&!a.options.horizontal&&(e=e<=c[b].min?c[b].min:e),a.options.horizontal&&!a.options.vertical&&(g=g<=c[b].min?c[b].min:g));null!==c[b].max&&(a.options.vertical&&!a.options.horizontal&&(e=e>=c[b].max?c[b].max:e),a.options.horizontal&&!a.options.vertical&&(g=g>=c[b].max?c[b].max:g));a.elems[b].style[D]="translate3d("+(a.options.horizontal?g:"0")+"px,"+(a.options.vertical? e:"0")+"px,"+c[b].zindex+"px) "+c[b].transform}a.options.callback(d)};a.destroy=function(){for(var d=0;d<a.elems.length;d++)a.elems[d].style.cssText=c[d].style;u||(window.removeEventListener("resize",w),u=!0);C(q);q=null};w();A();a.refresh=w;return a};return n}); var rellax = new Rellax('.rellax'); </script>
Once you’ve inserted this code into your site, you can implement variable speed parallax items anywhere you want, throughout your site.
Inserting a Parallax Object: Shapes
To insert an object with the parallax effect, you must use a code block. Anything you can put in the code block can have rellax added to it. For example, all the moving objects in the background of this page are just simple CSS shapes. Once the shape was created, I simply wrapped it in a rellax div like so:
<div class="rellax" data-rellax-speed="2"> <div class="circlesmall"></div> </div> <style> .circlesmall { height: 100px; width: 100px; background-color: rgba(48,48,48,0.3); border-radius: 50%; }
If you copy and paste this code, you’ll get a grey circle with a slow-moving parallax effect. Keep reading to learn how to adjust the speed and direction of the object.
In the above example, I first created a div called ‘circlesmall’ by writing <div class="circlesmall"></div>. A <div> tag defines a division or a section in HTML. Learn more about <div> here.
Next, I applied a style to the the div. Use CSS to style a div.
To target the div called circlesmall, I wrote ‘.circlesmall’, and put all the style properties between opening and closing curly brackets ‘{ }’.
Check out this article to see all the shapes you can make with pure CSS.
This div styled with the code above makes a circle. All we have to do to add the parallax effect is wrap it in the rellx div like this:
<div class="rellax" data-rellax-speed="2"> <div class="circlesmall"></div> </div>
Parallax Images
It’s easy to add images using the same method as described above.
To insert an image with this effect, use this code:
<div class="rellax" data-rellax-speed="2">
<img src="IMAGE ADDRESS HERE">
</div>Just add the address of your image between the quotation marks.
If you have an image on your computer and you want to upload it and get a URL, you can just highlight any piece of text a make a link, like you would if you were creating a link to another page.
Select the ‘Files’ tab at the top right of the link window, and upload the image you want to use.
When the text becomes a link, right-click on it and copy the link address.
Paste the address into the image source.
Adjust the Speed
The ‘data-rellax-speed’ property within the div is the only thing you need to change to adjust the speed of each item.
<div class="rellax" data-rellax-speed="2">
</div>Speed 2 is slow, smooth, and moves in an upward direction.
Speed -7 is extra slow and moves down with the page.
Choose any speed from 10 to -10.
have fun with it!
Check out the Rellax.js demo site here, and enjoy.