ParallaxImages.gif

Parallax Images

Add a dynamic parallax scroll effect to any image block on your site with our Parallax Images plugin. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or in the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

If you would like to change the speed at which the image(s) move when a user scrolls up or down, you can change the 'var parallaxSpeed' value below to any number between 1.0 & 5.0 (inclusive of one decimal place).

Note: You may need to add some spacer blocks above and below your images depending on the size of the image, their placement and the speed of the parallax movement. This will ensure that no images overlap other content.

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>.sqs-block-image .design-layout-inline .image-block-wrapper img{-ms-transform: scale(.7); -webkit-transform: scale(.7);transform: scale(.8);} .sqs-block-image .design-layout-inline .image-block-wrapper{overflow: initial !important}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

    var parallaxSpeed = 1.0; 
    // 1.0 = Normal; 
    // 3.0 = Fast; 
    // 5.0 = Very Fast;

    var $img = $('.sqs-block-image img');
    $img.on('load', function(){
      $('.sqs-block-image img').each(function(){
        var $element = $(this);
        var $win = $(window);
        function percentageSeen () {
          var viewportHeight = $(window).height(),
              scrollTop = $win.scrollTop(),
              elementOffsetTop = $element.offset().top,
              elementHeight = $element.height();
          if (elementOffsetTop > (scrollTop + viewportHeight)) {
            return 0;
          } else if ((elementOffsetTop + elementHeight) < scrollTop) {
            return 100;
          } else {
            var distance = (scrollTop + viewportHeight) - elementOffsetTop;
            var percentage = distance / ((viewportHeight + elementHeight) / 100);
            percentage = Math.round(percentage);
            return percentage;
          }
        }
        var margin = ($element.height() / 2) * (percentageSeen() / 100);
        margin = (($element.height() / 4) - margin) * parallaxSpeed
        $(this).find('img').css('margin-top', margin)
      });
    });
    $(window).on('scroll', function () {
      $('.sqs-block-image').each(function(){
        var $element = $(this);
        var $win = $(window);
        function percentageSeen () {
          var viewportHeight = $(window).height(),
              scrollTop = $win.scrollTop(),
              elementOffsetTop = $element.offset().top,
              elementHeight = $element.height();
          if (elementOffsetTop > (scrollTop + viewportHeight)) {
            return 0;
          } else if ((elementOffsetTop + elementHeight) < scrollTop) {
            return 100;
          } else {
            var distance = (scrollTop + viewportHeight) - elementOffsetTop;
            var percentage = distance / ((viewportHeight + elementHeight) / 100);
            percentage = Math.round(percentage);
            return percentage;
          }
        }
        var margin = ($element.height() / 2) * (percentageSeen() / 100);
        margin = (($element.height() / 4) - margin) * parallaxSpeed
        $(this).find('img').css('margin-top', margin)
      })
    });
  });
</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

⚡️Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.