V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
ppzbreeze
V2EX  ›  程序员

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

  •  
  •   ppzbreeze · Aug 14, 2020 · 15545 views
    This topic created in 2083 days ago, the information mentioned may be changed or developed.

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

    110 replies    2020-08-17 14:01:47 +08:00
    1  2  
    whitehack
        1
    whitehack  
       Aug 14, 2020
    响应太慢, 放弃打开.

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

    这玩意儿也太大了。。。3.2M ,耗时 40+s,
    @wzq001 @ppzbreeze
    wzq001
        9
    wzq001  
       Aug 14, 2020
    @LifStge 不要优先怀疑自己网络。。。
    wzq001
        10
    wzq001  
       Aug 14, 2020
    可以参考下,阿里啥的,打开基本无感
    LifStge
        11
    LifStge  
       Aug 14, 2020
    @wzq001 哈哈 那改下 (电脑配置太低 默默的走开)
    wzq001
        12
    wzq001  
       Aug 14, 2020
    @LifStge 大佬,原谅我刚才没懂你的幽默。
    newmlp
        13
    newmlp  
       Aug 14, 2020
    都打不开,哪里酷炫了,辣鸡
    lzusunix
        14
    lzusunix  
       Aug 14, 2020
    网站不加载快点,用户都没有,要那么炫酷干嘛,半天都打不开
    morizawatt
        15
    morizawatt  
       Aug 14, 2020
    是模版改的,特别是中间插入的产品 p1 那张图,强插啊这是;而且插图这设计水准也设计不出这样的网页
    yylzcom
        16
    yylzcom  
       Aug 14, 2020
    为什么杭州阿里巴巴机房的在国内都打开这么慢
    3.72 分钟,按照常理,用户流失率 100%
    wzq001
        17
    wzq001  
       Aug 14, 2020
    @yylzcom 用户:什么小破站,又想骗我钱,哼~
    Biwood
        18
    Biwood  
       Aug 14, 2020   ❤️ 1
    老实说技术挺烂的,亮点在于 UX 设计,这个年代还能把网页写的这么卡也是不容易
    des
        19
    des  
       Aug 14, 2020   ❤️ 15
    炫酷?来看看这个?
    css 实现的哦
    http://www.species-in-pieces.com/#
    wellsc
        20
    wellsc  
       Aug 14, 2020
    不就是 svg
    darknoll
        21
    darknoll  
       Aug 14, 2020
    有没有其他炫酷的,多弄几个,我好选个抄下
    libook
        22
    libook  
       Aug 14, 2020   ❤️ 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  
       Aug 14, 2020
    2004年大学的时候用 AS 做出来的效果大概和这差不多,
    那时候有一个好听的名字叫富应用。
    gitjavascript
        24
    gitjavascript  
       Aug 14, 2020
    白色屏幕的动画么
    CallMeReznov
        25
    CallMeReznov  
       Aug 14, 2020
    这网站是不是被人打了,现在根本打不开..
    Sasasu
        26
    Sasasu  
       Aug 14, 2020   ❤️ 1
    learningman
        27
    learningman  
       Aug 14, 2020
    php 5.5.12 。。。
    然后还没开 gzip ?开了 gzip 也不至于卡这么久
    kanezeng
        28
    kanezeng  
       Aug 14, 2020   ❤️ 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/
    wa8n
        29
    wa8n  
       Aug 14, 2020
    @Sasasu #26 真担心她的小腰
    ciaoly
        30
    ciaoly  
       Aug 14, 2020 via Android   ❤️ 1
    https://github.com/impress/impress.js

    这个用前端制作幻灯片的动画库应该能胜任这种需求吧?
    efaun
        31
    efaun  
       Aug 14, 2020
    一分钟没打开,遂关闭,垃圾网站
    lepig
        32
    lepig  
       Aug 14, 2020
    白屏。 在炫酷 关我屁事
    5yyy
        33
    5yyy  
       Aug 14, 2020
    打开这个页面我电脑风扇直接起飞了:)
    kiracyan
        34
    kiracyan  
       Aug 14, 2020
    2.4M 的 JS 文件
    wizardoz
        35
    wizardoz  
       Aug 14, 2020
    好网址,可惜 nb 就快凉了
    lithbitren
        36
    lithbitren  
       Aug 14, 2020
    水管太小了吧,几十 k 的 jquery 都要四五秒
    chiu
        37
    chiu  
       Aug 14, 2020
    应该是我网太烂了。。。
    demonps
        38
    demonps  
       Aug 14, 2020   ❤️ 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  
       Aug 14, 2020   ❤️ 1
    看看这个
    Elasticsearch 的历史
    https://www.elastic.co/about/story-of-search
    Rwing
        40
    Rwing  
       Aug 14, 2020
    94
        41
    94  
       Aug 14, 2020
    加载 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  
       Aug 14, 2020
    @Sasasu 她咋一直扭啊
    aulay
        43
    aulay  
       Aug 14, 2020
    打不开
    wangyzj
        44
    wangyzj  
       Aug 14, 2020
    加载了一个 3m 的 js 和一个 1.3m 的 png
    rf99wSiT6IxH1Z23
        45
    rf99wSiT6IxH1Z23  
       Aug 14, 2020
    很水,
    1, 打开太慢,国内备案的,搞这样
    2,前端没有使用 error boundary, 或者 optional operator 么?{{content.list.1.label}} 都暴露出来了。

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

    有没有要来苏州工业园区创业的。。。
    zhensjoke
        59
    zhensjoke  
       Aug 14, 2020
    <html lang="fr">
    这是什么鬼....
    huwenzhe
        60
    huwenzhe  
       Aug 14, 2020
    JavaScript 框架
    GSAP

    Web 服务器
    Apache2.4.9

    JavaScript 图形
    three.js76

    编程语言
    PHP5.5.12

    操作系统
    Windows Server

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

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

    有图为证,我打开这个页面用了 3.1 分钟。
    cocowind
        77
    cocowind  
       Aug 14, 2020
    0.0 我为什么是秒开的.....开了 VPN.....
    lzuntalented
        78
    lzuntalented  
       Aug 14, 2020
    你看我这个如何 http://show.lzuntalented.cn/#/
    老实说,这个不难
    alphardex
        79
    alphardex  
       Aug 14, 2020 via iPhone
    这种我猜是拿 awwwards 上的网站改出来的吧,因为 awwwards 上的网站大多都很炫酷
    baoshuo
        80
    baoshuo  
       Aug 14, 2020
    ![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  
       Aug 14, 2020
    很酷炫,可是有啥用呢?花里胡哨
    volvo007
        82
    volvo007  
       Aug 14, 2020
    @whitehack 非常赞同……说实在的最近有点烦这种页面,那些网格动态计算太吃 cpu 了……
    Quadverse
        83
    Quadverse  
       Aug 14, 2020
    CPU 3.40GHz 内核 4 逻辑处理器 8
    长期占用 62%,整这些花里胡哨的东西不解决下性能问题怎么用?
    NewIPIsComing
        84
    NewIPIsComing  
       Aug 14, 2020
    彈窗提示: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  
       Aug 14, 2020
    看到楼上有人提到这个网站服务器选择的 Windows server,我就感觉网站打开慢很正常了,一开始想吐槽一下网站打开慢的。
    ShotaconXD
        86
    ShotaconXD  
       Aug 14, 2020
    虽然我打开挺快的, 但是说实话, 我 19 款 15 寸 MBP 有点卡... 所以这个意义何在.
    wolfan
        87
    wolfan  
       Aug 14, 2020
    也就是个背景有点酷而已,但其实华而不实,真实体验并不好。主要是占用 CPU 作些无用功,只是为了酷而酷的行为而已。
    FS1P7dJz
        88
    FS1P7dJz  
       Aug 14, 2020
    作为企业官网真的很不适合这样做
    ccraohng
        89
    ccraohng  
       Aug 14, 2020
    除去 背景线条交互, 主要是 gsap . 滚动我会用 scrollmagic 。
    这种网站只是拿出给公司自己看 而已。
    就产品来说, 好的交互动画应该体现在产品介绍, 而不是一些文字上下淡入淡出。
    ncepuzs
        90
    ncepuzs  
       Aug 14, 2020
    白屏时间太久,向下滚动太卡
    zengzixing
        91
    zengzixing  
       Aug 14, 2020
    tmd,打开个网页 10 多秒,滑动两下 cpu 占用直接百分之 80 多,还是八代 u
    Helsing
        92
    Helsing  
       Aug 14, 2020 via iPhone
    哪里酷了?还不如一些博客模版好看
    lqmrt
        93
    lqmrt  
       Aug 15, 2020 via iPhone
    动画有点 bug,一上一下就有文字重叠了
    LxExExl
        94
    LxExExl  
       Aug 15, 2020
    @des #19 这个是真的酷炫

    楼主发的 load 超过 1 分钟,Mac 触控板下滑的时候也没那么流畅
    fairytale110
        95
    fairytale110  
       Aug 15, 2020
    说加载慢的,这个,,,挂个翻出去的工具就秒开,,,
    wty
        96
    wty  
       Aug 15, 2020 via Android
    移动端没适配好,,,上下滑没反应,居然还得按按钮翻页,点了浏览器的打开电脑版反而正常了。。。另外翻一页就往浏览器的后退历史加一项,这个真的恶心
    puzzle9
        97
    puzzle9  
       Aug 15, 2020
    @Sasasu 这个是吧视频转成 canvas 了吗
    puzzle9
        98
    puzzle9  
       Aug 15, 2020
    感谢这个帖子 让我见识到了这种各样的大神发出了神奇百怪的 url
    lizhesystem
        99
    lizhesystem  
       Aug 15, 2020
    感觉这样能唬得住客户。
    Wanex
        100
    Wanex  
       Aug 15, 2020
    虽然我打开挺快的,但是太卡了,卡出翔
    1  2  
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1139 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 317ms · UTC 18:12 · PVG 02:12 · LAX 11:12 · JFK 14:12
    ♥ Do have faith in what you're doing.