Shopify环境下使用jQuery实现右侧图片滚动上移效果咨询

原因说明 #

现有视差逻辑仅对.image1类元素做了绑定，同时.image2的CSS定位规则存在父级高度塌陷问题，会导致视差计算的偏移量出错，无法触发预期效果。

修改步骤 #

1. 调整JavaScript选择器 #

将视差作用的元素选择器扩展到同时包含.image1和.image2，修改后的完整JS代码如下：

jQuery(document).ready(function($) {
  //parallax scroll
  $(window).on("load scroll", function() {
    var parallaxElement = $(".image1, .image2"),
      parallaxQuantity = parallaxElement.length;
    window.requestAnimationFrame(function() {
      for (var i = 0; i < parallaxQuantity; i++) {
        var currentElement = parallaxElement.eq(i),
          windowTop = $(window).scrollTop(),
          elementTop = currentElement.offset().top,
          elementHeight = currentElement.height(),
          viewPortHeight = window.innerHeight * 0.5 - elementHeight * 0.5,
          scrolled = windowTop - elementTop + viewPortHeight;
        currentElement.css({
          transform: "translate3d(0," + scrolled * -0.35 + "px, 0)"
        });
      }
    });
  });
});

2. 修正CSS布局问题 #

给图片父级容器添加定位规则，避免绝对定位的子元素导致父级高度塌陷，修改后的完整CSS代码如下：

.title{
  text-align:center;
}
.dummytext{
  max-width:50%;
  text-align:center;
  margin:0 auto;
}
.image1, .image2 {
  position: relative;
  height: 500px;
  overflow: hidden;
}
.image1 img{
  margin-top: -175px;
  height:500px;
  object-fit: contain;
}
.image2 img{
  height: 500px;
  position: absolute;
  right: 20px;
  top: 0;
}

注：删除了原.image1 img规则中错误的max-height: 10%属性，该属性会导致图片高度被异常压缩。

3. 可选调整：差异化视差速度 #

如果需要两个图片的滚动速度不同，可以按类名区分滚动系数，将JS中设置transform的部分修改为：

var speed = currentElement.hasClass('image2') ? -0.5 : -0.35;
currentElement.css({
  transform: "translate3d(0," + scrolled * speed + "px, 0)"
});

系数绝对值越大，视差滚动的速度越快。

内容的提问来源于stack exchange，提问作者Alex McIver