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

[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 就不放了。。差距太大了

[66beta]

楼主这么喜欢花哨的网页设计，可以看看 https://www.smashingmagazine.com/

[Shook]

很不错，谢谢

[qzhai]

@66beta 感谢分享