Question

我一直在尝试在jQuery中放一些东西作为ScrollMagic的替代品，它侦听滚动事件并根据滚动位置播放GSAP TimelineMax。

我找到了一个脚本，该脚本将滚动位置从window转换为百分比，然后使用该值设置TimelineMax进度的位置。基本上，隐藏的包装纸（#fake-height）的高度决定了动画的速度。我制作的包装越高，动画的持续时间就越长。然后，动画将在固定的div（#holder）中进行。

到目前为止，在我尝试过的所有台式机浏览器中，所有功能都按预期工作。但是，当在iOS Safari中尝试代码时，我遇到了断断续续的滚动。就像动画的帧率总体上低于应有的水平一样。我感觉这不是性能问题，因为动画是完美无缺的，如果我始终用手指不断地在屏幕上拖动iPhone的滚动条，而不用滑动（即拖动并释放手指）创造动力）。

代码：

window.scrollTo(0, 0);

$(function() {

  var $window = $(window);
  var documentHeight = $(document).height();
  var windowHeight = $window.height();
  var scrollTop = $window.scrollTop();

  var timeline = new TimelineMax({
      paused: true
    })
    .to("#scene1 .top-left", 1.5, {
      x: -25,
      y: -25,
      rotation: 0.001
    }, "scene1Intro")
    .to("#scene1 .bottom-right", 1.5, {
      x: 25,
      y: 25,
      rotation: 0.001
    }, "scene1Intro")
    .to(".image-fullscreen", 1, {
      scale: 0.6,
      rotation: 0.001
    }, "scene1Intro+=0.5")
    .staggerTo("#scene1 .slide", 1, {
      opacity: 1,
      scale: 2
    }, 1, "scene1Slides")
    .staggerTo("#scene1 .slide", 1, {
      opacity: 0,
      scale: 3
    }, 1, "scene1Slides+=1")

  TweenMax.set(".slide", {
    opacity: 0,
    scale: 1
  })

  TweenLite.defaultEase = Linear.easeNone;

  $window.on("resize", function() {
    windowHeight = $window.height();
  }).resize();

  $window.on("scroll", function() {
    scrollTop = $(window).scrollTop();
    var scrollPercent = (scrollTop) / (documentHeight - windowHeight);
    timeline.progress(scrollPercent).pause()
  });

});

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #faded7;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#holder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

#fake-height {
  position: relative;
  width: 100%;
  height: 180vh;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.frame-item {
  position: absolute;
}

.frame-inner {
  -webkit-transition: -webkit-transform .1s ease;
  transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
  transition: transform .1s ease, -webkit-transform .1s ease;
}

#scene1 .top-left {
  top: 0;
  left: 0;
  width: 25%;
  position: absolute;
  border: 1px solid red;
}

#scene1 .top-left .frame-inner {
  position: relative;
  width: 100%;
  height: 0;
  background-image: url("http://tobiasgerhardsson.com/code/assets/top-left.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 196.72489%
}

#scene1 .bottom-right {
  bottom: 0;
  right: 0;
  width: 25%;
  position: absolute;
  border: 1px solid red;
}

#scene1 .bottom-right .frame-inner {
  position: relative;
  width: 100%;
  height: 0;
  background-image: url("http://tobiasgerhardsson.com/code/assets/bottom-right.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 147.10145%
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.image-fullscreen {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.image-fullscreen img {
  width: 100%;
  height: auto;
}

<div class="image-fullscreen">
  <img src="https://lh3.googleusercontent.com/VrPzQ6Z3XK7oDcKn51AbKRAs_4U1wybryBOX62YhXXo3hVQLK9fujO_NtZ2hqUDs8e6KYicmew=w640-h400-e365" alt="">
</div>
<div id="holder">
  <section class="scene" id="scene1">
    <div class="frame">
      <div class="frame-item top-left">
        <div class="frame-inner"></div>
      </div>
      <div class="frame-item bottom-right">
        <div class="frame-inner"></div>
      </div>
    </div>
    <div class="slide">Test</div>
    <div class="slide">Test</div>
    <div class="slide">Test</div>
    <div class="slide">Test</div>
  </section>
</div>

<div id="fake-height"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

演示： http://www.tobiasgerhardsson.com/code/

关于可能是什么原因的任何想法？如果您在移动设备上进行尝试，请不要忘记到达末尾时页面跳转的奇怪行为。我待会儿会解决的。

在iOS Safari中使用GSAP停止滚动

0 个答案: