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

• 資深大佬 : whitehack

  响应太慢, 放弃打开.

  再酷炫也没卵用..

• 資深大佬 : kkxxmei1tian886

  确实很酷 ，打开太慢了

• 資深大佬 : casyalex

  Canvas 应该是 webgl

• 資深大佬 : Hilong

  d3.js three.js 可以看下

• 資深大佬 : wzq001

  http://nbiot.com.cn/other/bundle.js

• 資深大佬 : aegisho

  three.js 了解一下

• 資深大佬 : LifStge

  漆黑一片 ~(家里垃圾网络 默默走开)

• 資深大佬 : wzq001

  强迫症建议优化下吧

  这玩意儿也太大了。。。3.2M ，耗时 40+s，
  @wzq001 @ppzbreeze

• 資深大佬 : wzq001

  @LifStge 不要优先怀疑自己网络。。。

• 資深大佬 : wzq001

  可以参考下，阿里啥的，打开基本无感

• 資深大佬 : LifStge

  @wzq001 哈哈 那改下 (电脑配置太低 默默的走开)

• 資深大佬 : wzq001

  @LifStge 大佬，原谅我刚才没懂你的幽默。

• 資深大佬 : newmlp

  都打不开，哪里酷炫了，辣鸡

• 資深大佬 : lzusunix

  网站不加载快点，用户都没有，要那么炫酷干嘛，半天都打不开

• 資深大佬 : morizawatt

  是模版改的，特别是中间插入的产品 p1 那张图，强插啊这是；而且插图这设计水准也设计不出这样的网页

• 資深大佬 : yylzcom

  为什么杭州阿里巴巴机房的在国内都打开这么慢
  3.72 分钟，按照常理，用户流失率 100%

• 資深大佬 : wzq001

  @yylzcom 用户：什么小破站，又想骗我钱，哼~

• 資深大佬 : Biwood

  老实说技术挺烂的，亮点在于 UX 设计，这个年代还能把网页写的这么卡也是不容易

• 資深大佬 : des

  炫酷？来看看这个？
  css 实现的哦
  http://www.species-in-pieces.com/#

• 資深大佬 : wellsc

  不就是 svg

• 資深大佬 : darknoll

  有没有其他炫酷的，多弄几个，我好选个抄下

• 資深大佬 : libook

  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

  ２００４年大学的时候用 AS 做出来的效果大概和这差不多，
  那时候有一个好听的名字叫富应用。

• 資深大佬 : gitjavascript

  白色屏幕的动画么

• 資深大佬 : CallMeReznov

  这网站是不是被人打了,现在根本打不开..

• 資深大佬 : Sasasu

  https://sasasu.gitee.io/mmdplayer-web/

  这种也算酷绚吧

• 資深大佬 : learningman

  php 5.5.12 。。。
  然后还没开 gzip ？开了 gzip 也不至于卡这么久

• 資深大佬 : kanezeng

  如果你打开它的页面代码，会看到如下一段：
  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

  @Sasasu #26 真担心她的小腰

• 資深大佬 : ciaoly

  https://github.com/impress/impress.js

  这个用前端制作幻灯片的动画库应该能胜任这种需求吧？

• 資深大佬 : efaun

  一分钟没打开，遂关闭，垃圾网站

• 資深大佬 : lepig

  白屏。 在炫酷 关我屁事

• 資深大佬 : 5yyy

  打开这个页面我电脑风扇直接起飞了：）

• 資深大佬 : kiracyan

  2.4M 的 JS 文件

• 資深大佬 : wizardoz

  好网址，可惜 nb 就快凉了

• 資深大佬 : lithbitren

  水管太小了吧，几十 k 的 jquery 都要四五秒

• 資深大佬 : chiu

  应该是我网太烂了。。。

• 資深大佬 : demonps

  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

  看看这个
  Elasticsearch 的历史
  https://www.elastic.co/about/story-of-search

• 資深大佬 : Rwing

  @kanezeng 666

• 資深大佬 : dfkjgklfdjg

  加载 3.2M ，白了快 2min，要不是我挺好奇的肯定就关了，有个 loading 动画也好啊…..（小声逼逼买的阿里云啥小水管）

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

  同类型的还有挺多的，我提供几个？
  https://www.sterling.it/
  https://voltfordrive.com/
  https://www.orano.group/experience/innovation/en

• 資深大佬 : hmxxmh

  @Sasasu 她咋一直扭啊

• 資深大佬 : aulay

  打不开

• 資深大佬 : wangyzj

  加载了一个 3m 的 js 和一个 1.3m 的 png

• 資深大佬 : cnscorpions

  很水，
  1， 打开太慢，国内备案的，搞这样
  2，前端没有使用 error boundary, 或者 optional operator 么？{{content.list.1.label}} 都暴露出来了。

  技术栈的话，
  前端 jquery + Three.js ， 后端 php, apache, 居然还是 windows server

• 資深大佬 : soulvision

  第一反应就是 three.js

• 資深大佬 : mightofcode

  卡死 0 分

• 資深大佬 : differentPlayer

  加载 5 分钟。。

• 資深大佬 : laminux29

  flash web 的时代，网页上能直接做 3D 机器人对战。

• 資深大佬 : anjianshi

  真的是太慢啦

• 資深大佬 : leftstick

  @kanezeng 你才是真正的王者

• 資深大佬 : wee911

  效果真的卡， 加载是真的特别的慢， 也就产品自己打开看看了

• 資深大佬 : oma1989

  体验太差， 一卡一卡的

• 資深大佬 : 11Eleven

  徒增功耗的感觉，在简单易用和美观之间要平衡要取舍吧

• 資深大佬 : yuankui

  卡的一批。。

