当元素在视图中时如何触发动画? [英] How to trigger animation when element is in view?
问题描述
所以当元素本身在网站上显示时，我想触发 skill-bars 的动画.例如，当用户向下滚动元素所在的部分时，应进行动画处理.
so I want to trigger the animation of the skill-bars when the element itself is in view on the website. For example, when the user scrolls down the section where the element is, then the animation should take place.
我有了主意，一切都正常了，但是我遇到了一个我似乎无法弄清楚的问题，我实际上是在Codepen的帮助下做的，是我添加了一个 js 文件，当元素在视图中时会触发动画，并在我的 CSS 文件中包含 animate ，以便在元素在视图中时添加该类.但是，问题在于，由于不仅有一个动画， CSS 文件还包含几乎所有的 CSS 类，因此我将如何包含所有动画?一类名为 animate ?
I got the idea and everything working but there is some problem I am facing which I cannot seem to figure out, what I did essentially (with the help of codepen), is that I added a js file that triggers the animation when the element is in view and included animate in my CSS file so that it adds that class whenever the element is in view. However, the problem is that since there is not just one animation the CSS file includes as almost every class in CSS has some animation attached to it, so how would I include all the animation of the element in one class called animate?
代码:
document.addEventListener("DOMContentLoaded", function(event) {
// get the element to animate
var element = document.getElementById('box');
//var elementHeight = element.clientHeight; //For some reason, stackoverflow produces an error for this line
// listen for scroll event and call animate function
document.addEventListener('scroll', animate);
// check if element is in view
function inView() {
// get window height
var windowHeight = window.innerHeight;
// get number of pixels that the document is scrolled
var scrollY = window.scrollY || window.pageYOffset;
// get current scroll position (distance from the top of the page to the bottom of the current viewport)
var scrollPosition = scrollY + windowHeight;
// get element position (distance from the top of the page to the bottom of the element)
var elementPosition = element.getBoundingClientRect().top + scrollY + elementHeight;
// is scroll position greater than element position? (is element in view?)
if (scrollPosition > elementPosition) {
return true;
}
return false;
}
// animate element when it is in view
function animate() {
// is element in view?
if (inView()) {
// element is in view, add class to element
element.classList.add('animate');
}
}
});@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body20{
height: 100%;
place-items: center;
background: transparent;
}
::selection{
color: #fff;
background: black;
}
.skill-bars{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span18{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
.animate{ /* This is the animation class */
}
@keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span18{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span18{
width: 84%;
}
.bar .progress-line.css span18{
width: 76%;
}
.bar .progress-line.jquery span18{
width: 91%;
}
.bar .progress-line.python span18{
width: 59%;
}
.bar .progress-line.mysql span18{
width: 70%;
}
.progress-line span18::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span18::after{
content: "84%";
}
.progress-line.css span18::after{
content: "76%";
}
.progress-line.jquery span18::after{
content: "91%";
}
.progress-line.python span18::after{
content: "59%";
}
.progress-line.mysql span18::after{
content: "70%";
} <section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18>Harvard CS50 Course</span18>
</div>
<div class="progress-line html">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Youtube Channel (Java Tutorials)</span18>
</div>
<div class="progress-line css">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>C++</span18>
</div>
<div class="progress-line jquery">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="progress-line python">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="progress-line mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
</div>所以到目前为止，我的 animate 类中没有任何内容，因为由于某种原因它在这里不起作用，并且当我取消注释时到目前为止，我已经将其注释掉了. StackOverFlow 会产生错误var elementHeight = element.clientHeight;
So there is nothing in my animate class as of right now because for some reason it would not work here, and StackOverFlow produces an error when I uncomment var elementHeight = element.clientHeight; as right now I have commented it out.
该元素在显示时如何触发动画?有什么建议吗?
How would I trigger the animation of this element when it's in view? Any suggestions?
在我尝试其他操作时，请原谅课程的重命名
Please excuse the renaming of the classes, as I was trying something else
推荐答案
类似的东西呢?
https://codepen.io/zvona/pen/ovDbk
window.addEventListener("scroll", function() {
onAppear.forEach(function(elem) {
var vwTop = window.pageYOffset;
var vwBottom = (window.pageYOffset + window.innerHeight);
var elemTop = elem.offsetTop;
var elemHeight = elem.offsetHeight;
if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
elem.classList.add("visible");
} else {
elem.classList.remove("visible");
}
});
}, false);
这篇关于当元素在视图中时如何触发动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
