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

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

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

    作为一个前端爱好者,我平时喜欢看各种各样的网站,一是为了丰富自己,二也能看看现在网页可以做到什么地步。 今天我就带来几个最近发现的挺有意思的网站,我称它们是「有趣的灵魂」。

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

    ————

    1.https://www.cupnoodle.jp/uragawa/
    日本某著名包面,推荐这个是觉得不得不佩服设计师的想法,因为整个站并没用有用到 canvas,仅仅用了 background+opacity,就呈现了类似 iPhone 官网的效果,滑到下面叉子挑起泡面的那个,做的真的太棒了。

    2.https://yolele.com/
    某零食商城,英文站的优势就是字体文件小,一个好的字体包就能提升整个网站的美感,加上一个比较新颖的页面转场效果,体验是不是很棒?其实还有许多细节值得讲一下的,就比如滚动,这个站应该代理了滚动事件,用 translate 来代替滚动效果,好处就是滚动会变得跟用苹果触摸板一样丝滑,但是坏处也很明显,很多原生的方法和事件基本等于瘫痪了。

    3.https://blackmeal.com/
    还没整明白是做啥的站,但是做的很🐂🍺,话就多说了,自己体会吧。

    4.https://tailwindcss.com/
    tailwindcss,是最近越来越火的 css 框架了,我相信很多人应该打开过,但你也许跟平时看苹果官网一样没注意过细节,比如首屏的打字效果并不是视频。。之后的每个介绍里不光切换效果的动效每个都不一样,右面的代码也是跟着联动的。我觉得这可能也是为啥会火的原因之一。

    5.https://14islands.com/
    不用管这是干啥的,看就完事了。这绝对是我近些年来,见过的最心服口服的网站了。整个站跟 canvas 结合的天衣无缝,我相信任何一个前端打开都会被震惊,(也许也不一定,毕竟我还是个菜鸟),到目前我还没有研究透里面一些效果的实现方式。所以欢迎评论里讨论。

    好了这次就分享这些,如果你也跟我的爱好相同又不知道在哪能找到这些乱七八糟的站,我整理了一个(对我的导航) https://xxoo.link/inspiration-collection 都在这。 如果你比较懒,等我下次在分享吧。

    第 1 条附言  ·  2021-03-10 13:37:43 +08:00
    所以是没得聊?。。。
    31 条回复    2021-03-21 10:18:53 +08:00
    66beta
        1
    66beta  
       2021-03-10 10:43:39 +08:00
    想入行前端的话,我建议先研究下 http://www.csszengarden.com/
    qzhai
        2
    qzhai  
    OP
       2021-03-10 11:08:06 +08:00
    @66beta 入行第 5 年了。。。
    jingcoco
        3
    jingcoco  
       2021-03-10 12:14:20 +08:00
    被样式需求折腾的半死的苦手路过......................
    shuax
        4
    shuax  
       2021-03-10 12:58:13 +08:00   ❤️ 1
    http://sojo.im/
    有趣的灵魂
    easylee
        5
    easylee  
       2021-03-10 13:10:10 +08:00 via Android
    @shuax 页面顶部是最秀的


    Parse error: syntax error, unexpected T_STRING in D:\NPMserv\www\file\index.php on line 136
    wanguorui123
        6
    wanguorui123  
       2021-03-10 14:25:58 +08:00
    方便面很有创意
    xiaoqiao24
        7
    xiaoqiao24  
       2021-03-10 14:42:34 +08:00
    厉害
    icenya
        8
    icenya  
       2021-03-10 14:49:28 +08:00
    日本网站一个“通病”就是大量使用图片...当然这是作为非英文字体包的妥协...但是后果就是复制、翻译等功能都无法使用...因此对外国人使用观感极差(虽然人家本来也就是针对本国国民制作的 x )
    中国的话网页设计都比较“质朴”,舍弃了字体包...用的几乎都是黑体...所以显得千篇一律...字体真的很重要(这也是为什么咱在个人博客中引用了 36MB 字体包的原因( bushi ))!
    icenya
        9
    icenya  
       2021-03-10 14:52:03 +08:00
    @shuax 眼睛...炸掉了!!
    cairnechen
        10
    cairnechen  
       2021-03-10 14:52:16 +08:00
    @icenya 长久以来我个人的偏见,在有大量文字的网页使用衬线字体的都是 s13,使用艺术字体的尤其 s13
    TomatoYuyuko
        11
    TomatoYuyuko  
       2021-03-10 14:54:30 +08:00
    tailwind 上手需要疯狂查文档,可以预见熟练了会很好用。弊端是 class 会变得很臃肿,所以通常会自己封装变量,准备工作巨大,问题就是用这个的人太少了,工作不好交接,给别人随便改改全乱套了。个人感觉非常适合个人开发使用或者有明确规范的团队。希望 tailwind 的社区能丰富起来
    qzhai
        12
    qzhai  
    OP
       2021-03-10 15:05:20 +08:00
    @TomatoYuyuko class 会变得臃肿么 ? 咋跟我理解的不太一样
    TomatoYuyuko
        13
    TomatoYuyuko  
       2021-03-10 15:19:12 +08:00
    @qzhai 自己封装好就不会,直接拿文档的 class 选词填空会,我接过别人的项目,看得我头大,平均每个元素后面挂 5 6 个 class
    3x1415926535
        14
    3x1415926535  
       2021-03-10 15:23:38 +08:00
    @shuax 淦 我页面都关了 眼前还是红色的
    TomatoYuyuko
        15
    TomatoYuyuko  
       2021-03-10 15:24:32 +08:00
    @qzhai 借用知乎的一句话“Tailwind 适合 CSS 学得不好的人使用”,如果很喜欢自己定制 css,手撸 css,tailwind 用起来会很不自在。如果只是辅助框架使用,简单加加样式微调,tailwind 非常非常合适
    Reol
        16
    Reol  
       2021-03-10 15:54:19 +08:00
    帅啊 这几个网站
    lk920724
        17
    lk920724  
       2021-03-10 15:57:39 +08:00
    感谢分享,几个网站都挺不错的。顺便贴个网址有聚合的

    http://bm.straightline.jp
    misaka19000
        18
    misaka19000  
       2021-03-10 16:05:01 +08:00
    看这个

    https://www.yui540.graphics/
    qzhai
        19
    qzhai  
    OP
       2021-03-10 16:08:31 +08:00
    @TomatoYuyuko 我不认为,我之所以用这个最大的原因就是起名字太难了!!!! css 又没有命名空间之类的,这个很好地解决了这个问题。。。
    TomatoYuyuko
        20
    TomatoYuyuko  
       2021-03-10 16:19:12 +08:00
    @qzhai 2333 这倒是,不过 sass 一类的,基本可以实现命名空间相近的功能
    Hoshinokozo
        21
    Hoshinokozo  
       2021-03-10 16:22:09 +08:00
    一直想做一个类似的网站,然而根本没有机会。。入行以来工作一直在写后台管理系统,吐了,感觉国内的前端跟我认知中的前端完全不一样,所以我最近在自学 NODE,准备自己搞个类似的个人网站。
    qzhai
        22
    qzhai  
    OP
       2021-03-10 16:24:09 +08:00
    @Hoshinokozo 工作上基本上是不可能的,只能自己平时练习
    varzy
        23
    varzy  
       2021-03-10 16:27:59 +08:00
    感谢分享!

    我也分享一个。Why Notre-Dame Was a Tinderbox https://www.nytimes.com/interactive/2019/04/17/world/europe/notre-dame-cathedral-fire-spread.html
    zj9495
        24
    zj9495  
       2021-03-10 16:44:21 +08:00
    一直觉得很多欧美的网页 UI/UX 设计都特别出色
    whywhywhy
        25
    whywhywhy  
       2021-03-10 17:02:32 +08:00
    由于看过的网页太多,现在已经有阅读障碍了……
    Tianyan
        26
    Tianyan  
       2021-03-10 20:44:12 +08:00
    前端以后会不会被淘汰?
    qzhai
        27
    qzhai  
    OP
       2021-03-10 20:47:03 +08:00
    @Tianyan 会肯定会,只是时间问题,但是目前看来 web 技术应该会活的非常长远
    jkwc
        28
    jkwc  
       2021-03-11 14:00:43 +08:00
    @icenya 还有一个原因可能是授权,一般桌面版字体的授权是不允许嵌入到网站(做成 webfont )或 app 的,但做成图片就是在授权范围内的。webfont 要单独买授权比如按 PV 的订阅服务。
    Jinnn
        29
    Jinnn  
       2021-03-11 15:04:45 +08:00
    我也是前端,
    不过不懂设计, 所以就算知道实现方法也做不出好看的网站(可能要学点设计方面的?)
    icenya
        30
    icenya  
       2021-03-11 17:28:26 +08:00
    @jkwc 还有这种问题呀...以前都不知道的 x...
    uadw
        31
    uadw  
       2021-03-21 10:18:53 +08:00
    感谢分享!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2955 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:47 · PVG 22:47 · LAX 06:47 · JFK 09:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.