如何用普通的JavaScript和CSS制作OnScroll动画。不使用任何库
如何用普通的JavaScript和CSS制作OnScroll动画。不使用任何库
提问于 2018-10-14 02:36:49
我想知道如何制作OnScroll动画(如淡出、淡出、淡出等)。使用JavaScript和Css，没有任何库。我知道有很多很酷的库可以帮助我做到这一点。我甚至在一些项目中使用过AOS，但我想更多地了解它在后台是如何工作的。
我只想知道如何使用普通的JavaScript制作OnScroll动画。不带任何库。
有人能帮我吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-14 05:56:29
你可以通过使用CSS Animation，keyframes和Vanilla JavaScript来实现这一点。
您需要首先决定如何为元素设置动画，然后在CSS中成功创建该动画。
CSS文件中的，
只为动画创建一个唯一的类名，然后创建与该动画一起使用的关键帧。我在下面的代码片段中给出了一个简单的示例。使用此示例可以更好地了解如何创建动画。你可以在此基础上继续努力。请注意0%和100%关键帧状态；这表示动画的起始点和结束点。一旦成功创建了所需的动画，就可以转到JavaScript。
JavaScript中的，
为您想要animate.
- create函数的元素设置一个变量，以确定元素相对于客户端的屏幕位置的位置。
- 设置一个变量来确定元素相对于客户端屏幕位置的位置。for添加一个事件侦听器来侦听滚动events
- finally，，创建一个
循环来定位屏幕上的元素，然后将目标元素的类类型更改为您在
- 中创建的动画类。
查看下面的代码片段，以获得工作演示，并更好地了解每个步骤背后的细节。
var words = document.querySelectorAll('.word');
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
var isOutside = (rect.top >= window.innerHeight) || (rect.bottom <= 0);
return !isOutside;
}
window.addEventListener('scroll', function(e) {
for (i = 0; i < words.length; ++i) {
words[i].classList.toggle('in-view', isElementInViewport(words[i]));
}
});body{
margin: 0;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.s1{
background-color: skyblue;
}
.s2{
background-color: rgb(82, 156, 185);
}
.s3{
background-color: rgb(36, 107, 134);
}
.word{
height: 80px;
opacity: 0;
}
.in-view{
animation: slideRight .8s forwards .1s ease-in-out;
}
@keyframes slideRight{
0%{
transform: translateX(-50vw);
opacity: 0;
}
100%{
transform: translateX(0);
opacity: 1;
}
}<body>
<section class="s1">
<svg class="in-view word" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.08 10.46">
<path d="M41.45,32.59H39v-.88h6v.88H42.5v7.2h-1Z" transform="translate(-38.99 -31.71)"/>
<path d="M50.24,36.84a2.83,2.83,0,0,1-2.89,3.08,2.76,2.76,0,0,1-2.78-3,2.84,2.84,0,0,1,2.88-3.09A2.75,2.75,0,0,1,50.24,36.84Zm-4.61.06c0,1.27.74,2.23,1.77,2.23s1.76-1,1.76-2.25c0-1-.49-2.23-1.74-2.23S45.63,35.8,45.63,36.9Z" transform="translate(-38.99 -31.71)"/>
<path d="M51.58,35.88c0-.74,0-1.34,0-1.89h.94l.05,1h0a2.27,2.27,0,0,1,2.06-1.13c1.4,0,2.46,1.19,2.46,2.95,0,2.09-1.27,3.12-2.64,3.12A2,2,0,0,1,52.64,39h0v3.15h-1Zm1,1.55a2,2,0,0,0,.05.43,1.62,1.62,0,0,0,1.58,1.23c1.12,0,1.76-.91,1.76-2.24,0-1.16-.61-2.16-1.72-2.16A1.69,1.69,0,0,0,52.69,36a1.55,1.55,0,0,0-.07.43Z" transform="translate(-38.99 -31.71)"/>
</svg>
</section>
<section class="s2">
<svg class="word" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.85 8.65">
<path d="M46.72,36.24c-.06-1.13-.13-2.48-.12-3.49h0c-.28,1-.61,2-1,3.07l-1.43,3.92h-.79L42,35.89c-.38-1.14-.71-2.18-.93-3.14h0c0,1-.08,2.36-.15,3.57l-.22,3.47h-1l.56-8.08h1.33L43,35.62c.34,1,.61,1.88.82,2.72h0c.21-.82.49-1.7.85-2.72l1.44-3.91h1.33L48,39.79h-1Z" transform="translate(-39.7 -31.27)"/>
<path d="M50.84,32.35a.65.65,0,1,1-1.3,0,.64.64,0,0,1,.66-.66A.62.62,0,0,1,50.84,32.35Zm-1.17,7.44V34h1v5.8Z" transform="translate(-39.7 -31.27)"/>
<path d="M57.49,31.27v7c0,.52,0,1.1,0,1.5h-.95l-.05-1h0a2.15,2.15,0,0,1-2,1.14c-1.41,0-2.48-1.19-2.48-3,0-1.93,1.18-3.12,2.6-3.12a1.93,1.93,0,0,1,1.75.89h0V31.27Zm-1.06,5.08a1.77,1.77,0,0,0,0-.45,1.54,1.54,0,0,0-1.52-1.22c-1.09,0-1.74,1-1.74,2.24s.58,2.15,1.72,2.15a1.58,1.58,0,0,0,1.54-1.26,1.64,1.64,0,0,0,0-.45Z" transform="translate(-39.7 -31.27)"/>
<path d="M64.26,31.27v7c0,.52,0,1.1,0,1.5h-.94l0-1h0a2.13,2.13,0,0,1-2,1.14c-1.41,0-2.49-1.19-2.49-3,0-1.93,1.19-3.12,2.61-3.12a2,2,0,0,1,1.75.89h0V31.27ZM63.2,36.35a1.77,1.77,0,0,0-.05-.45,1.54,1.54,0,0,0-1.52-1.22c-1.09,0-1.74,1-1.74,2.24s.58,2.15,1.72,2.15a1.59,1.59,0,0,0,1.54-1.26,1.64,1.64,0,0,0,.05-.45Z" transform="translate(-39.7 -31.27)"/>
<path d="M66,31.27h1.06v8.52H66Z" transform="translate(-39.7 -31.27)"/>
<path d="M69.43,37.08a1.86,1.86,0,0,0,2,2,3.8,3.8,0,0,0,1.61-.3l.18.76a4.67,4.67,0,0,1-1.93.36A2.7,2.7,0,0,1,68.42,37c0-1.75,1-3.13,2.73-3.13a2.46,2.46,0,0,1,2.39,2.74,4.88,4.88,0,0,1,0,.49Zm3.1-.76a1.5,1.5,0,0,0-1.47-1.71,1.76,1.76,0,0,0-1.62,1.71Z" transform="translate(-39.7 -31.27)"/>
</svg>
</section>
<section class="s3">
<svg class="word" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.85 8.28">
<path d="M39.91,31.81a10.82,10.82,0,0,1,1.91-.16,3.41,3.41,0,0,1,2.22.58,1.72,1.72,0,0,1,.67,1.43,1.94,1.94,0,0,1-1.37,1.78v0a2.08,2.08,0,0,1,1.67,2,2.22,2.22,0,0,1-.68,1.62,4.12,4.12,0,0,1-2.8.75,14.11,14.11,0,0,1-1.62-.09ZM41,35.12h.94c1.11,0,1.75-.57,1.75-1.35,0-1-.72-1.32-1.77-1.32a4.9,4.9,0,0,0-.92.07ZM41,39a6.25,6.25,0,0,0,.87,0c1.08,0,2.08-.4,2.08-1.57s-.95-1.56-2.09-1.56H41Z" transform="translate(-39.91 -31.65)"/>
<path d="M51.68,36.84a2.83,2.83,0,0,1-2.89,3.08,2.76,2.76,0,0,1-2.78-3,2.84,2.84,0,0,1,2.88-3.09A2.75,2.75,0,0,1,51.68,36.84Zm-4.61.06c0,1.27.74,2.23,1.77,2.23s1.76-1,1.76-2.25c0-1-.49-2.23-1.74-2.23S47.07,35.8,47.07,36.9Z" transform="translate(-39.91 -31.65)"/>
<path d="M54.29,32.32V34H55.8v.8H54.29v3.13c0,.72.2,1.13.79,1.13a2.13,2.13,0,0,0,.61-.08l.05.8a2.73,2.73,0,0,1-.94.14,1.5,1.5,0,0,1-1.14-.44A2.17,2.17,0,0,1,53.25,38V34.79h-.89V34h.89v-1.4Z" transform="translate(-39.91 -31.65)"/>
<path d="M58.26,32.32V34h1.51v.8H58.26v3.13c0,.72.2,1.13.79,1.13a2.08,2.08,0,0,0,.61-.08l.05.8a2.69,2.69,0,0,1-.94.14,1.5,1.5,0,0,1-1.14-.44,2.17,2.17,0,0,1-.4-1.51V34.79h-.9V34h.9v-1.4Z" transform="translate(-39.91 -31.65)"/>
<path d="M66.14,36.84a2.83,2.83,0,0,1-2.89,3.08,2.76,2.76,0,0,1-2.78-3,2.84,2.84,0,0,1,2.88-3.09A2.75,2.75,0,0,1,66.14,36.84Zm-4.6.06c0,1.27.73,2.23,1.76,2.23s1.76-1,1.76-2.25c0-1-.49-2.23-1.74-2.23S61.54,35.8,61.54,36.9Z" transform="translate(-39.91 -31.65)"/>
<path d="M67.48,35.56c0-.6,0-1.1,0-1.57h.92l.05.93h0a2,2,0,0,1,1.83-1.07A1.71,1.71,0,0,1,71.9,35h0a2.35,2.35,0,0,1,.65-.76,2,2,0,0,1,1.29-.41c.76,0,1.9.51,1.9,2.52v3.42h-1V36.5c0-1.11-.41-1.78-1.26-1.78a1.36,1.36,0,0,0-1.25,1,2,2,0,0,0-.08.52v3.59h-1V36.31c0-.92-.41-1.59-1.21-1.59a1.44,1.44,0,0,0-1.31,1.05,1.49,1.49,0,0,0-.08.52v3.5h-1Z" transform="translate(-39.91 -31.65)"/>
</svg>
</section>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52796086
复制相关文章
相似问题