MaGneeTiiKz
Premium
- Inscription
- 21 Décembre 2011
- Messages
- 4 006
- Réactions
- 1 108
- Points
- 11 741
Bonjour à tous !
En ces fêtes de fin d'année, nous ne pouvons passer à côté de cette tendance sur la toile consistant à faire tomber de zolis flocons sur son site.
Vous aimeriez vous aussi savoir comment réaliser cet effet sur votre propre site ? Alors suivez pas à pas les étapes de ce tutoriel !
Préparation
Bien ! Tout d'abord, avant de commencer à coder comme des bourrins, il faut préparer le terrain. Nous aurons simplement besoin de 2 fichiers :
La base
C'est parti les enfants, nous allons créer notre objet de base : l'objet snow :
Code
var snow = {
// le vent. > 0, ça décale vers le droite, < 0 vers la gauche
wind : 1,
maxXrange : 100, // La valeur maximale pour laquelle les flocons se déplacent horizontalement
minXrange : 10, // La valeur minimale pour laquelle les flocons se déplacent horizontalement
maxSpeed : 2, // La vitesse maximale avec laquelle les flocons descendent
minSpeed : 1, // La vitesse minimale avec laquelle les flocons descendent
color : "#fff", // La couleur des flocons
char : "*", // Le caractère utilisé pour les flocons, essayez aussi "•"
maxSize : 20, // La taille maximale du flocon
minSize : 8, // La taille minimale du flocon
flakes : [], // le tableau qui contiendra TOUS les flocons
WIDTH : 0, // La largeur de la fenêtre
HEIGHT : 0, // La hauteur de la fenêtre
// La fonction appelée pour créer de la neige !!
// Elle prend en paramètre le nombre de flocons voulus
init : function(nb){
}
};
Ainsi vous l'aurez compris, pour créer de la neige, vous avez juste à ajouter ces quelques lignes à votre fichier index.html :
Code
<script type="text/javascript">
window.onload = function(){
snow.init(10); // 10 flocons seront donc affichés
};
</script>
Bon, voilà, c'est bien beau, mais maintenant, il faut CODER !
LE CODE !!
Bon, fini la rigolade, on attaque vraiment
Sélectionnez votre fonction init :
Nous allons créer 2 variables :
Code
var o = this,
frag = document.createDocumentFragment();
Code
o.getSize();
et du coup, dans l'objet snow :
Code
getSize : function(){
this.WIDTH = document.body.clientWidth || window.innerWidth;
this.HEIGHT = document.body.clientHeight || window.innerHeight;
}
Voilà voilà, rien de bien compliqué pour le moment, sachez juste que window.innerWidth concerne Firefox et document.body.clientWidth concerne IE.
Bien, nous allons également ajouter une fonction random, qui permettra de choisir un nombre au hasard dans une marge, avec un arrondissement voulu :
Code
random : function(range, num){
var num = num?num:1;
return Math.floor(Math.random() * (range + 1) * num) / num;
}
Reprenons la fonction init, et ouvrons une boucle for :
Code
for(var i = 0; i < nb; i++){
// le reste du code
}
document.body.appendChild(frag);
o.animate();
Nous allons même créer maintenant la fonction animate puisque, ne l'oublions pas, nous sommes des rebelles.
Code
animate : function(){
var o = this;
for(var i = 0, c = o.flakes.length; i < c; i++){
// POUR CHAQUE FLOCONS
}
setTimeout(function(){
o.animate(); // MOUHAHA ! je l'avais dit que ce serait utile ! (la variable o)
},20);
}
Et VOILÀ !
On reprend la boucle for de la fonction init :
Code
var flake = {
x : o.random(o.WIDTH),
y : - o.maxSize,
xrange : o.minXrange + o.random(o.maxXrange - o.minXrange),
yspeed : o.minSpeed + o.random(o.maxSpeed - o.minSpeed, 100),
life : 0,
size : o.minSize + o.random(o.maxSize - o.minSize),
html : document.createElement("span")
};
flake.html.style.position = "absolute";
flake.html.style.top = flake.y + "px";
flake.html.style.left = flake.x + "px";
flake.html.style.fontSize = flake.size + "px";
flake.html.style.color = o.color;
flake.html.appendChild(document.createTextNode(o.char));
frag.appendChild(flake.html);
o.flakes.push(flake);
Soit dans l'ordre :
L'animation
On attaque la partie la plus COMPLIQUÉE de ce tutoriel (mais nous sommes des rebelles) !
reprenez votre fonction jeunes gens, et allez dans la boucle for :
Code
var flake = o.flakes, // Le flocon actuel
top = flake.y + flake.yspeed, // La distance entre le flocon et le haut de la page
left = flake.x + Math.sin(flake.life) * flake.xrange + o.wind; // La distance entre le côté de la page et le flocon, décalé par le vent
MAIS, MAIS... POURQUOI UTILISER LE SINUS ?!
Hu hu hu...
Je ne sais pas vous mais pour moi, un flocon quand ça tombe ça fait une chute comme cela :
(TRES TRES TRES GROSSIEREMENT)
Et quelle fonction donne une courbe à peu près similaire ? le sinus ! (ou le cosinus, ça marche aussi).
Attention, Mathématiquement ça n'a aucun rapport, mais nous allons juste considérer que le sinus et une fonction qui varie entre -1 et 1 selon le nombre passé en paramètre, et ceci de manière lissée : en ralentissant vers les extrémités.
Maintenant, on va s'assurer que les flocons ne dépassent pas la page :
Code
// Si le flocon ne dépasse pas
if(top < o.HEIGHT - flake.size - 10 && left < o.WIDTH - flake.size && left > 0){
// On le positionne dans la page
flake.html.style.top = top + "px";
flake.html.style.left = left + "px";
// On modifie les variables
flake.y = top;
flake.x += o.wind;
flake.life+= .01;
}
// Sinon
else {
// On le remet tout en haut
flake.html.style.top = -o.maxSize + "px";
// On lui choisit une position horizontale aléatoire
flake.x = o.random(o.WIDTH);
flake.y = -o.maxSize;
flake.html.style.left = flake.x + "px";
// On réinitialise son état
flake.life = 0;
}
ET WALA !!
Mon dieu c'est magnifique, vous avez réussi à faire tomber de la neige !
Récapitulatif
index.html
snow.js
Et bien voilà les enfants, en quelques minutes, vous avez réussi à créer un code plus clair et plus structuré, qui vous permet de faire une neige classe (pour des vrais rebelles) facilement sur votre site !
Et en plus, un petit bonus pour vous si l'utilisateur redimensionne sa fenêtre :
(à placer dans la fonction init, à la fin)
Code
window.onresize = function(){o.getSize();};
J'espère vraiment que ce tutoriel vous a plu, et si jamais vous avez des questions, n'hésitez pas à commenter ou à poster sur le forum, je vous répondrai avec joie
Source :
En ces fêtes de fin d'année, nous ne pouvons passer à côté de cette tendance sur la toile consistant à faire tomber de zolis flocons sur son site.
Vous aimeriez vous aussi savoir comment réaliser cet effet sur votre propre site ? Alors suivez pas à pas les étapes de ce tutoriel !
Préparation
Bien ! Tout d'abord, avant de commencer à coder comme des bourrins, il faut préparer le terrain. Nous aurons simplement besoin de 2 fichiers :
- index.html (il contiendra le contenu de votre site, mais ça, vous le savez déjà )
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Des zolis flocons
</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
background:#333;
}
</style>
<script type="text/javascript" src="snow.js"></script>
</head>
<body>
</body>
</html>
(Le style css sert simplement à mettre le fond de la page en gris, parce que des flocons blancs sur fond blanc, à part pour de l'art abstrait, c'est moyen)
et... ET... - snow.js ! (le script qui fera tomber la neige)
La base
C'est parti les enfants, nous allons créer notre objet de base : l'objet snow :
Code
var snow = {
// le vent. > 0, ça décale vers le droite, < 0 vers la gauche
wind : 1,
maxXrange : 100, // La valeur maximale pour laquelle les flocons se déplacent horizontalement
minXrange : 10, // La valeur minimale pour laquelle les flocons se déplacent horizontalement
maxSpeed : 2, // La vitesse maximale avec laquelle les flocons descendent
minSpeed : 1, // La vitesse minimale avec laquelle les flocons descendent
color : "#fff", // La couleur des flocons
char : "*", // Le caractère utilisé pour les flocons, essayez aussi "•"
maxSize : 20, // La taille maximale du flocon
minSize : 8, // La taille minimale du flocon
flakes : [], // le tableau qui contiendra TOUS les flocons
WIDTH : 0, // La largeur de la fenêtre
HEIGHT : 0, // La hauteur de la fenêtre
// La fonction appelée pour créer de la neige !!
// Elle prend en paramètre le nombre de flocons voulus
init : function(nb){
}
};
Ainsi vous l'aurez compris, pour créer de la neige, vous avez juste à ajouter ces quelques lignes à votre fichier index.html :
Code
<script type="text/javascript">
window.onload = function(){
snow.init(10); // 10 flocons seront donc affichés
};
</script>
Bon, voilà, c'est bien beau, mais maintenant, il faut CODER !
LE CODE !!
Bon, fini la rigolade, on attaque vraiment
Sélectionnez votre fonction init :
Nous allons créer 2 variables :
Code
var o = this,
frag = document.createDocumentFragment();
- o et une variable qui contiendra l'objet snow, comme ça, si jamais on en a besoin dans une fonction ou this équivaut à window, la variable o elle vaudra bien l'objet snow
- frag est en fait une variable qui permet, plutôt que d'ajouter un à un les flocons dans la page HTML et de perdre du temps, de les stocker tous ensemble dans un Fragment, et d'ajouter uniquement ce dernier à la page, ce qui permet de gagner un temps considérable.
Code
o.getSize();
et du coup, dans l'objet snow :
Code
getSize : function(){
this.WIDTH = document.body.clientWidth || window.innerWidth;
this.HEIGHT = document.body.clientHeight || window.innerHeight;
}
Voilà voilà, rien de bien compliqué pour le moment, sachez juste que window.innerWidth concerne Firefox et document.body.clientWidth concerne IE.
Bien, nous allons également ajouter une fonction random, qui permettra de choisir un nombre au hasard dans une marge, avec un arrondissement voulu :
Code
random : function(range, num){
var num = num?num:1;
return Math.floor(Math.random() * (range + 1) * num) / num;
}
Reprenons la fonction init, et ouvrons une boucle for :
Code
for(var i = 0; i < nb; i++){
// le reste du code
}
document.body.appendChild(frag);
o.animate();
Nous allons même créer maintenant la fonction animate puisque, ne l'oublions pas, nous sommes des rebelles.
Code
animate : function(){
var o = this;
for(var i = 0, c = o.flakes.length; i < c; i++){
// POUR CHAQUE FLOCONS
}
setTimeout(function(){
o.animate(); // MOUHAHA ! je l'avais dit que ce serait utile ! (la variable o)
},20);
}
Et VOILÀ !
On reprend la boucle for de la fonction init :
Code
var flake = {
x : o.random(o.WIDTH),
y : - o.maxSize,
xrange : o.minXrange + o.random(o.maxXrange - o.minXrange),
yspeed : o.minSpeed + o.random(o.maxSpeed - o.minSpeed, 100),
life : 0,
size : o.minSize + o.random(o.maxSize - o.minSize),
html : document.createElement("span")
};
flake.html.style.position = "absolute";
flake.html.style.top = flake.y + "px";
flake.html.style.left = flake.x + "px";
flake.html.style.fontSize = flake.size + "px";
flake.html.style.color = o.color;
flake.html.appendChild(document.createTextNode(o.char));
frag.appendChild(flake.html);
o.flakes.push(flake);
Soit dans l'ordre :
- On créer un bel objet flake (flocon)
- On le positionne horizontalement et aléatoirement
- On le cache en haut de l'écran
- On lui choisi une marge de déplacement horizontal aléatoire
- On lui choisi une vitesse verticale aléatoire
- On créer l'objet html : un span
- On applique les styles précédents au span
- On lui ajoute une couleur
- On lui ajoute le texte choisi
- On l'ajoute dans le fragment
- Puis finalement on ajoute toute les variables de ce flocons dans le tableau flakes
L'animation
On attaque la partie la plus COMPLIQUÉE de ce tutoriel (mais nous sommes des rebelles) !
reprenez votre fonction jeunes gens, et allez dans la boucle for :
Code
var flake = o.flakes, // Le flocon actuel
top = flake.y + flake.yspeed, // La distance entre le flocon et le haut de la page
left = flake.x + Math.sin(flake.life) * flake.xrange + o.wind; // La distance entre le côté de la page et le flocon, décalé par le vent
MAIS, MAIS... POURQUOI UTILISER LE SINUS ?!
Hu hu hu...
Je ne sais pas vous mais pour moi, un flocon quand ça tombe ça fait une chute comme cela :
(TRES TRES TRES GROSSIEREMENT)
Et quelle fonction donne une courbe à peu près similaire ? le sinus ! (ou le cosinus, ça marche aussi).
Attention, Mathématiquement ça n'a aucun rapport, mais nous allons juste considérer que le sinus et une fonction qui varie entre -1 et 1 selon le nombre passé en paramètre, et ceci de manière lissée : en ralentissant vers les extrémités.
Maintenant, on va s'assurer que les flocons ne dépassent pas la page :
Code
// Si le flocon ne dépasse pas
if(top < o.HEIGHT - flake.size - 10 && left < o.WIDTH - flake.size && left > 0){
// On le positionne dans la page
flake.html.style.top = top + "px";
flake.html.style.left = left + "px";
// On modifie les variables
flake.y = top;
flake.x += o.wind;
flake.life+= .01;
}
// Sinon
else {
// On le remet tout en haut
flake.html.style.top = -o.maxSize + "px";
// On lui choisit une position horizontale aléatoire
flake.x = o.random(o.WIDTH);
flake.y = -o.maxSize;
flake.html.style.left = flake.x + "px";
// On réinitialise son état
flake.life = 0;
}
ET WALA !!
Mon dieu c'est magnifique, vous avez réussi à faire tomber de la neige !
Récapitulatif
index.html
snow.js
Et bien voilà les enfants, en quelques minutes, vous avez réussi à créer un code plus clair et plus structuré, qui vous permet de faire une neige classe (pour des vrais rebelles) facilement sur votre site !
Et en plus, un petit bonus pour vous si l'utilisateur redimensionne sa fenêtre :
(à placer dans la fonction init, à la fin)
Code
window.onresize = function(){o.getSize();};
J'espère vraiment que ce tutoriel vous a plu, et si jamais vous avez des questions, n'hésitez pas à commenter ou à poster sur le forum, je vous répondrai avec joie
Source :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.