0

我根据其中一个教程做了一个非常简单的 ScrollMagic 网站：http ://www.oneniceday.com/Parallax-1/P2.html

如果您查看源代码，那么在最后，有这一行：

triggerElement: "#pinned-trigger1",
duration: 2000,
triggerHook:"onLeave"

我不了解“triggerHook:onLeave”这一行。

这个 onLeave 事件是什么时候触发的？

过去 2 天我一直在 ScrollMagic 文档和参考站点露营，试图弄清楚 triggerElement 和 Hook 是如何工作的，以及 onLeave、onEnter、onCenter 等事件何时被调用，但很好......

谢！

var controller = new ScrollMagic.Controller();

//create a new Scene
var scene = new ScrollMagic.Scene({
  triggerElement: "#pinned-trigger1",
  duration: 2000, //pin the #pinned-trigger1 element for 2000px
  //of scrolling
  triggerHook: "onLeave", //trigger the setpin method only when
  //top of #pinned-trigger section has hit the top of browser
  //window
  reverse: true
}).setPin("#pinned-element1").addTo(controller);
<style type="text/css"> html,
body {
  margin: 0;
  height: 100%
}
h1,
p {
  margin: 0;
  padding: 0;
}
header {
  position: fixed;
  top: 10px;
  left: 10px;
}
section {
  text-align: center;
  color: #EFEFEF;
}
.full-screen {
  height: 100%;
  /* makes panels the entire window height */
}
.blue {
  display: flex;
  justify-content: center;
  align-items: center;
}
.blue {
  background-color: #3883d8;
}
.red {
  background-color: #cf3535;
}
.orange {
  background-color: #ea6300;
}
</style>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet">
  <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">-->

</head>

<body>
  <main class="full-screen" role="main">
    <section class="full-screen blue">
      <div>
        <h1>Basic Pin</h1>
        <p>Elements are pinned for their respective pixel value set as the duration and released again.</p>
      </div>
    </section>

    <section id="pinned-trigger1" class="full-screen orange">
      <div id="pinned-element1">
        <p>This element will be pinned once it's trigger hits the top of the viewport and will have a duration of window height minus 100</p>
      </div>
    </section>

    <section id="pinned-trigger2" class="full-screen red">
      <div id="pinned-element2">
        <p>This element will be pinned for a duration of 150px</p>
      </div>
    </section>

    <section class="full-screen blue">
      <div>
        <p>Section Four!</p>
      </div>
    </section>
  </main>

</body>

</html>

4

1 回答 1

3

trigger Hook - 有 3 种类型的 trigger Hooks 定义了动画的起点，trigger Hook 的位置与视口相关。

onEnter=> 1（屏幕顶部）

onCenter=> 0.5（屏幕中心）

onLeave=> 0（屏幕底部）默认触发Hook是“onCenter”

触发元素 -

这定义了动画应该从哪个 div ID 或类开始。一旦此触发器元素击中触发器 Hook，您的动画就会开始。

于 2015-10-22T10:44:15.703 回答