如何在javascript和/或css中向下滚动时水平移动div

Question

Does anybody know how can I get the effect of a carousel like the one in the bottom of this site https://brand.twitch.tv/ ??

I was using this example I found in codepen for the structure of this section.

but when trying to add it to my site with a vertical scroll, instead of being one continuous scroll like the one in the twitch site, its just a scroll inside another scroll. It feels weird for the user and you can miss it if you scroll down too fast.

Thanks in advance!

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

One way to achieve this is by using Scrollmagic . The learning curve is a little steep but the rewards are worth it.

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

I've forked your pen and amended slightly. Here's how it works.

1) We add a bunch of divs that we want to be part of the normal page scroll. Nothing new here.

<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>

I've set a height of 300px and the boxes take up full width of the screen. Then we add a section that we'd like to scroll horizontally. Notice the change in styles on the boxes - flex-direction is set to row, so that the boxes sit next to each other, and we set a width on them.

<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>

The comes the magic.

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);

I recommend you read the docs and play around with the demos to figure out whats going on. But essentially you set a controller which contains your animations.

var controller = new ScrollMagic.Controller();

Then we target the element we would like to move. Here, we target #scrollHorizontal, which is the wrapper for the h-boxes, and then we tell it move itself all the way over to the left until it is off the screen. Like you would position a side nav off the screen.

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

Now this will work, but the vertical scroll will still take effect, and it won't feel great. So we pin the element to be scrolled to the top of the screen - essentially scrollmagic adds a bunch of whitespace (set by the duration key, which is a height in pixels), which the user scrolls through, but it is hidden behind the pin, and we just see whatever you set to happen in scrollHorizontal (which was to move completely to the left).

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

So we set a target element, and when the browser detects it, the element is pinned, the animation you declared in newTimelineLite() is actioned, for the duration you set, and then when the duration is over, we un-pin and go back to a natural vertical scroll. Play around with duration to change the speed of the horizontal scroll.

References:

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

EDIT

I should add, the codepen is using 4 scripts:

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