Phiên bản đầy đủ: jsB@nk » Chữ » Mô phỏng » Chữ Ma trận di chuyển
URL: https://www.javascriptbank.com/matrix-text-trailer-effect.html
Hiệu ứng tạo các dòng chữ vừa di chuyển từ trái sang phải vừa có bóng trông giống như chữ của bộ phim Ma trận.
Phiên bản đầy đủ: jsB@nk » Chữ » Mô phỏng » Chữ Ma trận di chuyển
URL: https://www.javascriptbank.com/matrix-text-trailer-effect.html
<script language="javascript">// This script makes letters move with a trail like effect. Created by Matt Garrett// Change this to alter the speed of the trail effect.speed=20// Change this to alter the distance between the trailing textsteps=30// Change this to alter how many times it cycles on each text... affects the distance text travels as well.cycle=17// Don't alter... This switches the text it's supposed to trail.count=0// This is grabbing the div tag and telling it to make that text visible.vis=new Array()vis[1]="it1.style.visibility=";vis[2]="it2.style.visibility=";vis[3]="it3.style.visibility=";// This is grabbing the div tag and telling it to make that text trail.trail=new Array()trail[1]="it1.style.pixelLeft+=";trail[2]="it2.style.pixelLeft+=";trail[3]="it3.style.pixelLeft+=";// Don't change anything past this unless you want to add more text to trail.// If so alter the done function. If you can't figure it out email me for help.// [email protected] begin() {eval(vis[1]+"'visible'"); eval(vis[2]+"'visible'"); eval(vis[3]+"'visible'");eval(trail[1]+steps);setTimeout("next()",speed)}function next() {eval(trail[1]+steps); eval(trail[2]+steps);setTimeout("nextAgain()",speed)}num=0function nextAgain() {eval(trail[1]+steps); eval(trail[2]+steps); eval(trail[3]+steps);num++if(num<=cycle){setTimeout("nextAgain()",speed)}else{setTimeout("almostDone()",speed)}}function almostDone() {eval(trail[2]+steps); eval(trail[3]+steps);setTimeout("done()",speed)}function done() {eval(trail[3]+steps);num=0;if(count==2){vis[1]="matt1.style.visibility="; vis[2]="matt2.style.visibility="; vis[3]="matt3.style.visibility="; trail[1]="matt1.style.pixelLeft+="; trail[2]="matt2.style.pixelLeft+="; trail[3]="matt3.style.pixelLeft+="; count++; setTimeout("begin()",500);}if(count==1){vis[1]="cus1.style.visibility="; vis[2]="cus2.style.visibility="; vis[3]="cus3.style.visibility="; trail[1]="cus1.style.pixelLeft+="; trail[2]="cus2.style.pixelLeft+="; trail[3]="cus3.style.pixelLeft+="; count++; setTimeout("begin()",500);}if(count==0){vis[1]="neat1.style.visibility="; vis[2]="neat2.style.visibility="; vis[3]="neat3.style.visibility="; trail[1]="neat1.style.pixelLeft+="; trail[2]="neat2.style.pixelLeft+="; trail[3]="neat3.style.pixelLeft+="; count++; setTimeout("begin()",500);}}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="begin()"><div id="it1" style="color: rgb(0, 67, 0); left: -500px; z-index: 2;" class="logo">TRAIL YOUR TEXT...</div><div id="it2" style="color: rgb(0, 136, 0); left: -500px; z-index: 1;" class="logo">TRAIL YOUR TEXT...</div><div id="it3" style="color: rgb(144, 238, 144); left: -500px; z-index: 0;" class="logo">TRAIL YOUR TEXT...</div><div id="neat1" style="color: rgb(0, 67, 0); top: 70px; left: -500px; z-index: 2;" class="logo">GREAT LOOKING EFFECT...</div><div id="neat2" style="color: rgb(0, 136, 0); top: 70px; left: -500px; z-index: 1;" class="logo">GREAT LOOKING EFFECT...</div><div id="neat3" style="color: rgb(144, 238, 144); top: 70px; left: -500px; z-index: 0;" class="logo">GREAT LOOKING EFFECT...</div><div id="cus1" style="color: rgb(0, 67, 0); top: 120px; left: -500px; z-index: 2;" class="logo">EASY TO CUSTOMIZE...</div><div id="cus2" style="color: rgb(0, 136, 0); top: 120px; left: -500px; z-index: 1;" class="logo">EASY TO CUSTOMIZE...</div><div id="cus3" style="color: rgb(144, 238, 144); top: 120px; left: -500px; z-index: 0;" class="logo">EASY TO CUSTOMIZE...</div><div id="matt1" style="color: rgb(0, 67, 0); top: 170px; left: -500px; z-index: 2;" class="logo">COPYRIGHT(c) 2000. MATT GARRETT...</div><div id="matt2" style="color: rgb(0, 136, 0); top: 170px; left: -500px; z-index: 1;" class="logo">COPYRIGHT(c) 2000. MATT GARRETT...</div><div id="matt3" style="color: rgb(144, 238, 144); top: 170px; left: -500px; z-index: 0;" class="logo">COPYRIGHT(c) 2000. MATT GARRETT...</div></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->