未分類
18 3 月 2021

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

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

資深大佬 : qzhai 12

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

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

————

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

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

3.https://blackmeal.com/
还没整明白是做啥的站，但是做的很

大佬有話說 (30)

  • 資深大佬 : 66beta

    想入行前端的话，我建议先研究下 http://www.csszengarden.com/

  • 主 資深大佬 : qzhai

    @66beta 入行第 5 年了。。。

  • 資深大佬 : jingcoco

    被样式需求折腾的半死的苦手路过………………….

  • 資深大佬 : shuax

    http://sojo.im/
    有趣的灵魂

  • 資深大佬 : easylee

    @shuax 页面顶部是最秀的

    Parse error: syntax error, unexpected T_STRING in D:NPMservwwwfileindex.php on line 136

  • 資深大佬 : wanguorui123

    方便面很有创意

  • 資深大佬 : xiaoqiao24

    厉害

  • 資深大佬 : icenya

    日本网站一个“通病”就是大量使用图片…当然这是作为非英文字体包的妥协…但是后果就是复制、翻译等功能都无法使用…因此对外国人使用观感极差（虽然人家本来也就是针对本国国民制作的 x ）
    中国的话网页设计都比较“质朴”，舍弃了字体包…用的几乎都是黑体…所以显得千篇一律…字体真的很重要（这也是为什么咱在个人博客中引用了 36MB 字体包的原因（ bushi ））！

  • 資深大佬 : icenya

    @shuax 眼睛…炸掉了！！

  • 資深大佬 : cairnechen

    @icenya 长久以来我个人的偏见，在有大量文字的网页使用衬线字体的都是 s13，使用艺术字体的尤其 s13

  • 資深大佬 : TomatoYuyuko

    tailwind 上手需要疯狂查文档，可以预见熟练了会很好用。弊端是 class 会变得很臃肿，所以通常会自己封装变量，准备工作巨大，问题就是用这个的人太少了，工作不好交接，给别人随便改改全乱套了。个人感觉非常适合个人开发使用或者有明确规范的团队。希望 tailwind 的社区能丰富起来

  • 主 資深大佬 : qzhai

    @TomatoYuyuko class 会变得臃肿么 ？ 咋跟我理解的不太一样

  • 資深大佬 : TomatoYuyuko

    @qzhai 自己封装好就不会，直接拿文档的 class 选词填空会，我接过别人的项目，看得我头大，平均每个元素后面挂 5 6 个 class

  • 資深大佬 : 3×1415926535

    @shuax 淦 我页面都关了 眼前还是红色的

  • 資深大佬 : TomatoYuyuko

    @qzhai 借用知乎的一句话“Tailwind 适合 CSS 学得不好的人使用”，如果很喜欢自己定制 css，手撸 css，tailwind 用起来会很不自在。如果只是辅助框架使用，简单加加样式微调，tailwind 非常非常合适

  • 資深大佬 : Reol

    帅啊 这几个网站

  • 資深大佬 : lk920724

    感谢分享，几个网站都挺不错的。顺便贴个网址有聚合的

    http://bm.straightline.jp

  • 資深大佬 : misaka19000

    看这个

    https://www.yui540.graphics/

  • 主 資深大佬 : qzhai

    @TomatoYuyuko 我不认为，我之所以用这个最大的原因就是起名字太难了！！！！ css 又没有命名空间之类的，这个很好地解决了这个问题。。。

  • 資深大佬 : TomatoYuyuko

    @qzhai 2333 这倒是，不过 sass 一类的，基本可以实现命名空间相近的功能

  • 資深大佬 : Hoshinokozo

    一直想做一个类似的网站，然而根本没有机会。。入行以来工作一直在写后台管理系统，吐了，感觉国内的前端跟我认知中的前端完全不一样，所以我最近在自学 NODE，准备自己搞个类似的个人网站。

  • 主 資深大佬 : qzhai

    @Hoshinokozo 工作上基本上是不可能的，只能自己平时练习

  • 資深大佬 : varzy

    感谢分享！

    我也分享一个。Why Notre-Dame Was a Tinderbox https://www.nytimes.com/interactive/2019/04/17/world/europe/notre-dame-cathedral-fire-spread.html

  • 資深大佬 : zj9495

    一直觉得很多欧美的网页 UI/UX 设计都特别出色

  • 資深大佬 : whywhywhy

    由于看过的网页太多，现在已经有阅读障碍了……

  • 資深大佬 : Tianyan

    前端以后会不会被淘汰？

  • 主 資深大佬 : qzhai

    @Tianyan 会肯定会，只是时间问题，但是目前看来 web 技术应该会活的非常长远

  • 資深大佬 : jkwc

    @icenya 还有一个原因可能是授权，一般桌面版字体的授权是不允许嵌入到网站（做成 webfont ）或 app 的，但做成图片就是在授权范围内的。webfont 要单独买授权比如按 PV 的订阅服务。

  • 資深大佬 : Jinnn

    我也是前端,
    不过不懂设计, 所以就算知道实现方法也做不出好看的网站(可能要学点设计方面的?)

  • 資深大佬 : icenya

    @jkwc 还有这种问题呀…以前都不知道的 x…