何止竖向滑动？让你的网页横着走！
合集 · 前端教程 (23)
-
【前端 | 教程】如何做一个扑克牌轮播图
10:23
-
【前端 | 教程】实现酷酷的文字故障效果
7:22
-
【前端 | 教程】纯干货！三步实现滑动阻尼效果
8:13
-
【前端 | Lottie】如何将AE动画渲染到网页上？
10:25
-
前端还能这样玩？做一只顶级走位的小蜘蛛
8:25
-
你的网站或许离高级，，还差一个跳转动画？
9:06
-
何止竖向滑动？让你的网页横着走！
9:30
-
干到开裂！上下左右⚡网页无限滑动⚡
12:32
-
做一个网页信息表单：不仅可以打勾，还可以擦掉？
11:56
-
硬到牙疼！如何将SVG图形嵌入网页、优雅地做动画？
7:57
-
网页SVG描边效果？一段动画给你整明白
7:26
-
你最该学会的网页交互？SVG描边动画 + 按钮
6:16
-
最具科技感的一集？用SVG打造网页矩阵动画
7:57
-
全站首发！别再问哪找网页灵感了，AW保姆级教程
8:33
-
不用物理引擎？让网页小球附加🧲磁力效果🧲
7:15
-
一个让人猜不到原理的，，网页小蛇加载效果？
7:48
-
终！极！网页横向滑动效果📕教程📕
6:34
-
再花里胡哨一点？在网页里使用ASCII动画
6:24
-
手搓物理效果？详解大神写的前端代码
8:09
-
音频可视化第一步？无库实现网页音波环
6:33
-
“自瞄锁敌”？做一个带有磁力的网页光标
5:40
-
网页也能一刀两断？这个开屏动画有点小帅
6:10
-
另类切图法？当CSS不按套路出牌
6:14
Description
源代码链接：https://pan.baidu.com/s/1-huDpgAmhAK6d2F6J3txIg 提取码：jiej 喜欢这个视频的话，就点个赞吧❤
Comments
视频中的"横向滑动"是一个比较经典的滑动交互，整个demo的精髓不在于"横向"，而是完成滑动跟随这个效果(名字我瞎取的👀)，与滑动触发不同的是，滑动跟随不只是触发一次，只要在指定区域内，它可以不断调用，这个时候我们就可以在这个过程中完成很多的交互，不仅仅是横向位移，我们还可以将滑动进度进行映射，比如用滑动条控制动画的播放，控制元素的位移等等，有想法的同学可以搭配动画库完成更多复杂的滑动跟随交互。 视频中的横向滑动效果可以搭配gsap，整个动画会更流畅有趣一些。在稍复杂的项目中，同学们可以用observer来监视窗口调用滑动事件，这样可以提升很多的性能，因为视频中的demo比较简单，并且JIEJOE没有多余的时间来讲observer，所以大家有条件的话，可以下来自己研究❤
♥ 18 ↩ 4
窝趣，第一次蹲到了一个前端大宝藏[doge]UI也很好[doge]
♥ 4 ↩ 1
很好奇，如果是用gsap要怎么做成一样的效果[思考]
♥ 2 ↩ 2
诶其实用css动画的keyframe的@scroll属性会不会更好
♥ 2 ↩ 1
够我研究办呢
♥ 2
有一种方式 也是在别的up主看到的 布局还是按照竖向布局 只不过使用translate 将整个布局横向过来
♥ 1 ↩ 3
为啥用vscode做的发现横轴不移动[笑哭]
♥ 1 ↩ 1
请问一下阿婆，为啥我在滚动的时候会出现抖动的情况 ，用up提供的源代码也有抖动的情况，加上lennis还是会有微微的抖动
♥ 1 ↩ 2
想问问作者，学了之前的滑动阻尼后，因为是transform改变的视图位置，里面的子元素的position:sticky；就会失去了作用，再想要实现效果应该怎么解决啊[笑哭]
♥ 1 ↩ 1
嘎嘎嘎[星星眼][星星眼]
♥ 1 ↩ 1
666666[星星眼]
♥ 1 ↩ 1
持续蹲up的每次炫酷交互，简直宝藏up[doge]
♥ 1
加油，真是要学的！三联了
♥ 1 ↩ 1
大佬你这个教程出的真的很好，正好在学如何横向的网页
♥ 1 ↩ 1
为什么在我的电脑上面运行的时候我滚动他会抖动
↩ 2
@JIEJOE_轻敲代码up，为什么小卡车到第三张card的时候，还没走完，就已经离开当前横向滚动的区域了
咋不更新了
阿婆主，这样频繁的查询滚动和使用transform会不会很影响性能，如果网页没有那么多剩余性能来处理这么多的transform，处理有些延迟导致出现的抖动情况，有什么更好的优化措施吗
↩ 1
厉害！！！！！