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

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

 21424  263  查看评论 (41)
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); 在指定位置显示一个字母 以上步骤循环进行,就会产生《黑客帝国》的片头效果。

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

css3实现文字3d

纯css3 写出文字3d效果
  动画效果
 8860  53

CSS3实现色彩喷泉

CSS3实现色彩喷泉
  动画效果
 12852  109

jquery交互式3D

jQuery的交互式3D让您创建一个使用多个图像帧允许用户拖动和处理图像的3D互动对象。
  动画效果
 16968  39

jQuery简单的真心话大冒险游戏文字随机抽取大冒险

jquery简单的真心话大冒险游戏文字随机抽取大冒险
  动画效果
 14320  123

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

    . 0
    2017/11/1 15:35:04

    牛逼啊!!!!!!

    回复
    long 0
    2017/10/25 11:47:00
    金牛座 0
    2017/10/19 15:01:26
    MIX谢先生 0
    2017/10/18 14:47:12
    简单也极端 0
    2017/10/13 14:48:30
    somnus333 0
    2017/9/27 23:41:15
    梦里梦到醒不来的梦 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
取消回复