在javascript和css中向下滚动时如何水平移动div [英] How to horizontally move a div as you scroll down in javascript and or css

问题描述

有人知道如何获得该网站底部的轮播效果吗？ https：/ /brand.twitch.tv/ ??

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

我使用的是本示例中在Codepen中找到的示例。

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.

预先感谢！

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>

推荐答案

实现此目标的一种方法是使用 Scrollmagic 。学习曲线有些陡峭，但回报值得。

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）我们添加了一堆div，希望它们成为普通页面滚动的一部分。

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>

我将高度设置为300px，而框占据了屏幕的整个宽度。然后，我们添加一个想要水平滚动的部分。请注意，盒子上样式的变化-flex-direction设置为row，因此盒子彼此相邻放置，并且我们为其设置了宽度。

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>

魔术来了。

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

然后，我们将要移动的元素作为目标。在这里，我们以#scrollHorizo​​ntal为目标，这是h框的包装，然后告诉它将自身一直移动到最左侧，直到它离开屏幕为止。就像您将侧面导航放置在屏幕上一样。

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%'})

现在这将起作用，但垂直滚动仍会生效，并且感觉不会很好。因此，我们将要滚动的元素固定到屏幕顶部-本质上，scrollmagic添加了一堆空白（由持续时间键设置，以像素为单位），用户可以滚动浏览该空白，但该空白隐藏在该固定针后面，然后我们就可以看到您在scrollHorizo​​ntal中设置了什么（完全向左移动）。

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

所以我们设置了一个目标元素，当浏览器检测到它时，该元素就被固定了，动画您在newTimelineLite（）中声明的操作在设置的持续时间内执行，然后当持续时间结束时，我们取消固定并返回自然的垂直滚动。播放持续时间以更改水平滚动的速度。

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.

参考文献：

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

编辑

我应该添加，codepen正在使用4个脚本：

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

这篇关于在javascript和css中向下滚动时如何水平移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！