Parallax effect for Image Block with Overlap or Collage Design

See the effect in action here:

Image Block Effects.png

Image Block Effects

Demo

To implement, add the code below to your page code injection footer.

<!-- 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 -->