Parallax Image Block Effect

Install Steps

Parallax Image Block Effect

Submitted by SQSP Themes Works with all template families

parallaximage.gif

Step One

From your Squarespace account, go to Code Injection: Settings > Advanced > Code Injection

Step Two

Copy and paste the code below into the Header Code Injection box.

<!-- Parallax effect for Image Block with Overlap or Collage Design -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var textContainers = [].slice.call(document.querySelectorAll('.sqs-block-image .design-layout-overlap .sqs-dynamic-text-container, .sqs-block-image .design-layout-collage .sqs-dynamic-text-container'));
  textContainers.forEach(function(container) { container.classList.add('rellax-image-block'); });
  new Rellax('.rellax-image-block', { speed: 5, center: true });
});
</script>
<!-- end Parallax effect for Image Block with Overlap or Collage Design -->

Step Three

Change the “speed: 5” value to increase the parallax effect.

2 = slow
5 = fast
10 = fastest.

Keep in mind that this only works with any overlap and collage image blocks.

Be sure to also disable Ajax Loading within Site Styles. Having this setting check marked will cause the plugin not to work.

Save and refresh the page. 👍

Moov Labs