[杂志般的设计] 推荐一个自己写的视差滚动网站( Parallax Scrolling),已开源

2016-03-16 18:48:42 +08:00
 Kamato

实时预览

点我查看

项目地址

github.com/panteng/rdio-copy

如果你觉得这个项目对你有意义,希望你star支持一下。

为什么会有这个项目

首先声明, Rdio 已经在 2015 年 11 月 23 日关闭,目前其官网rdio.com的内容已经发生改变。

Rdio 是啥?简单说就是类似于国内网易云音乐一类的在线听歌服务。

当我第一次进入 Rdio 官网的时候,我就被它新颖又简洁的设计迷住了,尤其是滚动时的视差效果,看起来真的很舒服。作为前端工程师的我就在想自己是否有能力复刻出一个同样的网站出来。所以我就开始了这个项目,目的是为了检验自己构建视差滚动网站的能力。

在开发过程中我遇到了一些棘手的问题,我在项目的 README 中把这些问题的解决方案做了简要的说明和分享。希望对大家有些参考意义。

需要说明的是,我只 Copy 了 Rdio 官网的设计, HTML 、 SASS 和 JS 代码都是我自己重写的。

欢迎 Star 或 Fork 或提 Issue 。

截图

2285 次点击
所在节点    问与答
6 条回复
saturnast
2016-03-16 18:51:32 +08:00
不错
gzelvis
2016-03-16 20:17:40 +08:00
不是响应式网站,差评(楼主别生气哈)
Kamato
2016-03-16 22:08:35 +08:00
@saturnast 感谢支持
Kamato
2016-03-16 22:08:51 +08:00
@gzelvis 感谢建议
WittBulter
2016-03-17 23:07:57 +08:00
看了会你的项目有点手痒- -看到好多库,我就也跟风写了个原生的插件..
哈哈
https://github.com/WittBulter/cool-scroll/
Kamato
2016-03-18 16:25:27 +08:00
@WittBulter 赞!

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

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

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

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

© 2021 V2EX