V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
seaofbits
V2EX  ›  前端开发

谷歌这个网页的效果真是惊艳到我了!有无 v 友知道是如何实现的呢?

  •  
  •   seaofbits · 2022-06-19 16:01:38 +08:00 · 4093 次点击
    这是一个创建于 915 天前的主题,其中的信息可能已经有所发展或是发生改变。

    url 如下:

    https://www.google.com/search/howsearchworks/our-history/

    目前发现的是,它套了一层 iframe 指向另一个网页,但是该网页再 F12 就只能看见一个 canvas 了……

    不知道这个网页是用什么技术实现的呢? v 友们有无想法?欢迎大家畅所欲言。

    14 条回复    2022-07-13 15:56:10 +08:00
    anemology
        1
    anemology  
       2022-06-19 16:30:51 +08:00
    seaofbits
        2
    seaofbits  
    OP
       2022-06-19 16:44:56 +08:00
    我也看了 https://gweb-searchon.uc.r.appspot.com/timeline/assets/js/app.js 这个 js ,但是感觉它引用的两个开源库都还差点意思:
    goober 是 css-in-js ,肯定是辅助;
    theatre-js 是一个动画库,这个沾边了,但是它也不能直接创建如此丝滑的线条[捂脸]
    我感觉应该还少了一点东西,可能是个 3d 库?
    Routeros
        3
    Routeros  
       2022-06-19 19:00:12 +08:00
    惊叹,还适配了移动端。
    Senorsen
        4
    Senorsen  
       2022-06-19 20:16:19 +08:00
    题外话:刚刚不知咋了页码一直红白闪烁,频率特别高。好像是几个小时前开了一直放那儿忘记关,再切回来就有 bug 的样子。。
    kingxiangqi
        5
    kingxiangqi  
       2022-06-19 21:42:38 +08:00
    盲猜 WebGPU
    foam
        6
    foam  
       2022-06-19 22:32:54 +08:00
    我也看了 app.js 。里边有个 active theory 的网址,看了下他们的文章,他们是专门做交互式动画应用的

    https://medium.com/@activetheory
    est
        7
    est  
       2022-06-19 22:44:08 +08:00
    现在的小朋友呀。。。

    以前在 Pentium III 上看 Flash 比这效果惊艳得多。

    而且 swf 格式还有个牛批的特性是边下载边看。。。这个网页 4.7MB 。。。就这?

    真的拉夸!

    而且当年最强大的就是 Macromedia 那个编辑器,让普通人也能做动画和特效。
    dingwen07
        8
    dingwen07  
       2022-06-20 05:53:03 +08:00
    帧率有点低
    seaofbits
        9
    seaofbits  
    OP
       2022-06-20 08:12:21 +08:00
    @est 哈哈,flash 是上一个时代的荣光。我也用 flash 做过一点动画(火柴人水平那种😀)

    这个网页我觉得最不可思议的地方就是那个跟随滚动条播放的流畅线条,做成这样我觉得已经是 h5 典范作品了🐮同时也是最好奇这个是怎么做的
    wtf12138
        10
    wtf12138  
       2022-06-20 09:22:04 +08:00
    同好奇,有没有大佬讲一下思路
    est
        11
    est  
       2022-06-20 10:31:41 +08:00
    @seaofbits 火柴人水平那是相当好了。我记得火柴人最后一幕居然是 3D 展现的。。。。
    seaofbits
        12
    seaofbits  
    OP
       2022-06-20 19:31:38 +08:00
    @est 倒不是那个火柴人,我看过那个火柴人,那是火柴人天花板😂我做的是很简单的那种动画😃
    est
        13
    est  
       2022-06-20 22:00:40 +08:00
    @seaofbits 哈哈哈
    WORUI
        14
    WORUI  
       2022-07-13 15:56:10 +08:00
    真的是令人惊艳!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2737 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 02:20 · PVG 10:20 · LAX 18:20 · JFK 21:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.