[英]How to animate a Div on Scroll
我一直在試圖弄清楚如何根據我的滾動來旋轉div
。 我有一個代碼筆來演示我想要實現的行為。
但是,我不知道如何讓它與滾動一起工作。 本質上,我想向下滾動並讓Data一詞逆時針旋轉。 如果我決定上下滾動,它應該隨着滾動的速度移動。 我只希望它向上或向下移動 90 度。 謝謝!
var btn = document.querySelector('.button'); var btnUp = document.querySelector('.button-up') btnUp.addEventListener('click', function() { document.querySelector(".parent").style.webkitTransform = "rotate(-90deg)"; document.querySelector(".child").style.webkitTransform = "rotate(90deg)"; }); btn.addEventListener('click', function() { document.querySelector(".parent").style.webkitTransform = "rotate(0deg)"; document.querySelector(".child").style.webkitTransform = "rotate(0deg)"; });
.parent { position: relative; width: 300px; height: 300px; border-radius: 50%; transform: rotate(-0deg); transition: transform 0.7s linear; margin: 100px auto 30px auto; } .child { position: absolute; transform: rotate(-0deg); transition: transform 0.7s linear; border-radius: 50%; width: 40px; height: 40px; text-align: center; top: 278px; /* -child size/2 */ left: 130px; /* parent size/2 - child size/2 */ }
<div class="parent"> <div class="child"> Data </div> </div> <button class="button">Click Down</button> <button class="button-up">Click Up</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.