Как перемещать div по горизонтали при прокрутке вниз по javascript и или css

Question

Кто-нибудь знает, как я могу получить эффект карусели, подобной той, что внизу этого сайта? https://brand.twitch.tv/ ??

Я использовал этот пример, который нашел в codepen для структуры этого раздела.

, но при попытке добавить его на мой сайт с помощью вертикальной прокрутки, вместо того, чтобы быть одной непрерывной прокруткой, подобной той, что на сайте с подергиванием, это просто прокрутка внутри другой прокрутки. Это кажется странным для пользователя, и вы можете пропустить его, если прокрутите вниз слишком быстро.

Заранее спасибо!

https://codepen.io/lemmin/pen/xRyXMZ

    body {
      margin:0;
      font-family:Georgia;
    }
    #container .box {
      width:100vw;
      height:100vh;
      display:inline-block;
      position:relative;
    }
    #container .box > div {
      width:100px;
      height:100px;
      font-size:96px;
      color:#FFF;
      position:absolute;
      top:50%;
      left:50%;
      margin:-50px 0 0 -50px;
      line-height:.7;
      font-weight:bold;
    }
    #container {
      overflow-y:scroll;
      overflow-x:hidden;
      transform: rotate(270deg) translateX(-100%);
      transform-origin: top left;
      background-color:#999;
      position:absolute;
      width:100vh;
      height:100vw;
    }
    #container2 {
      transform: rotate(90deg) translateY(-100vh);
      transform-origin: top left;
      white-space:nowrap;
      font-size:0;
    }
    
    .one {
      background-color: #45CCFF;
    }
    .two {
      background-color: #49E83E;
    }
    .three {
      background-color: #EDDE05;
    }
    .four {
      background-color: #E84B30;
    }

    <div id="container">
      <div id="container2">
        <div class="box one"><div>1</div></div>
        <div class="box two"><div>2</div></div>
        <div class="box three"><div>3</div></div>
        <div class="box four"><div>Last</div></div>
      </div>
    </div>

Answer 1

Одним из способов достижения этого является использование Scrollmagi c. Кривая обучения немного крутая, но вознаграждение того стоит.

https://codepen.io/sean_pwc/pen/wvaaYWE

Я разветвил вашу ручку и немного исправил. Вот как это работает.

1) Мы добавляем несколько элементов div, которые мы хотим включить в обычную прокрутку страницы. Здесь нет ничего нового.

<div class="scroll-vertical">
   <div class="v-box one">1</div>
   <div class="v-box two">2</div>
   <div class="v-box three">3</div>
   <div class="v-box four">Last</div>
</div>

Я установил высоту 300 пикселей, и окна занимают всю ширину экрана. Затем мы добавляем раздел, который мы хотим прокрутить по горизонтали. Обратите внимание на изменение стилей на полях - flex-direction установлен в ряд, так что ящики располагаются рядом друг с другом, и мы устанавливаем ширину для них.

<div id="scrollHorizontal">
   <div class="h-box one">1</div>
   <div class="h-box two">2</div>
   <div class="h-box three">3</div>
   <div class="h-box four">4</div>
</div>

Приходит волхв c.

var controller = new ScrollMagic.Controller();

var scrollHorizontal = new TimelineLite()
  scrollHorizontal.to("#scrollHorizontal", 1, {x:'-100%'})

var horizontalScroll = new ScrollMagic.Scene({
      triggerElement: "#scrollHorizontal",
      triggerHook: 'onLeave',
      duration: 3000
    }).setPin("#scrollHorizontal").setTween(scrollHorizontal).addTo(controller);

Я рекомендую вам прочитать документы и поиграться с демонстрациями, чтобы выяснить, что происходит. Но по сути вы устанавливаете контроллер, который содержит ваши анимации.

var controller = new ScrollMagic.Controller();

Затем мы нацеливаемся на элемент, который хотели бы переместить. Здесь мы нацеливаемся на #scrollHor horizontal, который является оболочкой для h-блоков, и затем мы говорим, что он перемещается полностью влево, пока не исчезнет с экрана. Как будто вы расположите боковую навигацию за пределами экрана.

var scrollHorizontal = new TimelineLite()
  scrollHorizontal.to("#scrollHorizontal", 1, {x:'-100%'})

Теперь это будет работать, но вертикальная прокрутка все равно будет действовать, и она не будет чувствовать себя великолепно. Таким образом, мы прикрепляем элемент, подлежащий прокрутке, к верхней части экрана - по существу, scrollmagi c добавляет кучу пробелов (устанавливается ключом продолжительности, который представляет собой высоту в пикселях), который пользователь прокручивает, но он скрыт. за булавкой, и мы просто видим все, что вы настроили, в scrollHorizontally (который должен был полностью сдвинуться влево).

var horizontalScroll = new ScrollMagic.Scene({
      triggerElement: "#scrollHorizontal",
      triggerHook: 'onLeave',
      duration: 3000
    }).setPin("#scrollHorizontal").setTween(scrollHorizontal).addTo(controller);

Итак, мы устанавливаем целевой элемент, и когда браузер обнаруживает его, элемент прикреплен, анимация, которую вы объявили в newTimelineLite (), действует в течение заданной вами продолжительности, а затем, когда продолжительность заканчивается, мы открепляем и go возвращаемся к естественной вертикальной прокрутке. Поиграйте с продолжительностью, чтобы изменить скорость горизонтальной прокрутки.

Ссылки:

https://scrollmagic.io/ https://scrollmagic.io/docs/index.html

РЕДАКТИРОВАТЬ

Я должен добавить, что кодовая ручка использует 4 сценария:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js