求问 V2 的前端大佬,这个 dribbble 里 10000 赞的 slider 是怎么实现的?

2019-05-21 18:00:03 +08:00
 AZZERO

如图所示,上下滑动屏幕,卡片可以围绕圆心流畅滚动, 因为技术所限,自己造轮子比较困难,想通过 swiper 库来实现,不知道大佬们有没有好的思路?

swiper demo

1849 次点击
所在节点    问与答
6 条回复
AZZERO
2019-05-21 18:04:17 +08:00
github 里找不到合适的库啊~~
WittBulter
2019-05-21 19:16:45 +08:00
css3 有旋转,滚动可以看成旋转的圆的边,根据屏幕滚动的距离调节旋转的角度。
rabbbit
2019-05-21 19:30:25 +08:00
用 absolute 和 rotate 固定图片.监控 touch 事件, 然后根据移动距离 rotate 容器.
难点在于计算滚动幅度如何更自然和图片的的摆放位置.
tyx1703
2019-05-21 20:51:44 +08:00
https://jsbin.com/bukilaleye/1/edit?output

简单写了一下。ios 下面橡皮筋效果导致并不怎么好用。。
AZZERO
2019-05-21 22:55:27 +08:00
@tyx1703 感谢大佬, 但是 这个滚动几乎不可用啊,我发现了一个库: https://github.com/Prinzhorn/skrollr 但是文档里 Mobile support 说不支持 position:fixed ....
tyx1703
2019-05-22 08:44:45 +08:00
@AZZERO 额,这只是一个测试 transform 可行性的例子,滑动那里我只是简单写了一下,要做的好,还得好好改进

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/566300

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX