An animation effect appears when the element is visible by scrolling.
I wanted the animation to start every time I scroll down and to keep the animation finished when I scroll up. I've been thinking about it, but... I don't know how. Please help.
This is the implementation page.
window.onload = function () {
const targets = document.querySelectorAll('[data-observer]')
const images = document.querySelectorAll('[data-img]')
const options = {
rootMargin: '0px',
threshold: 1.0
}
const addClass = (el) => {
if (!el.classList.contains('is-visible')) {
el.classList.add('is-visible')
}
}
const removeClass = (el) => {
if (el.classList.contains('is-visible')) {
el.classList.remove('is-visible')
}
}
const doThings = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
addClass(entry.target)
} else {
removeClass(entry.target)
}
})
}
const observer = new IntersectionObserver(doThings, options)
const observer2 = new IntersectionObserver(doThings, {
... options,
threshold: 0.4
})
targets.forEach(target => {
observer.observe(target)
})
images.forEach(target => {
observer2.observe(target)
})
}
Yes you can, Here we take an example for that.
You have to animate a text while scrolling. then do this
window.onscroll = function () { myFunction() };
var header = document.getElementById("header");
function myFunction() {
if (window.pageYOffset >= 50) {
header.classList.add("animate");
} else {
header.classList.remove("animate");
}
}body{
height:1500px;
width:100vw;
}
.text{
color:RED;
background:black;
font-size:30px;
font-weight:bold;
letter-spacing:1px;
position:fixed;
top:0%;
}
.text.animate{
animation:example 2s ease-in-out infinite;
}
@keyframes example{
0%{
letter-spacing:1px;
}
50%{
letter-spacing:5px;
}
100%{
letter-spacing:1px;
}
}<body>
<div class="text" id="header">TEXT ANIMATION</div>
</body>