你有多久没有认认真真的看过网页了「2」

2021-03-12 10:45:20 +08:00
 qzhai

我又来啦!上次分享了五个 https://www.v2ex.com/t/760230 虽然回复不多,但是收藏不少,所以我觉得还是有部分人跟我的爱好是差不多的。所以周五了,这个最好摸鱼的时间。再分享几个挺有意思的网站(有趣的灵魂)。

观看提示:
都是些 PC 站。
需要能链接到谷歌,因为有的站用了谷歌的服务。
并非 NSFW,可放心打开。
如果你也是个前端,建议看的时候先想一下实现原理在查看源码。

————

1.https://mad.ac/
首先还是一个创意满满的网站,上来就把所有看起来乱七八糟的东西放在一个桌面上,其实都是些官网常见的功能,很有创意,再仔细研究会发现这个站貌似是一个单页面应用,页面跳转很平滑,返回也有对应的动效,而且是响应式的。

2.https://cuberto.com/services/
这个站乍一看或者对比之前分享的你可能会觉得一般,但其实是暗藏玄机的,除了之前有介绍过的滚动效果,仔细看滚动中的图片,加了一个遮罩视察,右上角导航按钮的 hover 效果,触感是不是拿捏得死死的。对于前端来说想实现这些效果并不难,难得就是恰到好处的感觉,(因为我也写过一个类似的效果。。就是调不出来它这种 feel )。

3.https://cannesprlions.com/lionsnews/
🐂🍺站,话不多。这种站是我连 demo 都做不出来的。。

4.https://polygondesign.com.au/
这个也是。。。但你仔细看源码你会发现,这种花里胡哨特效虽然都依靠 canvas,但又都不全依靠 canvas,都会跟 html 做结合的。

5.https://antara.studio/
这个站的滚动也是,因为代理滚动事件,所以开始可以做高斯模糊。不然在真实的滚动中这么大的高斯模糊是一定会露马脚的。

好了这是今日份分享。
虽然在国内整这些好像没啥用,但因为喜欢。
关于滚动我再分享一个框架。
https://locomotivemtl.github.io/locomotive-scroll/
用这个可以轻松实现以上网页里那种滚动效果。
第二个站的按钮效果可以参考
https://tympanus.net/Development/MagneticButtons/

我自己写的 demo 就不放了。。差距太大了

1911 次点击
所在节点    分享发现
3 条回复
66beta
2021-03-12 11:02:29 +08:00
楼主这么喜欢花哨的网页设计,可以看看 https://www.smashingmagazine.com/
Shook
2021-03-12 12:00:30 +08:00
很不错,谢谢
qzhai
2021-03-12 15:50:07 +08:00
@66beta 感谢分享

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

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

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

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

© 2021 V2EX