jQuery黑客帝国 片头代码雨效果

所属分类:其他,UI-动画效果,背景

 18314  213  查看评论 (35)
jQuery黑客帝国 片头代码雨效果 ie兼容10

更新时间:2017/1/30 下午12:51:22

更新说明:修改了后面的数字,使生成各种稀奇古怪的字母,效果更好

String.fromCharCode(1e2 + Math.random() * 300);

① 用setInterval(draw, 33)设定刷新间隔

② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母

③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景

④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置

⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行,就会产生《黑客帝国》的片头效果。

相关插件-动画效果,背景

文字插件特效_文字动画特效js插件

此插件是针对文字写的一个动画插件,主要可运用在开场和出场的时候,插件方便小巧,只需要配置参数即可达到数十种动画效果
  动画效果
 14525  325

纯CSS3实现的手绘黑白按钮特效

纯CSS3实现的手绘黑白按钮特效好看实用
  动画效果
 6238  40

jquery颜色动画插件jquery.colorAnimations.js

jquery颜色动画插件jquery.colorAnimations.jsjquery
  动画效果
 18259  8

超酷jQuery水波倒影特效插件

lake.js是一款可以制作水波倒影特效jQuery插件。
  动画效果
 6477  49

讨论这个项目(35)回答他人问题或分享插件使用方法奖励jQ币

    梦里梦到醒不来的梦 0
    2017/9/14 17:16:53

    可以把它放在body背景里么?

    回复
    轨迹 0
    2017/8/22 16:26:19

    能不能换成自己想要的字母

        Ape1
        2017/9/14 12:32:55
        yPositions.map(function(y, index) {
            text = String.fromCharCode(1e2 + Math.random() * 330);
            x = (index * 10) + 10;
            q.getContext('2d').fillText(text, x, y);
            if (y > Math.random() * 1e4) {
                yPositions[index] = 0;
            } else {
                yPositions[index] = y + 10;
            }
        });

        把text设置成你要的文字就可以了

    回复
    ?邱康 0
    2017/8/3 13:38:12
    夜月绫Harpsichord 0
    2017/8/2 22:15:50
    没有的别想了 0
    2017/7/16 0:02:10

    好多牛叉的特效,汗.....

    回复
    滚丫滚键盘 0
    2017/7/10 17:18:35

    代码很简单,但是效果却很炫酷,好棒!

        成功基于点滴0
        2017/7/12 9:27:22

        说的非常对

    回复
    宇泽天下,恋尽天涯! 0
    2017/6/29 9:36:22

    是不是能够随手写出这些特效,就称得上是大牛了,作者在哪任职啊?

        一只猫0
        2017/6/30 17:58:56

        不敢当

    回复
    noOne 0
    2017/6/26 14:40:18

    要币下载啊  ,能不能免费下 

        ?N°?0
        2017/7/31 11:50:25

        有能免费下载的

    回复
    有人说,这叫回忆~ 0
    2017/6/23 11:19:19

    可以改成桌面背景吗,程序员的桌面就应该是这个样子的额

    回复
    封弊者回归 0
    2017/6/13 19:28:05
取消回复