Animations Festives

Publié le par

Dans cet article, nous allons vous montrer comment créer différentes animations festives. Que vous souhaitiez ajouter des feux d’artifices ou une pluie de confettis pour célébrer la une heureuse occasion, nous avons ce qu’il vous faut.

Sommaire

Chute de confettis

Avez-vous déjà vu ces confettis sympas sur un site web  ? Ce plugin vous donne le pouvoir de créer le même effet gratuitement et sans avoir à le concevoir ou à le coder à partir de zéro.

Installation / Utilisation

=> Téléchargement

  • À l’aide de npm
  npm install confetti-js --save

=> Ajouter des scripts

  • Chemin classique :
<script src="node_modules/confetti-js/dist/index.min.js"></script>
  • Module ES6 :
// Au niveau du composant où vous souhaitez utiliser des confettis, 
import ConfettiGenerator from "confetti-js";

=> Comment l’utiliser ?

Après avoir installé le plugin, appelez-le simplement en passant vos options :

  • HTML
<canvas id="my-canvas"></canvas>
  • Javascript
var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();

Vous pouvez également passer un élément canvas comme cible :

var confettiElement = document.getElementById('my-canvas');
var confettiSettings = { target: confettiElement };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
  • React
React.useEffect(() => {
  const confettiSettings = { target: 'my-canvas' };
  const confetti = new ConfettiGenerator(confettiSettings);
  confetti.render();

  return () => confetti.clear();
}, []) // add the var dependencies or not

Terminé !

Pour plus d’options et d’informations, vous pouvez consulter le site officiel, la démo ou les exemples.

Feux d’artifice

Un plugin jQuery simple à utiliser et entièrement configurable utilisé pour créer des animations de feux d’artifice réalistes avec des effets sonores d’explosion pour les célébrations.

Comment l’utiliser:

  • Téléchargez le plugin, puis placez le jquery.fireworks.jsscript après la dernière bibliothèque jQuery.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.fireworks.js"></script>
  • Créez un élément conteneur où vous souhaitez que les animations de feux d’artifice soient placées.
<div class="demo">
</div>
  • Initialisez le plugin en appelant la fonction fireworks comme ceci :
$('.demo').fireworks({ 
  sound: true, // sound effect
  opacity: 0.9, 
  width: '100%', 
  height: '100%' 
});

Ce plugin jQuery est développé par mgrigajtis . Pour plus d’utilisations avancées, veuillez consulter la page de démonstration ou visiter le site officiel.

Flocons de neige

Décorez votre page Web avec ce superbe effet ! Regardez la neige tomber doucement sur la page, puis disparaître. 

L’image utilisée est modifiable, donc la neige n’est certainement pas le seul effet que ce script peut rendre…

Instructions

  • Enregistrez et téléchargez sur votre site l’une des deux images suivantes (selon l’effet que vous souhaitez), en cliquant avec le bouton droit sur l’image, et en choisissant « enregistrer sous » :
  • Après avoir fait cela, ajoutez simplement le morceau de code ci-dessous à la section <BODY> de votre page, à la fin , en dehors de toute autre balise :
<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
  function openwindow(){
window.open("autumn_effect.htm","","width=350,height=500")
}

  //Configure below to change URL path to the snow image
  var snowsrc="snow.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

	function iecompattest(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	}

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  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 (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
	if (snowdistance=="windowheight"){
		doc_height = window.innerHeight || iecompattest().clientHeight
	}
	else{
		doc_height = iecompattest().scrollHeight
	}
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

	function hidesnow(){
		if (window.snowtimer) clearTimeout(snowtimer)
		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
	}
		

if (ie4up||ns6up){
    snowIE_NS6();
		if (hidesnowtime>0)
		setTimeout("hidesnow()", hidesnowtime*1000)
		}

</script>
  • Assurez-vous que la variable "snowsrc" dans le code ci-dessus référence correctement le chemin d’URL complet vers l’image utilisée. Voilà !

Pour plus d’informations, vous pouvez consulter le site officiel.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *