我在使用小型jQuery脚本时处于盲点. 关键是我要使元素旋转,并在用户滚动浏览页面时动态应用旋转值.
I'm in a blind spot with my small jQuery script. The point is that I'm trying to make an element to rotate, and to apply the rotation value dynamically as the user is scrolling through the page.
它在这里可以在stackoverflow上使用,但是我无法在我的网站上使用它... 我正在使用的唯一外部库是JQuery.
It works here on stackoverflow but I can't get this to work on my website... The only external library I'm using is JQuery.
你能告诉我问题出在哪里吗?
Can you please tell me where is the problem?
var $animObject = $('.animateObject'); var $window = $(window); $window.on('scroll', function() { var fromTop = $window.scrollTop() / -4; $animObject.css('transform', 'rotate(' + fromTop + 'deg)') });
.header { width: 100%; height: 100vh; background-image: url('simply-design.ml/dev/img/start1.jpg'); display: flex; justify-content: center; align-items: center; } .header-content { padding: 30px; max-width: 470px; } .header-wrapper { padding: 50px; border: solid 3px #fff; } .header h1 { font-size: 30px; color: #fff; text-align: center; } .header p { font-size: 20px; color: #fff; text-align: center; } .p-title { font-size: 14px; color: #fff; } .head-button { padding: 10px 25px; background-color: #3b88df; color: #fff; font-size: 20px; cursor: pointer; font-family: 'Source Sans Pro', sans-serif; } .head-button:hover { background-color: #2c78ce; }
<script src="ajax.googleapis/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <header class="header"> <div class="header-content"> <center> <div class="header-wrapper animateObject"> <h1>title</h1> <div style="height: 2px; width: 70px; background-color: #fff; margin: 20px;"></div> <p>subtitle</p> </div> </center> </div> </header> <div style="height: 1000px"></div>
推荐答案
检查我在没有 jQuery 的情况下所做的示例,该示例显示了如何根据窗口的滚动位置旋转元素,但仅(一旦该元素在视图中 ).
Check this example I've made without jQuery, which shows how to rotate an element based on the scroll position of the window, but only once the element is in view.
我决定不使用 jQuery 来执行此操作,因为这样做对性能更好,可以直接与DOM一起使用,而不是通过 jQuery 进行传递,并且因为它是相对简单的代码,可以理解.
I've decided to do this without jQuery because it's better for performance, working directly with the DOM instead of passing through jQuery, and also because it's relatively simple code, understandable.
var elm = document.querySelector('b'); var onScroll = (function(){ var startPos; function run(){ var fromTop = window.pageYOffset, rect = elm.getBoundingClientRect(), scrollDelta; // check if element is in viewport if( (rect.top - window.innerHeight) <= 0 && rect.bottom > 0 ) startPos = startPos === undefined ? fromTop : startPos; else{ startPos = 0; return; } scrollDelta = (fromTop - startPos) * 1; // "speed" per scrolled frame elm.style.transform = `translateX(${scrollDelta}px) rotate(${scrollDelta}deg)`; console.clear(); console.log(scrollDelta); } run(); return run; })() window.addEventListener('scroll', onScroll);
html, body{ height:100%; } body{ height:1500px; } b{ position:fixed; top: 20px; left:20px; width:100px; height:100px; background:red; }
<b></b>
在滚动时检查<b>元素,发现只有在视图中时才进行变换.
inspect the <b> element while scrolling and see that it only gets transform when it is in view.
更多推荐
滚动时动态变换样式属性
发布评论