Parallax Image Block Effect

Look Demo

Add a parallax effect to either an overlap or collage card image block. This plugin uses code injection and works with all template families.

How To Install

From your Squarespace account, go to Site Code Injection. 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: 2, center: true });
});
</script>
<!-- end Parallax effect for Image Block with Overlap or Collage Design -->

Customize

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

License

This plugin comes with an Unlimited Use License. View License Terms