Как сделать горизонтальный scroll?

Question

[rdn-s]

В ходе просмотра tinkoff репозиториев github, я заметил проект "Taiga", решил рассмотреть на сайте что это такое.

И в итоге, я понял что такое Taiga, но у меня возник вопрос как сделать горизонтальный скролл как у них на сайте (https://taiga-ui.dev/)?

Можно ли это написать на голом JavaScript'е или нужно использовать какие то дополнительные библиотеки, фреймворки?

Comments

[Максим Федоров]

Тайга — компоненты ТОЛЬКО для фреймворка Ангуляр, но там нет в них магии, все есть в чистом js

Answer 1

[Deita]

Можно ли это написать на голом JavaScript'е

Можно:

var vwWidth = window.innerWidth;

var controller = new ScrollMagic.Controller();

//for horizontal scrolling
var horizontalSlide = new TimelineMax()
  .to(".div2", 0.2,   {x: 0, ease: Power1.easeOut}, )
  .to(".div2", 1,   {x: -vwWidth, ease: Power1.easeOut}, )	
  .to(".div2", 0.2,   {x: -vwWidth, ease: Power1.easeOut}, )
  .to(".div2", 1,   {x: -2*vwWidth, ease: Power1.easeOut}, )
  .to(".div2", 0.2,   {x: -2*vwWidth, ease: Power1.easeOut}, )

new ScrollMagic.Scene({
  triggerElement: ".div2",
  duration: "350%",
  offset: 0,
  triggerHook: -0.02
})
.setPin('.div2')
.setTween(horizontalSlide)
.addTo(controller)

https://codepen.io/vishwakarma02/pen/QxYJQw

Comments

[rdn-s]

Спасибо, большое!

[Вадим]

rdn-s, если ответ является решением вопроса, то стоит его таковым отметить.

[Deita]

Вадим, так он отметил, просто 2 раза нажал и ушёл, второй раз снимает отметку решением, "UI/UX 2.0"