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

老哥们,这种酷炫的前端是怎么做的

  •  
  •   ppzbreeze · 2020-08-14 11:29:29 +08:00 · 13707 次点击
    这是一个创建于 1560 天前的主题,其中的信息可能已经有所发展或是发生改变。

    网址是 nbiot.com.cn 看了一下 F12,感觉有点复杂,是不是要单独设计个前端的结构才能做出来,还是说我的见识比较浅薄,这个并没有想象中的难 另外有类似的源码可以学习吗

    110 条回复    2020-08-17 14:01:47 +08:00
    1  2  
    whitehack
        1
    whitehack  
       2020-08-14 11:34:28 +08:00
    响应太慢, 放弃打开.

    再酷炫也没卵用..
    kkxxmei1tian886
        2
    kkxxmei1tian886  
       2020-08-14 11:36:29 +08:00
    确实很酷 ,打开太慢了
    casyalex
        3
    casyalex  
       2020-08-14 11:36:42 +08:00
    Canvas 应该是 webgl
    Hilong
        4
    Hilong  
       2020-08-14 11:38:29 +08:00
    d3.js three.js 可以看下
    wzq001
        5
    wzq001  
       2020-08-14 11:39:02 +08:00
    aegisho
        6
    aegisho  
       2020-08-14 11:40:10 +08:00
    three.js 了解一下
    LifStge
        7
    LifStge  
       2020-08-14 11:40:28 +08:00
    漆黑一片 ~(家里垃圾网络 默默走开)
    wzq001
        8
    wzq001  
       2020-08-14 11:40:39 +08:00
    强迫症建议优化下吧

    这玩意儿也太大了。。。3.2M ,耗时 40+s,
    @wzq001 @ppzbreeze
    wzq001
        9
    wzq001  
       2020-08-14 11:41:03 +08:00
    @LifStge 不要优先怀疑自己网络。。。
    wzq001
        10
    wzq001  
       2020-08-14 11:41:21 +08:00
    可以参考下,阿里啥的,打开基本无感
    LifStge
        11
    LifStge  
       2020-08-14 11:44:32 +08:00
    @wzq001 哈哈 那改下 (电脑配置太低 默默的走开)
    wzq001
        12
    wzq001  
       2020-08-14 11:45:39 +08:00
    @LifStge 大佬,原谅我刚才没懂你的幽默。
    newmlp
        13
    newmlp  
       2020-08-14 11:46:51 +08:00
    都打不开,哪里酷炫了,辣鸡
    lzusunix
        14
    lzusunix  
       2020-08-14 11:52:01 +08:00
    网站不加载快点,用户都没有,要那么炫酷干嘛,半天都打不开
    morizawatt
        15
    morizawatt  
       2020-08-14 11:53:37 +08:00
    是模版改的,特别是中间插入的产品 p1 那张图,强插啊这是;而且插图这设计水准也设计不出这样的网页
    yylzcom
        16
    yylzcom  
       2020-08-14 11:58:51 +08:00
    为什么杭州阿里巴巴机房的在国内都打开这么慢
    3.72 分钟,按照常理,用户流失率 100%
    wzq001
        17
    wzq001  
       2020-08-14 12:00:21 +08:00
    @yylzcom 用户:什么小破站,又想骗我钱,哼~
    Biwood
        18
    Biwood  
       2020-08-14 12:06:25 +08:00   ❤️ 1
    老实说技术挺烂的,亮点在于 UX 设计,这个年代还能把网页写的这么卡也是不容易
    des
        19
    des  
       2020-08-14 12:08:32 +08:00   ❤️ 15
    炫酷?来看看这个?
    css 实现的哦
    http://www.species-in-pieces.com/#
    wellsc
        20
    wellsc  
       2020-08-14 12:13:51 +08:00
    不就是 svg
    darknoll
        21
    darknoll  
       2020-08-14 12:21:38 +08:00
    有没有其他炫酷的,多弄几个,我好选个抄下
    libook
        22
    libook  
       2020-08-14 12:23:12 +08:00   ❤️ 2
    Animation 教程: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations
    Canvas 教程: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
    WebGL 教程: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial

    了解基础知识后可以尝试找一些 H5 动画框架,其他楼提到了一些。

    另外一些专业动画制作软件可以用来做 H5 动画,比如 Adobe Animate,以及一些游戏引擎可以做 H5 游戏(或交互动画效果)如 Unity 。
    encro
        23
    encro  
       2020-08-14 13:56:22 +08:00
    2004年大学的时候用 AS 做出来的效果大概和这差不多,
    那时候有一个好听的名字叫富应用。
    gitjavascript
        24
    gitjavascript  
       2020-08-14 14:00:03 +08:00
    白色屏幕的动画么
    CallMeReznov
        25
    CallMeReznov  
       2020-08-14 14:00:35 +08:00
    这网站是不是被人打了,现在根本打不开..
    Sasasu
        26
    Sasasu  
       2020-08-14 14:02:50 +08:00   ❤️ 1
    learningman
        27
    learningman  
       2020-08-14 14:09:57 +08:00
    php 5.5.12 。。。
    然后还没开 gzip ?开了 gzip 也不至于卡这么久
    kanezeng
        28
    kanezeng  
       2020-08-14 14:10:12 +08:00   ❤️ 22
    如果你打开它的页面代码,会看到如下一段:
    var ssss={
    "meta": {
    "title": "La solution concrète pour votre veille internet stratégique et d’influence",
    "description": "Les experts de Reputation Squad proposent une solution de veille internet sur mesure pour répondre à vos objectifs de communication et d’influence.",
    "share": "Partager"
    },

    根据 title 字段 google 一下,你就能找到原版: http://veille.reputationsquad.com/
    wangsongyan
        29
    wangsongyan  
       2020-08-14 14:12:56 +08:00
    @Sasasu #26 真担心她的小腰
    ciaoly
        30
    ciaoly  
       2020-08-14 14:13:32 +08:00 via Android   ❤️ 1
    https://github.com/impress/impress.js

    这个用前端制作幻灯片的动画库应该能胜任这种需求吧?
    efaun
        31
    efaun  
       2020-08-14 14:18:10 +08:00
    一分钟没打开,遂关闭,垃圾网站
    lepig
        32
    lepig  
       2020-08-14 14:19:10 +08:00
    白屏。 在炫酷 关我屁事
    5yyy
        33
    5yyy  
       2020-08-14 14:24:57 +08:00
    打开这个页面我电脑风扇直接起飞了:)
    kiracyan
        34
    kiracyan  
       2020-08-14 14:28:12 +08:00
    2.4M 的 JS 文件
    wizardoz
        35
    wizardoz  
       2020-08-14 14:30:56 +08:00
    好网址,可惜 nb 就快凉了
    lithbitren
        36
    lithbitren  
       2020-08-14 14:31:07 +08:00
    水管太小了吧,几十 k 的 jquery 都要四五秒
    chiu
        37
    chiu  
       2020-08-14 14:35:09 +08:00
    应该是我网太烂了。。。
    demonps
        38
    demonps  
       2020-08-14 14:38:44 +08:00   ❤️ 1
    google chrome 插件 Wappalyzer 给的结果:

    JavaScript 框架: GSAP;
    编程语言: PHP 5.5.12;
    Web 服务器: Apache 2.4.9;
    操作系统: Windows Server;
    JavaScript 图形: three.js;
    JavaScript 库: jQurery 2.0.0;
    zhuangzhuang1988
        39
    zhuangzhuang1988  
       2020-08-14 14:46:18 +08:00   ❤️ 1
    看看这个
    Elasticsearch 的历史
    https://www.elastic.co/about/story-of-search
    Rwing
        40
    Rwing  
       2020-08-14 14:49:40 +08:00
    dfkjgklfdjg
        41
    dfkjgklfdjg  
       2020-08-14 14:57:45 +08:00
    加载 3.2M ,白了快 2min,要不是我挺好奇的肯定就关了,有个 loading 动画也好啊.....(小声逼逼买的阿里云啥小水管)

    用到的东西能看出的用到了 ThreeJS 、jQuery,动画来源是 GSAP
    但是我不知道他 jQuery 是用来干嘛的,可能后期强行加上去的吧...
    盲猜不知道哪里找来的摸板(可能从 GSAP 买的?),很多东西都没改过来,我觉得源站应该是一个法国公司。

    同类型的还有挺多的,我提供几个?
    https://www.sterling.it/
    https://voltfordrive.com/
    https://www.orano.group/experience/innovation/en
    hmxxmh
        42
    hmxxmh  
       2020-08-14 15:00:57 +08:00
    @Sasasu 她咋一直扭啊
    aulay
        43
    aulay  
       2020-08-14 15:01:05 +08:00
    打不开
    wangyzj
        44
    wangyzj  
       2020-08-14 15:05:55 +08:00
    加载了一个 3m 的 js 和一个 1.3m 的 png
    rf99wSiT6IxH1Z23
        45
    rf99wSiT6IxH1Z23  
       2020-08-14 15:08:57 +08:00
    很水,
    1, 打开太慢,国内备案的,搞这样
    2,前端没有使用 error boundary, 或者 optional operator 么?{{content.list.1.label}} 都暴露出来了。

    技术栈的话,
    前端 jquery + Three.js , 后端 php, apache, 居然还是 windows server
    soulvision
        46
    soulvision  
       2020-08-14 15:19:44 +08:00
    第一反应就是 three.js
    mightofcode
        47
    mightofcode  
       2020-08-14 15:23:47 +08:00
    卡死 0 分
    differentPlayer
        48
    differentPlayer  
       2020-08-14 15:27:04 +08:00
    加载 5 分钟。。
    laminux29
        49
    laminux29  
       2020-08-14 15:29:01 +08:00
    flash web 的时代,网页上能直接做 3D 机器人对战。
    anjianshi
        50
    anjianshi  
       2020-08-14 15:35:22 +08:00
    真的是太慢啦
    leftstick
        51
    leftstick  
       2020-08-14 15:50:11 +08:00
    @kanezeng 你才是真正的王者
    wee911
        52
    wee911  
       2020-08-14 15:50:28 +08:00
    效果真的卡, 加载是真的特别的慢, 也就产品自己打开看看了
    oma1989
        53
    oma1989  
       2020-08-14 15:50:34 +08:00
    体验太差, 一卡一卡的
    11Eleven
        54
    11Eleven  
       2020-08-14 15:50:45 +08:00
    徒增功耗的感觉,在简单易用和美观之间要平衡要取舍吧
    yuankui
        55
    yuankui  
       2020-08-14 16:08:30 +08:00
    卡的一批。。
    qqqqqcy
        56
    qqqqqcy  
       2020-08-14 16:21:05 +08:00
    一个 bundle.js 加载了 40+ 秒,实现的效果也没看出什么酷炫。无非是一堆线乱飞,简直意义不明。硬要做用 canvas 也不至于这么卡把
    P233
        57
    P233  
       2020-08-14 16:21:19 +08:00
    只有我一个人觉得这是个套模板的网站吗?
    goldenalex
        58
    goldenalex  
       2020-08-14 16:21:27 +08:00
    看上去公司不错啊。。。

    有没有要来苏州工业园区创业的。。。
    zhensjoke
        59
    zhensjoke  
       2020-08-14 16:26:19 +08:00
    <html lang="fr">
    这是什么鬼....
    huwenzhe
        60
    huwenzhe  
       2020-08-14 16:27:22 +08:00
    JavaScript 框架
    GSAP

    Web 服务器
    Apache2.4.9

    JavaScript 图形
    three.js76

    编程语言
    PHP5.5.12

    操作系统
    Windows Server

    JavaScript 库
    jQuery2.0.0
    wiken
        61
    wiken  
       2020-08-14 16:31:49 +08:00
    等了一年都没加载出来,放弃了
    ppzbreeze
        62
    ppzbreeze  
    OP
       2020-08-14 16:37:12 +08:00
    @kanezeng 强!!!
    morethansean
        63
    morethansean  
       2020-08-14 16:37:42 +08:00
    @yylzcom 如果是 1mbps 的套餐,那 3.2M 确实要下载半分钟以上 😂
    ppzbreeze
        64
    ppzbreeze  
    OP
       2020-08-14 16:40:30 +08:00
    @wizardoz 为什么 NB 就快凉了呢
    ppzbreeze
        65
    ppzbreeze  
    OP
       2020-08-14 16:41:14 +08:00
    @P233 哈哈,确实是,上面有个老哥找到了原版
    ashong
        66
    ashong  
       2020-08-14 16:55:55 +08:00
    1 分钟都未能加载, 这是干嘛用的?
    SomeoneElseChild
        67
    SomeoneElseChild  
       2020-08-14 17:14:34 +08:00
    @kanezeng 牛逼
    iwasthere
        68
    iwasthere  
       2020-08-14 17:20:13 +08:00
    抄下😄
    azh7138m
        69
    azh7138m  
       2020-08-14 17:38:54 +08:00
    @yylzcom
    > 为什么杭州阿里巴巴机房的在国内都打开这么慢

    因为站长开的带宽小,开个 35G 带宽的实例就不会这么慢了(
    ydpro
        70
    ydpro  
       2020-08-14 17:42:14 +08:00
    这打开也太慢了,客户流失率 100%
    hikari2
        71
    hikari2  
       2020-08-14 17:43:09 +08:00
    这网速我还以为网站被墙了呢
    Vegetable
        72
    Vegetable  
       2020-08-14 17:45:33 +08:00
    可以,我这里已经加载超过十万毫秒了,关了关了
    jarnanchen
        73
    jarnanchen  
       2020-08-14 17:53:13 +08:00
    好卡,大可不必这么复杂
    miniwade514
        74
    miniwade514  
       2020-08-14 17:57:36 +08:00
    我以为网断了
    getElementBy1d
        75
    getElementBy1d  
       2020-08-14 18:02:51 +08:00
    加载了两分半
    wxsm
        76
    wxsm  
       2020-08-14 18:03:36 +08:00 via iPhone
    ![dPN8PJ.png]( https://s1.ax1x.com/2020/08/14/dPN8PJ.png)

    有图为证,我打开这个页面用了 3.1 分钟。
    sss495088732
        77
    sss495088732  
       2020-08-14 18:18:12 +08:00
    0.0 我为什么是秒开的.....开了 VPN.....
    lzuntalented
        78
    lzuntalented  
       2020-08-14 19:15:47 +08:00
    你看我这个如何 http://show.lzuntalented.cn/#/
    老实说,这个不难
    alphardex
        79
    alphardex  
       2020-08-14 19:47:49 +08:00 via iPhone
    这种我猜是拿 awwwards 上的网站改出来的吧,因为 awwwards 上的网站大多都很炫酷
    baoshuo
        80
    baoshuo  
       2020-08-14 19:57:56 +08:00
    ![image.png]( https://i.loli.net/2020/08/14/vBKNGQtJdqZ7Wwm.png)

    打开自动弹出翻译,F12 一下发现以下代码

    ![image.png]( https://i.loli.net/2020/08/14/CwmfKZlrUWjDSx2.png)

    我觉得是改的时候没改好
    Szhi
        81
    Szhi  
       2020-08-14 20:12:00 +08:00
    很酷炫,可是有啥用呢?花里胡哨
    volvo007
        82
    volvo007  
       2020-08-14 20:41:33 +08:00
    @whitehack 非常赞同……说实在的最近有点烦这种页面,那些网格动态计算太吃 cpu 了……
    Quadverse
        83
    Quadverse  
       2020-08-14 20:51:48 +08:00
    CPU 3.40GHz 内核 4 逻辑处理器 8
    长期占用 62%,整这些花里胡哨的东西不解决下性能问题怎么用?
    NewIPIsComing
        84
    NewIPIsComing  
       2020-08-14 21:01:24 +08:00
    彈窗提示:No OES_texture_float support for float textures!

    Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0
    YaakovZiv
        85
    YaakovZiv  
       2020-08-14 21:34:15 +08:00
    看到楼上有人提到这个网站服务器选择的 Windows server,我就感觉网站打开慢很正常了,一开始想吐槽一下网站打开慢的。
    ShotaconXD
        86
    ShotaconXD  
       2020-08-14 21:48:10 +08:00
    虽然我打开挺快的, 但是说实话, 我 19 款 15 寸 MBP 有点卡... 所以这个意义何在.
    wolfan
        87
    wolfan  
       2020-08-14 21:52:34 +08:00
    也就是个背景有点酷而已,但其实华而不实,真实体验并不好。主要是占用 CPU 作些无用功,只是为了酷而酷的行为而已。
    FS1P7dJz
        88
    FS1P7dJz  
       2020-08-14 22:14:38 +08:00
    作为企业官网真的很不适合这样做
    ccraohng
        89
    ccraohng  
       2020-08-14 23:03:29 +08:00
    除去 背景线条交互, 主要是 gsap . 滚动我会用 scrollmagic 。
    这种网站只是拿出给公司自己看 而已。
    就产品来说, 好的交互动画应该体现在产品介绍, 而不是一些文字上下淡入淡出。
    ncepuzs
        90
    ncepuzs  
       2020-08-14 23:18:17 +08:00
    白屏时间太久,向下滚动太卡
    zengzixing
        91
    zengzixing  
       2020-08-14 23:38:55 +08:00
    tmd,打开个网页 10 多秒,滑动两下 cpu 占用直接百分之 80 多,还是八代 u
    Helsing
        92
    Helsing  
       2020-08-14 23:44:57 +08:00 via iPhone
    哪里酷了?还不如一些博客模版好看
    lqmrt
        93
    lqmrt  
       2020-08-15 01:00:45 +08:00 via iPhone
    动画有点 bug,一上一下就有文字重叠了
    LxExExl
        94
    LxExExl  
       2020-08-15 02:52:44 +08:00
    @des #19 这个是真的酷炫

    楼主发的 load 超过 1 分钟,Mac 触控板下滑的时候也没那么流畅
    fairytale110
        95
    fairytale110  
       2020-08-15 10:02:06 +08:00
    说加载慢的,这个,,,挂个翻出去的工具就秒开,,,
    wty
        96
    wty  
       2020-08-15 12:46:14 +08:00 via Android
    移动端没适配好,,,上下滑没反应,居然还得按按钮翻页,点了浏览器的打开电脑版反而正常了。。。另外翻一页就往浏览器的后退历史加一项,这个真的恶心
    puzzle9
        97
    puzzle9  
       2020-08-15 13:25:01 +08:00
    @Sasasu 这个是吧视频转成 canvas 了吗
    puzzle9
        98
    puzzle9  
       2020-08-15 13:26:49 +08:00
    感谢这个帖子 让我见识到了这种各样的大神发出了神奇百怪的 url
    lizhesystem
        99
    lizhesystem  
       2020-08-15 15:40:57 +08:00
    感觉这样能唬得住客户。
    Mexion
        100
    Mexion  
       2020-08-15 16:05:58 +08:00
    虽然我打开挺快的,但是太卡了,卡出翔
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1085 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 22:43 · PVG 06:43 · LAX 14:43 · JFK 17:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.