Question

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

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

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

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

这个onLeave事件何时触发？

过去两天我一直在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>

Answer 1

触发挂钩 - 有3种类型的触发钩子定义动画的起点，触发器钩子的位置与视口相关。

onEnter =＆gt; 1（屏幕顶部）

onCenter =＆gt; 0.5（屏幕中心）

onLeave =＆gt; 0（屏幕下方）默认情况下，触发器Hook是＆＃34; onCenter＆＃34;

触发元素

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

关于ScrollMagic的onLeave事件

1 个答案: