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

前端菜鸟,想知道这个网站效果是如何实现的。

  •  
  •   kucy · 2019-07-03 17:39:36 +08:00 · 4285 次点击
    这是一个创建于 935 天前的主题,其中的信息可能已经有所发展或是发生改变。
    34 条回复    2019-09-28 02:00:37 +08:00
    shx1943
        1
    shx1943  
       2019-07-03 17:42:09 +08:00
    后端表示密集恐惧症很不舒服
    di1012
        2
    di1012  
       2019-07-03 17:43:13 +08:00
    看的恶心
    V2tizen
        3
    V2tizen  
       2019-07-03 17:44:41 +08:00
    一身鸡皮疙瘩 哈哈哈
    wolfan
        4
    wolfan  
       2019-07-03 17:46:32 +08:00   ❤️ 1
    最讨厌这种吃 CPU 的特效了。
    cheeto
        5
    cheeto  
       2019-07-03 17:51:05 +08:00
    一般这种要么是 webGL,要么就是 canvas
    Dogergo
        6
    Dogergo  
       2019-07-03 17:51:06 +08:00
    johnnyNg
        7
    johnnyNg  
       2019-07-03 17:53:55 +08:00
    webgl
    cheeto
        8
    cheeto  
       2019-07-03 17:54:39 +08:00
    @cheeto 可以看下 greensock.js 和 THREE.js 会有你想要的
    0x338
        9
    0x338  
       2019-07-03 18:00:39 +08:00
    threejs
    98jiang
        10
    98jiang  
       2019-07-03 18:14:03 +08:00
    看着不舒服。。。
    lizz666
        11
    lizz666  
       2019-07-03 18:20:18 +08:00
    我看有 canvas 标签
    murmur
        12
    murmur  
       2019-07-03 18:22:59 +08:00
    视觉恐惧症
    luob
        13
    luob  
       2019-07-03 18:27:30 +08:00
    body 下有一个 background portal,里面是个 canvas
    what runs 显示它用了 TweenMax
    Destiny97
        14
    Destiny97  
       2019-07-03 20:42:53 +08:00 via Android
    看着不舒服
    aulay
        15
    aulay  
       2019-07-03 20:49:37 +08:00 via Android
    aulay
        16
    aulay  
       2019-07-03 20:49:48 +08:00 via Android
    好丑
    ashong
        17
    ashong  
       2019-07-03 20:51:11 +08:00
    奇技淫巧
    loading
        18
    loading  
       2019-07-03 20:58:28 +08:00 via Android
    这行是最没技术含量的,因为很多就是直接下载的代码。
    loading
        19
    loading  
       2019-07-03 20:58:53 +08:00 via Android
    这些背景动画效果,很多现成的。
    rabbbit
        20
    rabbbit  
       2019-07-03 21:38:47 +08:00
    这种一般是 WebGL 写的,这里有很多.
    https://www.shadertoy.com/
    Senventise
        21
    Senventise  
       2019-07-03 21:41:25 +08:00 via Android
    引起不适…
    rabbbit
        22
    rabbbit  
       2019-07-03 21:43:15 +08:00
    又看了下,不像纯 shader.估计是在 Three.js 塞图片然后做变换.
    cnzzz
        23
    cnzzz  
       2019-07-03 21:50:43 +08:00
    很不舒服的感觉
    cheeto
        24
    cheeto  
       2019-07-03 22:36:16 +08:00   ❤️ 2
    我又仔细看了一下,发现大家都把重点放在首屏的背景上了,其实不然,https://madeinhaus.com/studio 关于公司员工介绍页的具体实现就很值得推敲,很多动画效果并非“开箱即用”,并不同意楼上 说的这行是最没技术含量的,此外我也查了一下这家公司,是一家创意公司,与 网飞,推特等很多国际大厂有过合作,怎么可能会给你现成的动画效果让你用?不要见了几个人的博客从网上扒几个 canvas 当背景就认为很容易做了,设计师的思路并没有现成的
    botian
        25
    botian  
       2019-07-03 23:17:54 +08:00 via Android
    尼玛,看图吐了
    wplct
        26
    wplct  
       2019-07-04 00:43:01 +08:00
    @cheeto #24 然后做了这么恶心人的效果么
    Trim21
        27
    Trim21  
       2019-07-04 01:00:18 +08:00
    挺有意思的...
    wingkai
        28
    wingkai  
       2019-07-04 03:14:42 +08:00 via iPhone
    这种抽象的万花筒背景,自己从零写的话,所需要的知识可以说基本脱离前端范畴
    jucelin
        29
    jucelin  
       2019-07-04 08:27:51 +08:00
    @cheeto #24 赞同。
    https://madeinhaus.com/work
    这里有大图,可能改善点。
    https://madeinhaus.com/studio
    这个页面的很多动效很有设计感。
    Heanes
        30
    Heanes  
       2019-07-04 10:32:09 +08:00
    有点炫酷
    jkmf
        31
    jkmf  
       2019-07-04 15:12:40 +08:00
    TweenMax
    wyz123723
        32
    wyz123723  
       2019-07-10 12:41:23 +08:00
    恶心死我了
    kucy
        33
    kucy  
    OP
       2019-07-11 09:20:47 +08:00
    感谢大佬们的反馈。我决定买把刀砍死我们的 UI 了
    lucky1990
        34
    lucky1990  
       2019-09-28 02:00:37 +08:00
    恶心死我了
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1229 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:26 · PVG 02:26 · LAX 10:26 · JFK 13:26
    ♥ Do have faith in what you're doing.