资讯专栏INFORMATION COLUMN

Google搜索灭霸彩蛋的实现效果

CHENGKANG / 1489人阅读

详见Github
https://github.com/lichking24...

Thanos Dust Effect Effects Demo

As Thanos making a snap with the Infinite Gauntlet, half the heros vanish to dust. As using the time stone, people come back.

Details

The procedures:

Click the Gauntlet button, and display animation to make a snap, and play audio file;

Select half heros by random, the random method is to resort members array;

arr.sort(function() {
  return 0.5 - Math.random();
});

Make selected item to dust

3.1 use html2canvas library to convert dom to a canvas image

3.2 split the canvas images into many pieces by pixel, function generateFrames()

3.3 create a container which has the same size and position as the converted dom

3.4 appendChild to the container with the pieces

3.5 rotate random degrees and translate random pixel for each piece, which shows the dust animation

3.6 set converted dom item to be invisible and finish the SNAP action

Reverse time to bring heros back by adjusting the visibility of converted dom items

FAQ

Why use a nodejs express server?

A static html file will show errors with "Unable to get image data from canvas because the canvas has been tainted by cross-origin data", even if I set allowTaint to be true.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114558.html

相关文章

  • Google搜索灭霸彩蛋实现效果

    详见Githubhttps://github.com/lichking24... Thanos Dust Effect Effects Demo As Thanos making a snap with the Infinite Gauntlet, half the heros vanish to dust. As using the time stone, people come back. D...

    王岩威 评论0 收藏0
  • 灭霸无限手套说起

    摘要:前两天看到搜索有个彩蛋,搜索灭霸或者,点击右边的无限手套触发彩蛋,打个响指,消灭一半的搜索结果条目,消失特效类似电影里的。但是百度的这个页面样式类是动态的,还要把整个内容也输出,而且很多图片大概是经过了什么处理,没权限显示不了,遂放弃。 本文不是技术文章,只是单纯记录下 最近妇联4在热映,先剧透两个精彩片段。showImg(https://segmentfault.com/img/bV...

    whatsns 评论0 收藏0
  • 灭霸无限手套说起

    摘要:前两天看到搜索有个彩蛋,搜索灭霸或者,点击右边的无限手套触发彩蛋,打个响指,消灭一半的搜索结果条目,消失特效类似电影里的。但是百度的这个页面样式类是动态的,还要把整个内容也输出,而且很多图片大概是经过了什么处理,没权限显示不了,遂放弃。 本文不是技术文章,只是单纯记录下 最近妇联4在热映,先剧透两个精彩片段。showImg(https://segmentfault.com/img/bV...

    Mertens 评论0 收藏0
  • 十分钟实现灭霸打响指灰飞烟灭效果

    摘要:全部文章列表从模块化到私有仓库搭建十分钟实现灭霸打响指灰飞烟灭的效果是时候开发你自己的扩展插件了看过复仇者联盟的都知道,灭霸作为计划生育政策的坚定支持者和执行者,一个响指清除了宇宙中二分之一的生命。电影中被清除的生命灰飞烟灭的镜头很是酷炫,所以在复联4上映后,那个不存在的网站google,推出了一个彩蛋,如果在搜索框搜索灭霸,会出现一个手套的按钮,点击后会让网页搜索结果消失一半。 showI...

    Wildcard 评论0 收藏0
  • 尝试用 vue 实现灭霸打响指英雄消失效果 demo

    摘要:写在前面灭霸打响指的消失效果。算是蹭热度的一个我通过试图去查看是如何实现的,也抠了一些音频图片资源下来。点击一下手套,伴随音效和响指的动画,会有一半的英雄消失。翻转时间,英雄又回来的效果是将原来的节点设置为可见的,并加了回复动画。 写在前面 灭霸打响指的消失效果。效果来源于 Google 搜索灭霸 或者 thanos。算是蹭热度的一个 Feature, 我通过 F12 试图去查看是如何实现的...

    kelvinlee 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<