javascript - 在javascript和/或css中向下滚动时如何水平移动div
问题描述
有谁知道我怎样才能获得像本网站底部https://brand.twitch.tv/这样的旋转木马的效果 ?
我正在使用我在 codepen 中找到的这个示例来构建本节的结构。
但是当尝试使用垂直滚动将其添加到我的站点时,它不是像 twitch 站点中那样连续滚动,它只是另一个滚动中的滚动。用户感觉很奇怪,如果向下滚动太快,可能会错过它。
提前致谢!
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。学习曲线有点陡峭,但回报是值得的。
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>
我设置了 300px 的高度,这些框占据了屏幕的整个宽度。然后我们添加一个我们想要水平滚动的部分。注意盒子样式的变化—— flex-direction 设置为 row,因此盒子彼此相邻,我们在它们上设置了宽度。
<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);
我建议您阅读文档并使用演示来弄清楚发生了什么。但本质上,您设置了一个包含动画的控制器。
var controller = new ScrollMagic.Controller();
然后我们定位我们想要移动的元素。在这里,我们以#scrollHorizontal 为目标,它是h-box 的包装器,然后我们告诉它一直向左移动直到它离开屏幕。就像您将侧导航定位在屏幕外一样。
var scrollHorizontal = new TimelineLite()
scrollHorizontal.to("#scrollHorizontal", 1, {x:'-100%'})
现在这样可以了,但是垂直滚动还是会生效的,感觉不会很好。所以我们将要滚动的元素固定到屏幕顶部 - 本质上,scrollmagic 添加了一堆空白(由持续时间键设置,这是一个以像素为单位的高度),用户滚动浏览,但它隐藏在 pin 后面, 我们只看到你在 scrollHorizontal 中设置的任何内容(完全向左移动)。
var horizontalScroll = new ScrollMagic.Scene({
triggerElement: "#scrollHorizontal",
triggerHook: 'onLeave',
duration: 3000
}).setPin("#scrollHorizontal").setTween(scrollHorizontal).addTo(controller);
所以我们设置了一个目标元素,当浏览器检测到它时,元素被固定,你在 newTimelineLite() 中声明的动画被动作,持续你设置的持续时间,然后当持续时间结束时,我们取消固定并继续回到自然的垂直滚动。使用持续时间来改变水平滚动的速度。
参考:
https://scrollmagic.io/ https://scrollmagic.io/docs/index.html
编辑
我应该补充一点,codepen 使用 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
推荐阅读
- flutter - 在导航器颤动中传递参数
- firebase - React Native:尝试创建新用户时出现firebase auth / network-request-failed错误,但登录时没有?
- api - Rest API 应该再次验证传入的请求吗?
- apache-spark - 使用 PySpark 在组之后将行收集为 Spark 数据帧的数组
- javascript - ajax 响应将每个值作为单个字符返回
- java - 以连续整数作为键的 HashMap 与 ArrayList
- r - 如何忽略 rbind 函数中缺少的工作表?
- php - Mailgun API 在 Laravel 8.54 中静默失败
- java - java - 如何在方向更改时维护Java中列表的状态
- android - React native Android Native Modules - MantraMFS100 指纹读取器