javascript - 如何在滚动时触发多个css动画
问题描述
我在设计中使用了几个 CSS 动画。我的问题是这些动画仅在页面首次加载时触发一次。我需要每次用户滚动它们时触发它们,无论是向上还是向下页面,并且似乎没有任何响应我的 Javascript。我有一个向左滑动的彩色框,以及将从底部淡入的正文 + 标题。我希望这两个单独的动画在持续时间上略微偏移,文本在框滑到大约一半后进入。我尝试将这些 div 嵌套到一个中,以便它们都在滚动时显示在同一点上,并且我还尝试将它们视为 JavaScript 中的单独实体。
$(window).scroll(function() {
$('#Featuring_Animated').each(function() {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).addClass("slide-in-left");
} else {
$(this).removeClass("slide-in-left");
}
});
});
$('.element-to-hide').css('visibility', 'hidden');
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
.Featuring_Textbox {
-webkit-animation: slide-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
visibility: visible !important;
}
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-bottom left sections
* ----------------------------------------
*/
#Featuring_About,
#Featuring_Heading {
-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
visibility: visible !important;
}
@-webkit-keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-bottom left sections
* ----------------------------------------
*/
#Featuring_Textbox {
opacity: 0.9;
fill: #3B4A5C;
}
.Featuring_Textbox {
position: absolute;
overflow: visible;
width: 640px;
height: 552px;
left: 0px;
top: 0px;
}
#Featuring_About {
left: 74px;
top: 238px;
position: absolute;
text-align: left;
font-size: 18px;
color: white;
}
#Featuring_Heading {
left: 74px;
top: 143px;
position: absolute;
text-align: left;
font-size: 40px;
color: white;
}
<html>
<head>
<script language="JavaScript" type="text/javascript" src="colocation.js"></script>
</head>
<div class="Featuring_Animated element-to-hide" style="visibility:visible;">
<svg class="Featuring_Textbox">
<rect id="Featuring_Textbox" rx="0" ry="0" x="0" y="0" width="640" height="552"></rect>
</svg>
<div id="Featuring_About">
<span>Sample Text</span>
</div>
<div id="Featuring_Heading">
<span>FEATURING</span>
</div>
</div>
</html>
解决方案
如果你不想要图书馆,你可以这样做。(由其他贡献者拼凑而成,ty)您可以为不同的选择器添加不同的效果。当设置的元素百分比可见时动画触发一次(isInViewport - 第二个参数,当前设置为 35%)。只触发一次。
//every element needs to have a "hidden" class, ie. "visability:hidden" if starting state is hidden (fad-in effects and similar)
var elemList = {elements:[ //add elements and animations here
{elem:"#home-description", animation:"element-animation"},
{elem:".nav-item",animation:"slide-in-top"}
]};
var isInViewport = function(el, percentVisible) {
let
rect = el.getBoundingClientRect(),
windowHeight = (window.innerHeight || document.documentElement.clientHeight);
return !(
Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
)
};
function check(){
var eArray = elemList.elements;
if (eArray.length >= 1){
eArray.forEach( function(e,i){
if (e.elem){ //check if empty
let el = document.querySelectorAll(e.elem);
if (el.length >= 1){
el.forEach( function(x,y){
if (isInViewport(x,35)){
x.classList.remove("hidden") //remove this if element should be visible
x.classList.add(e.animation)
eArray.splice(i, 1)
}
})
}
}
})
}
}
window.addEventListener('load', function () {
check();
document.addEventListener('scroll', function () {
check();
})
}, {
passive: true
});
推荐阅读
- javascript - Discord.js 机器人加入然后离开
- ios - 可以使用不是 rootViewController 的 NavigationController 来访问和更新 Appdelegate.m 中的 UIWindow 类吗?
- c - 将结构与 null 进行比较的操作数无效
- java - 使用 BroadCastReceiver 重新启动后应用服务不会启动
- excel - 鉴于列由字母引用,如何遍历 VBA 中的列?
- javascript - p 元素粘在 div 上?
- r - 无法从 Rstudio 服务器授权 Google 表格
- java - 如何按顺序显示输入的分数?
- pine-script - 如何定义过去 14 根蜡烛的范围?
- typescript - 如何在 Typescript 中循环引用 keyof?