• 資深大佬 : qqqqqcy

  一个 bundle.js 加载了 40+ 秒，实现的效果也没看出什么酷炫。无非是一堆线乱飞，简直意义不明。硬要做用 canvas 也不至于这么卡把

• 資深大佬 : P233

  只有我一个人觉得这是个套模板的网站吗？

• 資深大佬 : goldenalex

  看上去公司不错啊。。。

  有没有要来苏州工业园区创业的。。。

• 資深大佬 : zhensjoke

  <html lang=”fr”>
  这是什么鬼….

• 資深大佬 : huwenzhe

  JavaScript 框架
  GSAP

  Web 服务器
  Apache2.4.9

  JavaScript 图形
  three.js76

  编程语言
  PHP5.5.12

  操作系统
  Windows Server

  JavaScript 库
  jQuery2.0.0

• 資深大佬 : wiken

  等了一年都没加载出来，放弃了

• 主 資深大佬 : ppzbreeze

  @kanezeng 强！！！

• 資深大佬 : morethansean

  @yylzcom 如果是 1mbps 的套餐，那 3.2M 确实要下载半分钟以上

• 主 資深大佬 : ppzbreeze

  @wizardoz 为什么 NB 就快凉了呢

• 主 資深大佬 : ppzbreeze

  @P233 哈哈，确实是，上面有个老哥找到了原版

• 資深大佬 : ashong

  1 分钟都未能加载， 这是干嘛用的？

• 資深大佬 : SomeoneElseChild

  @kanezeng 牛逼

• 資深大佬 : iwasthere

  抄下

• 資深大佬 : azh7138m

  @yylzcom
  > 为什么杭州阿里巴巴机房的在国内都打开这么慢

  因为站长开的带宽小，开个 35G 带宽的实例就不会这么慢了（

• 資深大佬 : ydpro

  这打开也太慢了，客户流失率 100%

• 資深大佬 : hikari2

  这网速我还以为网站被墙了呢

• 資深大佬 : Vegetable

  可以，我这里已经加载超过十万毫秒了，关了关了

• 資深大佬 : jarnanchen

  好卡,大可不必这么复杂

• 資深大佬 : miniwade514

  我以为网断了

• 資深大佬 : getElementBy1d

  加载了两分半

• 資深大佬 : wxsm

  

  有图为证，我打开这个页面用了 3.1 分钟。

• 資深大佬 : sss495088732

  0.0 我为什么是秒开的…..开了 VPN…..

• 資深大佬 : lzuntalented

  你看我这个如何 http://show.lzuntalented.cn/#/
  老实说，这个不难

• 資深大佬 : alphardex

  这种我猜是拿 awwwards 上的网站改出来的吧，因为 awwwards 上的网站大多都很炫酷

• 資深大佬 : baoshuo

  

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

  

  我觉得是改的时候没改好

• 資深大佬 : Szhi

  很酷炫，可是有啥用呢？花里胡哨

• 資深大佬 : volvo007

  @whitehack 非常赞同……说实在的最近有点烦这种页面，那些网格动态计算太吃 cpu 了……

• 資深大佬 : Quadverse

  CPU 3.40GHz 内核 4 逻辑处理器 8
  长期占用 62%，整这些花里胡哨的东西不解决下性能问题怎么用？

• 資深大佬 : NewIPIsComing

  彈窗提示：No OES_texture_float support for float textures!

  Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

• 資深大佬 : YaakovZiv

  看到上有人提到这个网站服务器选择的 Windows server，我就感觉网站打开慢很正常了，一开始想吐槽一下网站打开慢的。

• 資深大佬 : ShotaconXD

  虽然我打开挺快的, 但是说实话, 我 19 款 15 寸 MBP 有点卡… 所以这个意义何在.

• 資深大佬 : wolfan

  也就是个背景有点酷而已，但其实华而不实，真实体验并不好。主要是占用 CPU 作些无用功，只是为了酷而酷的行为而已。

• 資深大佬 : FS1P7dJz

  作为企业官网真的很不适合这样做

• 資深大佬 : ccraohng

  除去 背景线条交互， 主要是 gsap . 滚动我会用 scrollmagic 。
  这种网站只是拿出给公司自己看 而已。
  就产品来说， 好的交互动画应该体现在产品介绍， 而不是一些文字上下淡入淡出。

• 資深大佬 : ncepuzs

  白屏时间太久，向下滚动太卡

• 資深大佬 : zengzixing

  tmd，打开个网页 10 多秒，滑动两下 cpu 占用直接百分之 80 多，还是八代 u

• 資深大佬 : Helsing

  哪里酷了？还不如一些博客模版好看

• 資深大佬 : lqmrt

  动画有点 bug,一上一下就有文字重叠了

• 資深大佬 : LxExExl

  @des #19 这个是真的酷炫

  主发的 load 超过 1 分钟，Mac 触控板下滑的时候也没那么流畅

• 資深大佬 : fairytale110

  说加载慢的，这个，，，挂个翻出去的工具就秒开，，，

• 資深大佬 : wty

  移动端没适配好，，，上下滑没反应，居然还得按按钮翻页，点了浏览器的打开电脑版反而正常了。。。另外翻一页就往浏览器的后退历史加一项，这个真的恶心

• 資深大佬 : puzzle9

  @Sasasu 这个是吧视频转成 canvas 了吗

• 資深大佬 : puzzle9

  感谢这个帖子 让我见识到了这种各样的大神发出了神奇百怪的 url

• 資深大佬 : lizhesystem

  感觉这样能唬得住客户。

• 資深大佬 : Mexion

  虽然我打开挺快的，但是太卡了，卡出翔