滚动时动态变换样式属性 [英] Dynamic transform style property while scrolling

问题描述

我在使用小型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('https://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="https://ajax.googleapis.com/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.

1. 了解滚动了多少
2. 获取目标元素的绝对位置
3. 计算元素是否在视口内(如果没有，则断开)
4. 如果在其中，请在该点保存滚动值
5. 从当前滚动值中减去该值以从该点开始获取该值
6. 使用新值作为转换的基准

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.

这篇关于滚动时动态变换样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！