老哥们,这种酷炫的前端是怎么做的 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
ppzbreeze
V2EX    程序员

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

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

    网址是 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
    94
        41
    94  
       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 分钟。
    cocowind
        77
    cocowind  
       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
    感觉这样能唬得住客户。
    Wanex
        100
    Wanex  
       2020-08-15 16:05:58 +08:00
    虽然我打开挺快的,但是太卡了,卡出翔
    1  2  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1259 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 23:52 PVG 07:52 LAX 16:52 JFK 19:52
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86