• 请不要在回答技术问题时复制粘贴 AI 生成的内容
ppzbreeze
V2EX  ›  程序员

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

  •  
  •   ppzbreeze · Aug 14, 2020 · 16661 views
    This topic created in 2272 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
    whitehack
    Aug 14, 2020
    1
    响应太慢, 放弃打开.

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

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

    这个用前端制作幻灯片的动画库应该能胜任这种需求吧?
    efaun
    efaun
    Aug 14, 2020
    31
    一分钟没打开,遂关闭,垃圾网站
    lepig
    lepig
    Aug 14, 2020
    32
    白屏。 在炫酷 关我屁事
    5yyy
    5yyy
    Aug 14, 2020
    33
    打开这个页面我电脑风扇直接起飞了:)
    kiracyan
    kiracyan
    Aug 14, 2020
    34
    2.4M 的 JS 文件
    wizardoz
    wizardoz
    Aug 14, 2020
    35
    好网址,可惜 nb 就快凉了
    lithbitren
    lithbitren
    Aug 14, 2020
    36
    水管太小了吧,几十 k 的 jquery 都要四五秒
    chiu
    chiu
    Aug 14, 2020
    37
    应该是我网太烂了。。。
    demonps
    demonps
    Aug 14, 2020❤️1
    38
    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
    zhuangzhuang1988
    Aug 14, 2020❤️1
    39
    看看这个
    Elasticsearch 的历史
    https://www.elastic.co/about/story-of-search
    Rwing
    Rwing
    Aug 14, 2020
    40
    94
    94
    Aug 14, 2020
    41
    加载 3.2M ,白了快 2min,要不是我挺好奇的肯定就关了,有个 loading 动画也好啊.....(小声逼逼买的阿里云啥小水管)

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

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

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

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

    Web 服务器
    Apache2.4.9

    JavaScript 图形
    three.js76

    编程语言
    PHP5.5.12

    操作系统
    Windows Server

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

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

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

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

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

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

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

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