首頁猿問如何在滾動條上觸發多個 css 動畫

如何在滾動條上觸發多個 css 動畫

JavaScript

互換的青春 2022-12-22 09:58:05

我在一個設計中使用了多個 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');

查看完整描述

1 回答

斯蒂芬大帝

TA貢獻1827條經驗獲得超8個贊

如果你不想要一個圖書館，你可以這樣做。（由其他貢獻者拼湊而成，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

});

反對回復 2022-12-22

1 回答
0 關注
110 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在滾動條上觸發多個 css 動畫

如何在滾動條上觸發多個 css 動畫

1 回答

添加回答