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 2480 fois