Главная » 2010 » Март » 26 » Матричный эффект (Javascript)
26.03.2010, 09:08

Матричный эффект



Эффект, как в фильме "Матрица".

В head вставляем это:

Code
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js Matrix by Aleko</title>
<style>
html,body {height:100%;}
body {color:#009900;font-family:Lucida Sans Unicode;font-size:13px;margin:0;}
img {border:none;outline:none;}
.point {color:#60cccc;}
#wrapper{height:500px;width:400px;background:black;position:relative;}
.line {height:auto;height:100%;min-height:100%;overflow:hidden;position:absolute;width:12px;}
</style>

В body - это:

Code

<div id="wrapper"></div>
<input type="button" value="Матричные" onclick="start(1)"/>
<input type="button" value="Русские" onclick="start(3)"/>
<input type="button" value="Английские" onclick="start(2)"/>
<input type="button" value="Двоичная" onclick="start(5)"/>
<input type="button" value="XO" onclick="start(4)"/>

<script>
i = new Array();
div = new Array();
headDiv = new Array();
showTimer = new Array();
a = new Array();
b = new Array();
c = new Array();
var param;

function start(x){
param = x;
wrapper = document.getElementById('wrapper');
wrapper.innerHTML = '';
for(f=0;f<wrapper.offsetWidth-12;f=f+12){
  showLine(f+'e');
  showLine(f+'h');
  }
};

function showLine(z){
  div[z] = document.createElement('div');
  div[z].setAttribute('class','line');
  div[z].style.left=parseInt(z)+'px';
  headDiv[z] = document.createElement('div');
  headDiv[z].setAttribute('class','point');
  wrapper.appendChild(div[z]);
  div[z].appendChild(headDiv[z]);
  head(z);
  show(z,a,b,c);
  };
   
function destroyLine(z){
  clearInterval(showTimer[z]);
  wrapper.removeChild(div[z]);
  showLine(z);
  };

function randomChar(x){
  if(param==1){if(x){
  var rand = "<img src='symbols/"+Math.floor(Math.random()*25)+".gif'/>";}else
  {var rand = "<img src='symbols/"+Math.floor(Math.random()*25)+"n.gif'/>";}
  return rand;
  }
   
  if(param==2){
  var chars = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
  var rand = Math.floor(Math.random()*chars.length);
  return chars[rand];
  }
   
  if(param==3){
  var chars = new Array('A','Б','В','Г','Д','Е','Ж','З','И','К','Л','М','Н','О','П','Ю','С','Т','У','Ф','Х','Ц','Ч','Ш','Ъ','Э','Я');
  var rand = Math.floor(Math.random()*chars.length);
  return chars[rand];
  }
   
  if(param==4){
  var chars = new Array('Х','О');
  var rand = Math.floor(Math.random()*chars.length);
  return chars[rand];
  }
  if(param==5){
  var chars = new Array('1','0');
  var rand = Math.floor(Math.random()*chars.length);
  return chars[rand];
  }
  };

function head(z){
  setInterval(function(){headDiv[z].innerHTML=randomChar('x');},20);
  };

function randomNumber(mx){
  return Math.floor(Math.random()*mx);
  };

function show(z){
  i[z] = 1;
  showTimer[z] = setInterval(function(){
  a[z] = randomNumber(1000);
  b[z] = randomNumber(400);
  c[z] = randomNumber(80);
  var char = document.createElement('div');
  char.innerHTML = randomChar();
  div[z].insertBefore(char,headDiv[z]);
  fade(char,20,1000+a[z]);
  if(i[z]>=b[z]){fade(div[z],0,3000,function(){destroyLine(z)});}else{i[z]++;}
  },c);
  };
   
function fade(obj,to,time,callback){
  IE=/*@cc_on!@*/false;
  if(IE){
  from = obj.style.filter.replace(/.*opacity=([0-9]*).*/,'$1');  
  if(!from){from=100;}
  from=parseFloat(from);
  }
  else{
  var from=obj.style.opacity;
  if(from==''){from=1;}
  from=parseFloat(from);
  to=to/100;
  }
  var start = new Date().getTime();
  setTimeout(function(){
  var now=(new Date().getTime())-start;
  var progress=now/time;
  var result=(to-from)*progress+from;
  if(IE){obj.style.filter="alpha(opacity="+result+")";}else{obj.style.opacity=result;}
  if(progress<1){setTimeout(arguments.callee,30);}
  else{
  if(IE){obj.style.filter="alpha(opacity="+to+")";}
  else{obj.style.opacity=to;}
  if(callback){setTimeout(callback,0);}
  }},30);
  };
</script>

Картинки, находящиеся в архиве, загружаем в корень.

Материал взят с сайта infoscript.ru
Теги: Скачать Матричный эффект
Скачать "Матричный эффект"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Aleko
Категория: JavaScript's | Просмотров: 3227 | Добавил: antisept | Рейтинг: 5.0/1 |
Теги: эффект, Матричный
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]