Implementing scroll effects with jQuery in Shopify theme

Other Questions Shopify
1

I’m working on a Shopify page where I need to create scrolling animations for two images. Right now I have one image that moves correctly when the user scrolls, but the second image stays in place. I’m testing everything with hardcoded values first before converting to proper Liquid syntax.

jQuery(document).ready(function($) {
  $(window).on("load scroll", function() {
    var scrollElement = $(".photo1"),
      elementCount = scrollElement.length;
    window.requestAnimationFrame(function() {
      for (var j = 0; j < elementCount; j++) {
        var activeElement = scrollElement.eq(j),
          windowPosition = $(window).scrollTop(),
          elementPosition = activeElement.offset().top,
          elementSize = activeElement.height(),
          viewportCenter = window.innerHeight * 0.5 - elementSize * 0.5,
          scrollDistance = windowPosition - elementPosition + viewportCenter;
        activeElement.css({
          transform: "translate3d(0," + scrollDistance * -0.35 + "px, 0)"
        });
      }
    });
  });
});

.heading {
  text-align: center;
}

.content {
  max-width: 50%;
  text-align: center;
  margin: 0 auto;
}

.photo1 img {
  margin-top: -175px;
  height: 500px;
  max-height: 10%;
  object-fit: contain;
  overflow: hidden;
}

.photo2 img {
  height: 500px;
  position: absolute;
  right: 20px;
}

<div class="wrapper">
  <div class="heading">
    <h1>Main Heading</h1>
  </div>
  <div class="content">
    <p>Sample text content goes here for demonstration purposes.</p>
  </div>
  
  <div class="photo1">
    <img src="image1.jpg"/>
  </div>
  <div class="photo2">
    <img src="image2.jpg"/>
  </div>
</div>

How can I modify this code to make the second image also respond to scroll events and move upward when scrolling?

2

Your script only targets .photo1, so the second image won’t move. Easy fix - add a common class like scroll-image to both photo containers, then change your jQuery selector to var scrollElement = $(".scroll-image"),. Way cleaner than hardcoding multiple classes, and it’ll scale better if you add more images.

One heads up: .photo2 has position: absolute which might mess with the transform positioning. You’ll probably need different scroll multiplier values for each image instead of using -0.35 for both. I’d test different multipliers until the parallax movement looks right.

3

Your selector only targets .photo1, which completely ignores .photo2. However, there’s more to fix than just the selector - .photo2 uses absolute positioning, disrupting the calculations. Instead of forcing both images through the same loop, consider creating separate scroll handlers for each one. Absolute positioning alters how offset().top works, so the same transform values won’t yield consistent results. It’s useful to split your logic into separate functions allowing you to tweak the scroll multiplier for each image individually. Absolutely positioned elements often require different calculations for elementPosition, sometimes factoring in the parent container’s position as well. Experiment with different multiplier values like -0.2 or -0.5 for the second image to achieve the desired effect.

4

your jQuery only targets .photo1 but you need both images. change var scrollElement = $(".photo1"), to var scrollElement = $(".photo1, .photo2"), and it’ll work for both. just make sure photo2’s positioned right since it’s absolutely positioned.