Question

我需要有关translate-animate属性的帮助。当我向下滚动页面时，我想要向上翻译图像。现在我知道我可以使用属性translateY（px）来移动它，但后来我不知道如何在滚动时翻译。我想让我的网页看起来像这样

https://www.apple.com/uk/iphone/

正如您所看到的，当您向下滚动时，图像会以平滑的方式向上平移。我需要一个代码，以便我可以在向下滚动时平滑地向上翻译图像。

P.s-这是我的第一个问题，对不起，如果我不清楚的话。

Answer 1

这是我自己创造的相当便宜的视差效果，但不需要任何特殊的魔法...... Link to my original demo page

let $scrollPrev = 0;
const $viewBottom = () => $(window).scrollTop() + $(window).innerHeight(),
  $parallaxIllusion = () => {
    const $pxTop = $(".parallaxTop"),
      $pxMid = $(".parallaxMiddle"),
      $pxBottom = $(".parallaxBottom"),
      $scrollCurr = $viewBottom(),
      $bodyTop = $("body").offset().top,
      $bodyBottom = $bodyTop + $("body").outerHeight(true),
      $pxspeed = $scrollCurr - $bodyTop;
    if ($bodyTop > 0 && $viewBottom() > $bodyTop && $(window).scrollTop() <= $bodyBottom) {
      $pxTop.css({
        "top": 40 + -$pxspeed / 4
      });
      $pxMid.css({
        "top": $pxspeed / 2
      });
      $pxBottom.css({
        "top": ($pxspeed / 4)
      });
      $scrollPrev = $scrollCurr;
    };
  };

$(document).ready(() => {

  $(window).scroll(() => {
    $parallaxIllusion();
  });
});

body{
height:700px;
}
.parallaxTop {
  background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxHand.png') center center / cover no-repeat;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  width: 403px;
  height: 298px;
  z-index: 2;
}

.parallaxMiddle {
  background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxCaps.png') center center / cover no-repeat;
  position: absolute;
  right: 50%;
  -ms-transform: translate(50%, 0);
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  width: 109px;
  height: 117px;
  z-index: 4;
}

.parallaxBottom {
  background: url('https://raw.githubusercontent.com/NightKn8/pure/master/img/demo1/pxBeer.png') center center / cover no-repeat;
  position: absolute;
  right: 50%;
  -ms-transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  width: 406px;
  height: 443px;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="parallaxTop"></div>
  <div class="parallaxMiddle"></div>
  <div class="parallaxBottom"></div>
</body>

请注意，您可以将代码编辑为峰值1图像。速度或方向控制在if级别。

在jquery中滚动翻译

1 个答案: