Question

我遇到的问题可以在这里查看：https://codepen.io/anon/pen/daaYGw?editors=0010。

我需要做的是能够基于滚动来缩放或旋转元素（顺时针和逆向旋转以及上下缩放），有点像视差效果。由于它位于页面顶部，因此可以按预期对第一个元素起作用。但是对于位于下面的元素，它不能按预期方式工作，因为该元素与页面顶部的偏移量没有计算在内。我不知道该怎么做。我希望元素在视口中时开始旋转（我可以自己做），但是如果不考虑偏移量的计算，那么当用户滚动到元素时，元素将偏离位置。

我将其标记为视差，因为我认为它有点像，但如果不是，请更正我。我也尝试搜索该问题，但找不到任何内容，如果您知道可以回答我的问题的内容，请链接到它。谢谢。

为简单起见，添加了jQuery，我认为我的问题在于计算本身，而不是所使用的库。

var $container = $('.container'); 
var winHeight = $(window).outerHeight(); 

$(window).on('scroll', function() {
  var scrollTop = $(window).scrollTop(); 
  
  $container.each(function() {
    var $this = $(this); 
		var scroll = (scrollTop / winHeight * 4);

		$this.css({
		  transform: 'translate(' + scroll * 2 + '%, ' + scroll * 4 + '%) rotate(' + scroll * 4 + 'deg)'
		});
  });
});

.container {
  height: 200px;
  background-color: red;
  width: 500px;
  margin-top: 70px;
  margin-left: 70px;
}

.container + .container { margin-top: 2500px; }

body {
  height: 10000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container"></div>

<div class="container"></div>

Answer 1

您可以考虑元素的偏移量，并使用滚动顶部计算差值。当它等于0时，元素将触摸顶部边缘，因此您可以使用它来激活动画。

这是一个简化的示例：

var $container = $('.container');

$(window).on('scroll', function() {
  $container.each(function() {
    var s = $(this).offset().top - $(window).scrollTop()
    if(s<0) {
      $(this).css({
      transform: 'rotate(' + Math.abs(s)/4 + 'deg)'
     });
    }    
  });
});

.container {
  height: 100px;
  background-color: red;
  width: 200px;
  margin-top: 70px;
  margin-left: 70px;
}

.container+.container {
  margin: 200px 70px;
}

body {
  height: 1500px;
  position:relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container"></div>

<div class="container"></div>

您甚至可以在触摸顶部之前轻松添加一个偏移量来开始：

var $container = $('.container');
var offset = 100;

$(window).on('scroll', function() {
  $container.each(function() {
    var s = $(this).offset().top - $(window).scrollTop() - 100
    if(s<0) {
      $(this).css({
      transform: 'rotate(' + Math.abs(s)/4 + 'deg)'
     });
    }    
  });
});

.container {
  height: 100px;
  background-color: red;
  width: 200px;
  margin-top: 70px;
  margin-left: 70px;
}

.container+.container {
  margin: 300px 70px;
}

body {
  height: 1500px;
  position:relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container"></div>

<div class="container"></div>

基于滚动/元素偏移的缩放/旋转元素

1 个答案: