0
Joyeuse fête d'Halloween !

Type : Code - Posté le
Joyeuse fête d'Halloween !

Salut à toutes et à tous !

J'espère que vous allez bien en cette journée de fête :)

Vous l'avez sûrement remarqué en arrivant sur le site, une petite animation a été mise en place sur le blog.
En effet, j'ai décidé de créer une animation spéciale Halloween, le tout en Javascript !
C'est donc de cette animation que je vais vous parler aujourd'hui.

Comme je l'ai dit plus haut, l'animation est complètement développée en Javascript ( JS ).
Elle est générée de manière totalement aléatoire, et intègre au total six images d'Halloween différentes.

Quelques créations utilisant un système d'aléatoire en JavaScript :

- https://www.luluwebmaster.fr/creation-48/marcraft-mini-jeu-en-html.htm
- https://www.luluwebmaster.fr/creation-55/morp-io-un-morpion-en-ligne.htm
- https://www.luluwebmaster.fr/creation-54/lulu-io-le-nouveau-agar-io.htm

Chacune de ces six images sont tirées au sort à tour de rôle, permettant déjà un premier "aléatoire" à l'animation ( Une image ne peut être tirée au sort qu'une seule fois ).
Après avoir trouvé une image valide ( Qui n'a pas encore été tirée ), le script va choisir un autre "aléatoire", cette fois-ci pour définir quelle animation va-t-être sélectionnée.

Voici la liste complète des animations avec leurs détails :
- Zoom : Zoom l'image actuelle et change d'image, le tout très rapidement.
- Noir et blanc : Effet de clignotements très rapides entre un fond blanc et l'image en fond noir, pour ensuite passer à une nouvelle image.
- Afficher / Masquer : Affiche et masque très rapidement l'image actuelle, pour ensuite passer à une nouvelle image.
- Alternance d'images : Alterne plusieurs d'images sélectionnées de manière aléatoire parmi les six, pour ensuite passer à une nouvelle image.
- Alternance du contraste : Alterne le contraste de l'image actuelle, pour ensuite passer à une nouvelle image.

Voilà pour la liste des animations.
Il faut aussi savoir qu'outre les sélections aléatoires citées au-dessus, il y en a encore beaucoup, mais qui sont quant à elles moins importantes.

Vous l'aurez peut-être deviné, mais lors de la réalisation, mon but premier était de générer une animation de la manière la plus aléatoire possible !
Et je pense avoir plutôt bien réussi :)



Pour finir cet article, voici le code source ainsi qu'un exemple de l'animation :

Code source ( Copier )

<!DOCTYPE html>
<html>
<head>
<title>Code Halloween - Luluwebmaster.fr</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
//Define images list
var listImgs = [{
"url" : "https://i.luwe.fr/c40031b8.png",
"active" : false
},
{
"url" : "https://i.luwe.fr/c202124f.png",
"active" : false
},
{
"url" : "https://i.luwe.fr/068f1c82.png",
"active" : false
},
{
"url" : "https://i.luwe.fr/85b3434f.png",
"active" : false
},
{
"url" : "https://i.luwe.fr/eedee7f2.png",
"active" : false
},
{
"url" : "https://i.luwe.fr/5d00447d.png",
"active" : false
}
];
//Define list of type animate
var listAnimateType = [
"zoomSimple",
"blackAndWhite",
"showAndHide",
"alternImage",
"alternInvert"
];
//Time of animate
var timerAnimate = 0;
//Define random time for switch animate
var random_a = randomNumber(10, 50);
//Animate finish
var finishAnimate = false;
/*Reprise du code pour la gestion des cookies du site : ppk.developpez.com/tutoriels/javascript/gestion-cookies-javascript/*/
//Créer un cookie
function createCookie(name, value, days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
//Lire un cookie
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//supprimer un cookie
function deleteCookie(name)
{
createCookie(name,"",-1);
}
//Function for generate random number
function randomNumber(min, max)
{
return(Math.floor(Math.random() * (max - min) + min));
}
//Function for preload image
var preloadPictures = function(pictureUrls, callback) {
var i,
j,
loaded = 0;

for (i = 0, j = pictureUrls.length; i < j; i++) {
(function (img, src) {
img.onload = function () {
if (++loaded == pictureUrls.length && callback) {
callback();
}
};

// Use the following callback methods to debug
// in case of an unexpected behavior.
img.onerror = function () {};
img.onabort = function () {};

img.src = src;
} (new Image(), pictureUrls[i]));
}
};
//Function for found random valide image
function foundRandomImage()
{
var foundImage = false;
var imageId = 0;
for(i=0;i<=999;i++)
{
var randomImage = randomNumber(0, listImgs.length);
if(listImgs[randomImage]['active'] == false)
{
imageId = randomImage;
break;
}
}
if(i == 1000 && imageId == 0)
{
finishAnimate = true;
return false;
}
else
{
listImgs[imageId]['active'] = true;
return(listImgs[imageId]['url']);
}
}
//Function for start animate
function startAnimate()
{
//Set fisrt random image
$('.s-halloween').css({
"position" : "fixed",
"top" : "0px",
"bottom" : "0px",
"left" : "0px",
"right" : "0px",
"z-index" : "99999",
"background-color" : "black",
"display" : "block"
});
$('.s-halloween img').attr('src', foundRandomImage()).attr('style', '').css({
"height" : "100%"
});
//Start interval
var animateObject = setInterval(function (){
if(finishAnimate == true)
{
clearInterval(animateObject);
setTimeout(function (){
$('.s-halloween img').attr('src', 'https://i.luwe.fr/0864e8a4.png').css({
"height" : "100%",
"width" : "100%"
});
setTimeout(function (){
$('.s-halloween').css({
"display" : "none"
});
for(id in listImgs)
{
listImgs[id]['active'] = false;
}
//Time of animate
timerAnimate = 0;
//Define random time for switch animate
random_a = randomNumber(10, 50);
//Animate finish
finishAnimate = false;
}, 3000);
}, 300);
}
//Inscrement timer
timerAnimate++;
if(timerAnimate == random_a)
{
//Get random animate type
var random_b = randomNumber(0, listAnimateType.length);
switch(listAnimateType[random_b])
{
case "zoomSimple":
var random_c = randomNumber(50, 100);
random_a += random_c;
$('.s-halloween img').animate({
"height" : "200%",
"margin-top" : "-50%"
}, random_c, function(){
$('.s-halloween img').attr('src', foundRandomImage()).attr('style', '').css({
"height" : "100%"
});
});
break;
case "blackAndWhite":
var random_d = randomNumber(5, 20);
var random_e = randomNumber(50, 100);
random_a += random_e * random_d;
var executedCount_a = 0;
var intervalBlackAndWhite = setInterval(function (){
if(executedCount_a <= random_d)
{
var random_f = randomNumber(50, 100);
//Set white color
$('.s-halloween img').css({
"display" : "none"
}).parent().css({
"background-color" : "white"
});
//Set black color
setTimeout(function (){
$('.s-halloween img').css({
"display" : ""
}).parent().css({
"background-color" : "black"
});
executedCount_a++;
}, random_f);
}
else
{
clearInterval(intervalBlackAndWhite);
$('.s-halloween img').attr('src', foundRandomImage()).attr('style', '').css({
"height" : "100%"
});
}
}, random_e);
break;
case "showAndHide":
var random_g = randomNumber(5, 20);
var random_h = randomNumber(50, 100);
random_a += random_h * random_g;
var executedCount_b = 0;
var intervalShowAndHide = setInterval(function (){
if(executedCount_b <= random_g)
{
var random_i = randomNumber(50, 100);
//Hide
$('.s-halloween img').parent().css({
"display" : "none"
});
//Show
setTimeout(function (){
$('.s-halloween img').parent().css({
"display" : "block"
});
executedCount_b++;
}, random_i);
}
else
{
clearInterval(intervalShowAndHide);
$('.s-halloween img').attr('src', foundRandomImage()).attr('style', '').css({
"height" : "100%"
});
}
}, random_h);
break;
case "alternImage":
var random_j = randomNumber(2, 10);
var random_k = randomNumber(10, 50);
random_a += random_k * random_j;
var executedCount_c = 0;
var intervalAlternImage = setInterval(function (){
if(executedCount_c <= random_j)
{
var randomImage = randomNumber(0, listImgs.length);
$('.s-halloween img').attr('src', listImgs[randomImage]['url']);
}
else
{
clearInterval(intervalAlternImage);
$('.s-halloween img').attr('src', foundRandomImage()).attr('style', '').css({
"height" : "100%"
});
}
executedCount_c++;
}, random_k);
break;
case "alternInvert":
var random_l = randomNumber(5, 20);
var random_m = randomNumber(50, 100);
random_a += random_m * random_l;
var executedCount_b = 0;
var intervalAlternInvert = setInterval(function (){
if(executedCount_b <= random_l)
{
var random_n = randomNumber(50, 100);
//Set
$('.s-halloween img').parent().css({
"filter" : "invert(1)",
"-webkit-filter" : "invert(1)",
"-moz-filter" : "invert(1)",
"-o-filter" : "invert(1)",
"-ms-filter" : "invert(1)"
});
//Reset
setTimeout(function (){
$('.s-halloween img').parent().css({
"filter" : "invert(0)",
"-webkit-filter" : "invert(0)",
"-moz-filter" : "invert(0)",
"-o-filter" : "invert(0)",
"-ms-filter" : "invert(0)"
});
executedCount_b++;
}, random_n);
}
else
{
clearInterval(intervalAlternInvert);
$('.s-halloween img').attr('src', foundRandomImage()).attr('style', '').css({
"height" : "100%"
});
}
}, random_m);
break;
}
}
else if(timerAnimate > random_a)
{
//Define random time for switch animate
random_a = randomNumber(1, 5);
//Reset timer
timerAnimate = 0;
}
}, 1);
//The animate was played
createCookie("animate_halloween_play", "true", 30);
}
</script>
<style>
body
{
height:750px;
background-color:#ecf0f1;
text-align:center;
font-family:"Arial";
}
span
{
display:block;
padding:20px;
font-size:16px;
font-weight:bold;
background-color:#8e44ad;
color:white;
cursor:pointer;
}
span:hover
{
background-color:#9b59b6;
}
</style>
</head>
<body>
<div class="s-halloween"><img src=""/></div>
<span onClick="startAnimate();">Lancer l'animation</span>
</body>
</html>
Afficher le résultat


Je le rappelle quand même, mais le but en créant cette animation était de m'amuser à mettre en pratique mes connaissances.

Voilà voilà, je pense avoir fait le tour de cette petite animation plutôt sympathique !

Si vous avez des questions, des idées, et autres, n'hésitez pas, l'espace commentaires est là pour ça :)

Sur ce, je vous souhaite une très bonne journée d'Halloween, et à très vite pour une prochaine surprise !

Poster un commentaire