当我向下滚动到它们时,我真的希望某些东西能够在屏幕上显示动画,就像它们在这里所做的一样……
https://michalsnik.github.io/aos/
问题是我的网站实际上嵌套在一个名为“主要内容”的div中,侧边栏和顶部栏分别有div。
在this question and answer中似乎无法在嵌套滚动器中实现我想要的功能,但这是3年前的事,我只是想知道是否存在使用aos或wow.js的潜在解决方法或类似的东西。
我尝试过几次,但没有运气,但我觉得必须有一种方法来实现这一目标。
谢谢!
答案 0 :(得分:0)
IntersectionObserver使这种行为举止易于使用原始JavaScript来实现。这是fairly new API,但是有polyfill。
如果要跟踪自己的滚动容器而不是文档,可以将root
设置为其他内容。
// Find the item we want to animate on scroll
var target = document.querySelector('#target');
var targetActiveClass = 'target-is-active';
// Call this function when it enters/leaves the viewport
var callback = function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(targetActiveClass);
} else {
entry.target.classList.remove(targetActiveClass);
}
});
};
// Create our observer
var observer = new IntersectionObserver(callback, {threshold: 0});
observer.observe(target);
/* Our target, hidden by default */
#target {
align-items: center;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
height: 100px;
margin-bottom: 150vh;
margin-top: 150vh;
opacity: 0;
transform: translateX(-100%);
transition: opacity .25s ease-in-out,
transform .25s ease-in-out;
width: 200px;
}
/* Apply this class when #target enters/leaves the viewport */
#target.target-is-active {
opacity: 1;
transform: none;
}
<p>Scroll!</p>
<div id="target">Howdy!</div>