Question

我在使用小型jQuery脚本时处于盲点。关键是我要使元素旋转，并在用户滚动页面时动态应用旋转值。

它在stackoverflow上可以使用，但是我无法在我的网站上使用它... 我正在使用的唯一外部库是JQuery。

您能告诉我问题出在哪里吗

"errors": [
    {
        "title": [
            "eventId"
        ],
        "status": 422,
        "id": "070504e3-71e5-431c-93e8-4e501477be71",
        "detail": "\"eventId\" missing required peer \"seriesId\"",
        "url": "/api/discovery/event-detail?profileIdentifier=433caf10-4d12-11e7-85f5-e5a72ae6734d_nl~~23MasterProfile&country=be&language=nl&eventId=crid:~~2F~~2Fbds.tv~~2F231374079",
        "meta": (...)
    },
    {
        "title": [
            "eventId"
        ],
        "status": 422,
        "id": "070504e3-71e5-431c-93e8-4e501477be71",
        "detail": "\"eventId\" missing required peer \"seriesId\"",
        "url": "/api/discovery/event-detail?profileIdentifier=433caf10-4d12-11e7-85f5-e5a72ae6734d_nl~~23MasterProfile&country=be&language=nl&eventId=crid:~~2F~~2Fbds.tv~~2F231374079",
        "meta": (...)
    }
]

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;
}

Answer 1

请检查我在没有 jQuery 的情况下制作的示例，该示例显示了如何根据窗口的滚动位置旋转元素，但是一旦元素为 strong>可见。

我决定不使用 jQuery 来执行此操作，因为这样做对性能更好，可以直接与DOM一起使用，而不是通过 jQuery 进行传递，并且因为它是相对简单的代码，可以理解。

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

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>元素，发现它仅在可见时才进行变换。

滚动时动态变换样式属性

1 个答案: