Масштабирование / вращение элементов на основе прокрутки / смещения элемента - PullRequest
Новая
       29

Масштабирование / вращение элементов на основе прокрутки / смещения элемента

0 голосов
/ 19 февраля 2019

Проблема, с которой я столкнулся, можно увидеть здесь: 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>

1 Ответ

0 голосов
/ 19 февраля 2019

Вы можете рассмотреть смещение элемента и рассчитать разницу с помощью прокрутки вверх.Когда он равен 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>
...