I suppose this question means that I am missing a basic understanding of how to implement a .git library.
Below, I am trying to use CamWiegert’s amazing in-view.js to trigger changes in the three boxes – but to no luck.
All help would be appreciated.
<style>
body {
background-color: lightskyblue;
}
section {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: green;
height: 40vw;
width: 40vw;
}
.in-viewport .box {
background-color: red;
}
</style>
</head>
<body>
<section>
<div class="box">
</div>
</section>
<section>
<div class="box">
</div>
</section>
<section>
<div class="box">
</div>
</section>
<script src="https://unpkg.com/in-view@0.6.1/dist/in-view.min.js"></script>
<script>
console.log('hello world')
inView('.section')
.on('enter', section => {
section.classList.add('in-viewport')
})
.on('exit', section => {
section.classList.remove('in-viewport')
});
inView.threshold(0.2)
</script>
</body>