HTML / JS: приостановить вертикальную прокрутку и анимировать элемент - PullRequest
Новая
       49

HTML / JS: приостановить вертикальную прокрутку и анимировать элемент

0 голосов
/ 16 февраля 2020

У меня есть сайт, который содержит элемент <div> с горизонтальным переполнением. Я хочу, чтобы div прокручивал по горизонтали слева направо, когда пользователь прокручивает сайт вертикально сверху вниз. На этом этапе основной контент не должен двигаться, только div должен прокручиваться. После того, как div прокручен полностью вправо, вертикальная прокрутка сайта должна продолжаться в обычном режиме. То же самое должно работать и в обратном направлении.

Я пытался использовать ScrollMagi c с закреплением, однако при попытке закрепить контейнер основного содержимого я заикаюсь:

https://codepen.io/oelrim/pen/ZEGWvOK

Есть ли какой-нибудь другой плагин, который может достичь того, что я хочу?

1 Ответ

0 голосов
/ 17 февраля 2020

Попробуйте это: 

var scene = document.querySelector('#sec-2');
var rect = document.querySelector('#rect');

var startEffect = scene.getBoundingClientRect().top + window.scrollY;
var effectLength = 500;

scene.style.marginBottom = effectLength +'px';
window.addEventListener('scroll', function(e){
  var effect = window.scrollY - startEffect;

if(effect > 0 && effect < effectLength) {
  scene.style.marginTop = effect+'px';
  scene.style.marginBottom = effectLength-effect+'px';
  rect.style.left = effect * (scene.offsetWidth-rect.offsetWidth) /effectLength+'px';
} else if (effect < 0) {
  scene.style.marginTop = 0;
  scene.style.marginBottom = effectLength+'px';
  rect.style.left = 0;
} else {
  scene.style.marginTop = effectLength+'px';
  scene.style.marginBottom = 0;
  rect.style.left = (scene.offsetWidth-rect.offsetWidth)+'px';
}

});
html, body {padding:0;margin:0}

#sec-1 {
height: 100vh;
background: repeating-linear-gradient(yellow 0, yellow 10px, green 10px, green 20px);
}
#sec-2 {
position: relative;
height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, green 10px, green 20px);}
#sec-3 {
  height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, blue 10px, blue 20px);}
h1 {
color: white;
text-shadow:  2px 2px 3px black, -2px -2px 3px black;
margin: 0;
}
#rect {
position: absolute;
width: 60px;
height: 60px;
background-color: white;
top: calc(50% - 30px);
left: 0;
}
<div id="sec-1">
<h1>This is section 1</h1>
</div>
<div id="sec-2">
<h1>This is section 2</h1>
<div id="rect"></div>
</div>
<div id="sec-3">
<h1>This is section 3</h1>
</div>
...