<div class="spacing"></div>
<div class="container">
<label>scroll direction</label>
<code id="scrollDirection">PAUSED</code>
<br>
<label>state</label>
<code id="state">outside</code>
<br>
<label>last hit</label>
<code id="lastHit">nothing</code>
<br>
</div>
<div class="spacing"></div>
.container{
color: black;
font-size: 16px;
background-color: #3BB9FF;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: auto 0px;
text-align:center;
height:160px;
padding-top: 70px;
}
label{
margin-right: 5px
}
code{
color: #0041C2
}
.spacing{
height: 350px
}
const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
triggerElement: '.container',
triggerHook: 0,
duration:230
})
.on('start end', (e) => {
$("#lastHit").text(e.type == "start" ? "top" : "bottom");
})
.on("update", function (e) { $("#scrollDirection").text(e.target.controller().info("scrollDirection"));
})
.on("enter leave", function (e) {
$("#state").text(e.type == "enter" ? "inside" : "outside");
})
.addIndicators()
.addTo(controller)
External CSS
This Pen doesn't use any external CSS resources.