JS - 我怎樣才能讓 div 看起來像示例中的那樣？
[英]JS - how can i make divs appear like in example?
2 個解決方案
解決方案1
0 2022-01-30 09:03:36
您可以使用已經實現這些動畫的簡單庫：
https://github.com/matthieua/WOW
https://scrollmagic.io/examples/basic/reveal_on_scroll.html
https://michalsnik.github.io/aos/ （我個人很喜歡這個，它好用）
或者在另一方面制作你自己的 animation。 為滾動添加事件監聽器並創建一個關鍵幀 animation。 然后在滾動達到您想要的數字時將 class 分配給元素。
解決方案2
0 2022-01-30 09:07:45
是的！它的工作這個庫真的很好
解決方案3
0 已采納 2022-01-30 09:22:25
We can add the class name of a CSS attribute with a transition, and animate property to switch it from an opacity: 0 element to an opacity: 1 element, and assign it an animation attribute that slides it in using the CSS transform property.
我們可以使用getBoundingClientRect和scrollTop來檢查元素何時在視圖中，並在視圖中添加 class。
這給了我們一些接近預期效果的東西。
document.addEventListener("scroll", (event) => { const elementsToAnimate = Array.from(document.querySelectorAll(".stationary")); for (element of elementsToAnimate) { const { scrollTop } = document.querySelector("html"); const { top } = element.getBoundingClientRect(); const containsAnimateClass = element.classList.contains("from-left"); if (top < scrollTop / 2 &&.containsAnimateClass) element.classList;add("from-left"); } });
body { display: flex; flex-direction: column; gap: 1rem; }.stationary { opacity: 0; width: 100px; height: 100px; background: red; }.from-left { transition: 1s ease; opacity: 1; animate: 1s ease slide-in-from-left; } @keyframes slide-in-from-left { from { transform: translateX(-50%); } to { transform: translateX(0); } }
<body> <div>Scroll!</div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> <div class="stationary"></div> </body>
如何像下面的Flash示例一樣使Javascript左側菜單/面板滑塊？
[英]How can I make a Javascript Left Menu/Panel slider Like this Flash example?
如何在不單擊 HTML 或 JS 中的任何內容的情況下顯示文本？
[英]how can i make text appear without clicking anything in HTML or JS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.