Comment faire des bulles avec javascript ?

 

par meltech1 |

     
Comment faire des bulles avec javascript ?

Vous avez tous dèja vu ou bu du Champagne ? Il y a des bulles de Champagne. Cet effet de bulles qui montent vers le haut est programmable en javascript. C'est ce que je vais faire avec cet article. En effet vous allez programmer l'effet bulles de Champagne pour que votre site Internet soit alcoolisé donc pétillant. Après vous aurez envie de boire votre site Internet.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel bloc notes

Étapes de réalisation

1.

Commencez par obtenir le programme de votre site Internet. Pour ce faire avec "bloc notes" vous ouvrez votre site Internet et vous obtenez ainsi le code source. Maintenant vous y cherchez la balise <body>.

2.

Dans la balise <body> veuillez insérer le script suivant :
<script language="JavaScript1.2">
<!-- Begin
var no = 15;
var speed = 2;
var snow = new Array();
snow[0] = "bulle.gif"
snow[1] = "bulle.gif"
snow[2] = "bulle.gif"
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>.

3.

L'image de la bulle qui remonte, c'est à vous de la faire en format .gif et nommez-la bulle.gif. Ensuite vous enregistrez le tout avec "bloc notes" et vous ouvrez avec IE. Vous voyez une dizaine de bulles qui remontent sur votre site Internet. C'est l'effet bulles.

Astuces et mises en garde

Astuce(s) :

Pour augmenter ou diminuer le nombre de bulles allez dans <body> puis var no= nombre de bulles voulu.

Commentaires

nessa94 | 01/12/2010  

Je ne sais pas pourquoi ce script ne marche pas chez moi http://mademoiselle-biotupp.over-blog.com/

nessa94 | 01/12/2010  

JE ne sais pas pourquoi le script ne marche pas chez moi ... http://mademoiselle-biotupp.over-blog.com/

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on