Effets d'Ecriture et de Texte

Créer un texte qui tremble

Simulez un tremblement de terre ou une frayeur sur votre page avec cet effet.

Insérez ce script dans l'entête de votre page entre les balises <head></head>:

Code JAVASCRIPT :
 
<script language="javascript">
var y=30
var x=10
var count_shakes= 0
var shaketicker
 
function initObjects() {
if (document.all) {
shaketicker0 = document.all.shaketick0.style
shaketicker1 = document.all.shaketick1.style
shaketicker2 = document.all.shaketick2.style
shaketicker3 = document.all.shaketick3.style
shaketicker4 = document.all.shaketick4.style
shaketicker5 = document.all.shaketick5.style
shaketicker6 = document.all.shaketick6.style
}
if (document.layers) {
shaketicker0 = document.shaketick0
shaketicker1 = document.shaketick1
shaketicker2 = document.shaketick2
shaketicker3 = document.shaketick3
shaketicker4 = document.shaketick4
shaketicker5 = document.shaketick5
shaketicker6 = document.shaketick6
}
shake()
}
 
function getrandom() {
var dif= Math.floor(Math.random()*2)
return dif
}
 
function getrandom2() {
var dif= Math.floor(Math.random()*5)
return dif
}
 
function getrandom3() {
var dif= Math.floor(Math.random()*10)
return dif
}
 
function intermezzo() {
count_shakes=0
var goon=setTimeout('shake()',2000)
 
}
 
function shake() {
if (count_shakes < 50) {
 
if (document.all) {
shaketicker0.posTop=y+getrandom(); shaketicker0.posLeft=x+getrandom3();
shaketicker1.posTop=y+getrandom(); shaketicker1.posLeft=x+getrandom2();
shaketicker2.posTop=y+getrandom2(); shaketicker2.posLeft=x+getrandom();
shaketicker3.posTop=y+getrandom(); shaketicker3.posLeft=x+getrandom3();
shaketicker4.posTop=y+getrandom3(); shaketicker4.posLeft=x+getrandom2();
shaketicker5.posTop=y+getrandom2(); shaketicker5.posLeft=x+getrandom();
shaketicker6.posTop=y+getrandom2(); shaketicker6.posLeft=x+getrandom();
}
if (document.layers) {
shaketicker0.top=y+getrandom(); shaketicker0.left=x+getrandom3();
shaketicker1.top=y+getrandom(); shaketicker1.left=x+getrandom2();
shaketicker2.top=y+getrandom2(); shaketicker2.left=x+getrandom();
shaketicker3.top=y+getrandom3(); shaketicker3.left=x+getrandom();
shaketicker4.top=y+getrandom(); shaketicker4.left=x+getrandom2();
shaketicker5.top=y+getrandom2(); shaketicker5.left=x+getrandom();
shaketicker6.top=y+getrandom(); shaketicker6.left=x+getrandom3();
}
var timer = setTimeout('shake()',10)
count_shakes++;
}
else {
shaketicker0.top=y; shaketicker0.left=x;
shaketicker1.top=y; shaketicker1.left=x;
shaketicker2.top=y; shaketicker2.left=x;
shaketicker3.top=y; shaketicker3.left=x;
shaketicker4.top=y; shaketicker4.left=x;
shaketicker5.top=y; shaketicker5.left=x;
shaketicker6.top=y; shaketicker6.left=x;
intermezzo()
clearTimeout(timer)
}
 
}
// - End of JavaScript - -->
</SCRIPT>
 
<STYLE>
.ticker {
position: absolute;
font-family:Verdana;
font-weight:bold;
color:FF0000;
font-size:30px;
letter-spacing:1;
}
</STYLE>


Placez ensuite cette partie de code dans le corps de votre page entre la balise <body></body>, en précisant le même texte pour chaque calque :

Code HTML :
<BODY onLoad="initObjects()">
<div id="shaketick0" class="ticker" style="COLOR: #ffeeee">
C'est de ta faute !!!<br> Tu m'as fait peur !!!
</div>
<div id="shaketick1" class="ticker" style="COLOR: #ffcccc">
C'est de ta faute !!!<br> Tu m'as fait peur !!!
</div>
<div id="shaketick2" class="ticker" style="COLOR: #ff9999">
C'est de ta faute !!!<br> Tu m'as fait peur !!!
</div>
<div id="shaketick3" class="ticker" style="COLOR: #ff7777">
C'est de ta faute !!!<br> Tu m'as fait peur !!!
</div>
<div id="shaketick4" class="ticker" style="COLOR: #ff5555">
C'est de ta faute !!!<br> Tu m'as fait peur !!!
</div>
<div id="shaketick5" class="ticker" style="COLOR: #ff2222">
C'est de ta faute !!!<br> Tu m'as fait peur !!!
</div>
<div id="shaketick6" class="ticker" style="COLOR: #ff0000">
C'est de ta faute !!!<br> Tu m'as fait peur !!!
</div>
 
</body>


Essayer voir ;)

Cette page a été vue 5803 fois