我已经基于其中一个教程完成了一个非常裸露的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等事件，但是很好。
Tks！
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>最佳答案
触发钩子
有3种类型的触发器挂钩定义了动画的起点，触发器挂钩的位置与视口有关。onEnter => 1（在屏幕顶部）onCenter => 0.5（屏幕中心）onLeave => 0（屏幕底部）
默认情况下，触发器挂钩为“ onCenter”
触发元素-
这定义了动画应从其开始的div ID或类。一旦此触发器元素命中触发器，钩子便开始动画。