gpt4 book ai didi

javascript - 使用javascript在 View 中显示部分时发生动画

转载 作者:行者123 更新时间:2023-12-05 00:35:45 24 4
gpt4 key购买 nike

我还在学习网页设计,我想在页面中间的 div 上开始动画。我搜索了它,但在任何地方我都使用 j-query 找到了它。有什么方法可以使用纯 CSS 和 JavaScript 来完成。

<div>A lot of contents which take whole screen</div>
<div>Section where animation has to happen when come into view</div>
如果只能使用javascript完成,请提供帮助,如果不能,那么最简单的方法是什么。

最佳答案

我只是像你一样搜索并找到了一个纯粹的js回答
REFERENCE

var elements;
var windowHeight;
document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500)

function init() {
elements = document.querySelectorAll('.noanimfornow');
windowHeight = window.innerHeight;
}

function checkPosition() {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var positionFromTop = elements[i].getBoundingClientRect().top;
//console.log(positionFromTop,windowHeight);
if (positionFromTop - windowHeight <= 0) {
element.classList.add('animateme');
element.classList.remove('noanimfornow');
}
if (positionFromTop - windowHeight > 0) {/*newly added:Edit2*/
element.classList.add('noanimfornow');
element.classList.remove('animateme');
}
}
}

window.addEventListener('scroll', checkPosition);
window.addEventListener('resize', init);

init();
checkPosition();
@keyframes myanim {
from {
opacity: 0;
transform: scale(.7, .7)
}
to {
opacity: 1;
}
}

.animateme {
animation: myanim 5s;
}
.noanimfornow {
opacity: 0;
}
<div id="content"></div>

<div class="noanimfornow">Section where animation has to happen when come into view</div>

  • 首先对于只有在滚动时才需要动画的 div,将 class 设置为 noanimfornow ,
  • 下一个 js我们检查滚动的位置,并将类设置为animateme当它进入视野时,
  • 我们还会检查任何大小调整事件并开始 init如果需要,请在 js 中使用
  • 最后我们在 css 中放了一些动画。
  • 关于javascript - 使用javascript在 View 中显示部分时发生动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71303741/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com