V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qzhai
V2EX  ›  分享发现

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

  •  4
     
  •   qzhai · 2021-03-12 10:45:20 +08:00 · 1896 次点击
    这是一个创建于 1353 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我又来啦!上次分享了五个 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 就不放了。。差距太大了

    3 条回复    2021-03-12 15:50:07 +08:00
    66beta
        1
    66beta  
       2021-03-12 11:02:29 +08:00
    楼主这么喜欢花哨的网页设计,可以看看 https://www.smashingmagazine.com/
    Shook
        2
    Shook  
       2021-03-12 12:00:30 +08:00
    很不错,谢谢
    qzhai
        3
    qzhai  
    OP
       2021-03-12 15:50:07 +08:00
    @66beta 感谢分享
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2757 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 06:31 · PVG 14:31 · LAX 22:31 · JFK 01:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.