V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
AZZERO
V2EX  ›  问与答

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

  •  
  •   AZZERO · 2019-05-21 18:00:03 +08:00 · 1870 次点击
    这是一个创建于 2036 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    swiper demo

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

    简单写了一下。ios 下面橡皮筋效果导致并不怎么好用。。
    AZZERO
        5
    AZZERO  
    OP
       2019-05-21 22:55:27 +08:00
    @tyx1703 感谢大佬, 但是 这个滚动几乎不可用啊,我发现了一个库: https://github.com/Prinzhorn/skrollr 但是文档里 Mobile support 说不支持 position:fixed ....
    tyx1703
        6
    tyx1703  
       2019-05-22 08:44:45 +08:00 via iPhone
    @AZZERO 额,这只是一个测试 transform 可行性的例子,滑动那里我只是简单写了一下,要做的好,还得好好改进
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5820 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 146ms · UTC 07:26 · PVG 15:26 · LAX 23:26 · JFK 02:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.