Il reste très peu de temps avant l'hiver, et un grand nombre de les webmasters commencent à créer la bonne atmosphère sur leurs sites. A cette occasion, nous vous présentons notre sélection d'effets de neige pour votre site internet.

jSnow - Script générique Falling Snow avec jQuery

Nous commençons notre compilation avec un très bel effet de neige qui est ajouté au site à l'aide d'un plugin appelé "jSnow".

Manifestation:

D'accord - magnifique !

Afin d'installer cet effet sur votre site, procédez comme suit.

1. Téléchargez l'archive jsnow.zip à la fin de l'article. Décompressez et téléchargez le contenu sur votre site via FTP ou d'une autre manière qui vous convient.

Malheureusement, le script ne fonctionne pas avec les nouvelles versions de jQuery, nous nous contentons donc de ce dont nous disposons.

3. Avant incluez des scripts dans la balise de fermeture :

$(document).ready(function() ( $("body").jSnow(( vSize : 100, // Taille de la zone des flocons : 30, // Nombre de flocons de neige flakeColor : ["#fff"], // Couleur flakeMinSize : 10, // Taille minimale du flocon de neige flakeMaxSize : 20, // Taille maximale du flocon de neige fallSpeedMin : 1, // Vitesse minimale du flocon de neige fallSpeedMax : 2, // Vitesse maximale du flocon de neige flakeCode:["."] // Type de flocon de neige )) ; ) );

Ce code définit la taille des flocons de neige, la hauteur de la zone qu'ils occupent, la couleur et d'autres paramètres commentés.

Le script, comme vous l'avez compris, est universel, et au lieu de neige ronde, vous pouvez ajouter des étoiles, par exemple, comme ceci :

FlakeCode:["*"] // Vue flocon de neige

Ou un tas de neige ronde et d'étoiles :

FlakeCode:[".", "*"] // Vue flocon de neige

Ainsi que tout autre personnage (et même le signe dollar - $).

Le script est idéal pour décorer le haut du site sans chevaucher le contenu principal.

Tempête de neige - Script de chute de neige JavaScript intelligent

Pourquoi intelligent, demandez-vous ? Car dans ce script (contrairement aux autres évoqués dans cet article) il y a un effet supplémentaire de répulsion des flocons de neige. Autrement dit, lorsque vous déplacez le curseur de la souris sur votre site, les flocons de neige se précipitent dans la direction opposée à celle-ci. Plus le curseur est éloigné du milieu de l'écran, plus le vitesse plus rapide mouvements de flocon de neige.

Manifestation:

Pour installer cet effet sur votre site, aucune bibliothèque supplémentaire n'est requise. Tout ce que tu dois faire est:

1. Téléchargez l'archive snowstorm.zip à la fin de l'article. Décompressez et téléchargez le contenu sur votre site d'une manière qui vous convient.

window.onload = function() ( snowStorm.snowColor = "#fff"; // Couleur des flocons de neige snowStorm.flakesMaxActive = 100; // Nombre maximum de flocons de neige visibles snowStorm.followMouse = true; // true - suivez le curseur, false - pas de snowStorm.snowCharacter = "."; // Type de flocon de neige );

Apportez des modifications à l’animation du script si nécessaire.

Outre le fait que les flocons de neige sont repoussés du curseur, certains d'entre eux collent au bas de l'écran, donnant une légère impression de formation d'une congère par des flocons de neige.

Chutes de neige - effet de neige qui tombe avec des congères sur jQuery

J'aime le plus ce script, car il implémente de petits gruaux de neige et collecte également de petites congères sur les éléments spécifiés.

Manifestation:

Le réglage de cet effet est un peu plus long que les autres.

1. Si votre site ne dispose pas de la bibliothèque jQuery, incluez-la dans la section HEAD :

3. Attribuez la classe " darkBg" à la balise d'ouverture :

4. Avant connectez les scripts avec la balise de fermeture :

$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall(( collection: ".collectonme", flakeCount: 200 // Nombre de flocons de neige )); ));

5. Et à la dernière étape, attribuez une classe aux éléments sur lesquels des congères devraient se former :

Class="collectonme"

Si vous ne souhaitez pas la formation de congères sur le chantier, supprimez la ligne du script :

Collection : ".collectonme",

C'est une action obligatoire, sinon la neige ne tombera pas sur votre site.

Excellent script, c'est ce que nous utilisions auparavant sur notre site.

Effet de neige tombante en couches lisses avec CSS3

Ici, comme vous l'avez compris, nous n'aurons pas recours à toutes sortes de scripts, mais gérerons uniquement du CSS pur.

Manifestation:

Magique, n'est-ce pas ?

Afin d'installer cet effet vous-même, suivez trois étapes simples.

1. Téléchargez l'archive snow_img.zip à la fin de l'article. Décompressez et téléchargez le contenu sur votre site via FTP ou via gestionnaire de fichiers hébergement.

2. Insérez dans votre fichier de style (de préférence tout en bas) :

SnowContainer ( largeur : 100 % ; hauteur : 100 % ; position : absolue ; haut : 0 ; gauche : 0 ; z-index : -1 ; ) #snow ( largeur : 100 % ; hauteur : 100 % ; image d'arrière-plan : url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation : neige 20s linéaire infini ; -moz-animation : neige 20s linéaire infini; -ms-animation: neige 20s linéaire infini; animation: neige 20s linéaire infini; ) @keyframes neige ( 0% (position d'arrière-plan: 0px 0px, 0px 0px, 0px 0px; ) 100% (position d'arrière-plan : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes neige ( 0% (position d'arrière-plan: 0px 0px, 0px 0px, 0px 0px; ) 100% (position d'arrière-plan: 500px 1000px, 400px 400px, 300px 300px; ) ) @-webkit-keyframes neige ( 0% (position d'arrière-plan : 0px 0px, 0px 0px, 0px 0px; ) 100% (position d'arrière-plan : 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- images clés neige ( 0 % (position d'arrière-plan : 0px 0px, 0px 0px, 0px 0px ; ) 100 % (position d'arrière-plan : 500px 1000px, 400px 400px, 300px 300px; ) )

Enregistrez ensuite toutes les modifications.

Comme ça bonne sélection des effets de neige qui raviront sans aucun doute les visiteurs de votre site.

La conception Web avec jQuery est très simple ! Site Internet « Chutes de neige »

À l'approche de la nouvelle année, deux éléments apparaissent sur la plupart des sites : « des chutes de neige » et une page de soldes et de réductions. Les deux sont très faciles à faire. Neige - avec l'aide des plugins jQuery, et des remises et des ventes au moyen d'une image au-dessus de l'étiquette de prix avec une ligne rouge en gras plus, correspondant prétendument à l'ancien prix.

Cependant, nous souhaitons désormais uniquement placer « chutes de neige » sur la page du site. Pour ce faire, il existe plusieurs options simples. Examinons deux d'entre eux basés sur jQuery.

Nous commençons l'installation de "falling snow" en créant bien sûr un nouveau dossier avec le nom snow , puis téléchargeons l'archive et la décompressons dans ce dossier. Nous y obtiendrons deux scripts jquery-1.8.3.min.js et jquery.snow.js.

Ensuite, vous devez ajouter les lignes suivantes à l'en-tête de la page à l'intérieur de la balise ..., indiquant les chemins d'accès à ces scripts, et un peu de JavaScript pour initialiser la "neige qui tombe" :

$(document).ready(function()(
$.fn.neige();
});

Pour que la neige apparaisse sur la page du site, il suffit d'ajouter à l'intérieur du tag
.

Il n'y a que quatre paramètres pour ce plugin. Ils se trouvent au tout début du fichier jquery.snow.js et peuvent être modifiés dans n'importe quel éditeur ou dans le Bloc-notes :
minSize : 10 , // taille minimale du flocon de neige
maxSize : 20 , // taille maximale du flocon de neige
newOn : 500 , // fréquence des flocons de neige en ms, c'est-à-dire densité de la neige
flakeColor : "#bbbbbb" // couleur du flocon de neige

Notez également la valeur z-index:10 pour la neige, qui est définie dans les premières lignes du fichier jquery.snow.js. Il définit la position des flocons de neige au-dessus des curseurs (diaporamas) et des menus déroulants, si votre page en possède.

La deuxième version de "chute de neige"
Pour cette option, leurs propres images de flocons de neige sont utilisées, comme le montre la Fig. 1. Grâce à cela, le plugin est plus coloré et, en plus, il peut être utilisé avec succès pour d'autres effets. Par exemple, en remplaçant les dessins de flocons de neige par des pétales de rose, vous pouvez décorer la page d'un site de mariage, et les marguerites qui tombent seront utiles sur un site sur les vacances d'été.

Fig. 1. Site Internet « Chutes de neige »

Pour l'installation, nous utilisons à nouveau le dossier snow, mais maintenant nous allons y décompresser une autre archive dans laquelle, en plus des scripts, se trouvent quatre images différentes de flocons de neige. De plus, comme dans le premier exemple, à l'intérieur de la balise ..., insérez les lignes indiquant les chemins d'accès aux nouveaux fichiers « chutes de neige » :

Et enfin, ajoutez une ligne à l'intérieur de la balise (de préférence en haut de la page)
.

Si vous n'avez pas de neige, assurez-vous de saisir l'adresse complète des images de flocon de neige dans la ligne suivante du fichier snow.js :
varimg=" "; .

L'ajustement de la densité de la neige est défini dans le même fichier avec un argument numérique dans la ligne
setTimeout("neige("+id+");",100 ); // fréquence des flocons de neige,
et la vitesse de déplacement des flocons de neige d'affilée
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // vitesse des flocons de neige

Aussi, comme dans la première option, faites attention à la valeur de z-index:10 pour que la neige chevauche les curseurs situés sur la page, les menus déroulants, etc.

Bonne journée et bonne année. A la veille de la nouvelle année, je souhaite partager avec vous un plugin de chute de neige très léger, beau et sans prétention. Ce script est vraiment très léger et peut être facilement placé dans un fichier HTML sans rendre son utilisation difficile. Code HTML site om. C'est vrai, il peut être retiré dans fichier séparé. Mais pour plus de commodité, j'ai tout fait dans un seul fichier.

Il y a peu à dire ici, il vaut mieux voir une démonstration de cette neige qui tombe. De plus, on y retrouve un très beau fond et l'inscription "Bonne année" écrite belle police"Homard" par Google. Vous pouvez facilement transformer ce fichier en carte postale Internet avec des félicitations.

Connecter le script des flocons de neige qui tombent au site fini 1. Connectez-vous bibliothèque jQuery

On le connecte ainsi : entre les balises et insérez le code suivant :

2. Connectez les styles

Collez le code CSS dans votre fichier CSS (généralement style.css) :

#canvas ( bordure : 1px noir uni ; position : absolue ; z-index : 10000 ; ) #flake ( couleur : #fff ; position : absolue ; taille de police : 25px ; haut : -50px ; )

3. Créez le fichier snow.js

Créons un fichier snow.js et collons-y le code javascript suivant :

var t = setInterval(function()( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random( ); var sizeFlake = 10 + Math.random() * 20; var endPositionTop = documentHeight - 40; var endPositionLeft = startPositionLeft - 100 + Math.random() * 200; var duréeFall = documentHeight * 10 + Math.random() * 5000;$("#flake") .clone() .appendTo("body") .css(( gauche : startPositionLeft, opacité : startOpacity, "font-size": sizeFlake )) .animate(( haut : endPositionTop, gauche : endPositionLeft, opacité : 0,2 ), duréeFall, "linear", function() ( $(this).remove() )); ), 500); var neige = (); var snowflex = (); snowflex.create = function()( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex. style.top = - 50 + Math.random() * 20 + "px" ; flex.style.left = Math.random() * 1500 + "px" ; flex.style.position = "absolu" ; flex.style .color = "#F3F3F3"; flex. style. opacity = Math. random (); document. getElementsByTagName ("body"). appendChild (flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function()( flex.style.top = parseInt(flex. style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t) ;document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function()( var t = setInterval(function()( snow.snowflex(); ), 500); ); //tempête de neige(); var brouillard = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); fog.start = function()( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function()( x = 300 + 300*Math.sin(x);y = 300 + 300* -Math.cos(x);x += 2;fog.draw(ctx, x, y); ), 100); ); //début de brouillard();

Inclure le fichier js dans :

4. Insérez le code HTML

Eh bien, la chose la plus importante reste : insérez le code html des chutes de neige n'importe où dans :

❄

Si vous avez tout fait correctement, la neige commencera à tomber sur votre site.

Connexion image de fond, gros en-tête et flocons de neige qui tombent

Cette variante diffère en ce qu'elle a image de fond et un gros titre "Bonne année". Connecter cette version du script Falling Snow au site est assez simple. Besoin de:

1. Téléchargez l'archive et décompressez-la 2. Connectez la bibliothèque jQuery

Assurez-vous d'inclure la bibliothèque jQuery (pas nécessaire si cette bibliothèque est déjà incluse). On le connecte ainsi : entre les balises et insérez le code suivant :

3. Connectez la police "Lobster"

De la même manière que pour la bibliothèque jQuery, nous incluons la police pour notre inscription « Bonne année » :

Naturellement, si vous n'avez pas besoin de cette inscription et de cette police, vous ne pouvez pas l'inclure, mais alors en CSS, supprimez l'attribut "font-family: "Lobster", cursive;" de H1, ou remplacez-le par votre propre police.

4. Y compris les styles

Option A. Collez le code CSS dans votre fichier CSS. Voici le code :

Img.bg ( /* Définir des règles pour remplir l'arrière-plan */ min-height : 100 % ; min-width : 1024px; /* Configurer une mise à l'échelle proportionnelle */ width : 100 %; height : auto; /* Configurer le positionnement */ position : fixe ; haut : 0 ; gauche : 0 ; ) h1 ( famille de polices : "Lobster", cursive ; couleur : #FFF ; taille de police : 90 px ; alignement du texte : centre ; hauteur de ligne : 95 px ; police- poids : normal ; marge supérieure : 300 px ; ombre du texte : 5px 5px 5px #000 ; ) @media screen et (largeur maximale : 1024px) ( /* Spécifique à cette image particulière */ img.bg ( gauche : 50 % ; marge gauche : -512 px ; /* 50 % */ ) ) html, corps ( famille de polices : Helvetica, Arial, sans-serif ; taille de police : 12 px ; hauteur de ligne : 16 px ; remplissage : 0 ; marge : 0; couleur : #333 ; ) .bar ( couleur d'arrière-plan : #111 ; couleur : #f0f0f0 ; ombre de la boîte : 0px 0px 2px #333 ; hauteur de ligne : 25px ; remplissage : 0px 20px ; opacité : 0,7 ; ) . bar:hover ( opacité : 1; ) .bar a ( couleur : #DDD ; ) .bar a:hover ( couleur : #FFFFFF ; ) a ( couleur : #FFFFFF ; décoration de texte : aucun ; ) a:hover ( couleur : #CCC; ) #canvas ( bordure : 1px noir uni ; position : absolue ; indice z : 10 000 ) #flake ( couleur : #fff ; position : absolue ; taille de police : 25px ; haut : -50px ; ) #page ( position : relative ; )

Option B. Vous pouvez également créer un fichier séparé, par exemple snow.css et y coller le même code, bien qu'il devra être inclus dans l'en-tête comme suit :

5. Connectez le script de chute de neige

Option A. Pour ce faire, il faut insérer le code javascript suivant tout en bas du site (avant la fermeture) :

var t = setInterval(function()( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0.5 + Math.random( ); var sizeFlake= 10 + Math.random() * 20; var endPositionTop= documentHeight - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; var duréeFall= documentHeight * 10 + Math.random() * 5000;$("#flake") .clone() .appendTo("body") .css(( gauche : startPositionLeft, opacité : startOpacity, "font-size": sizeFlake )) .animate(( haut : endPositionTop, gauche : endPositionLeft, opacité : 0,2 ), duréeFall, "linear", function() ( $(this).remove() )); ), 500); var neige = (); var snowflex = (); snowflex.create = function()( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex. style.top = - 50 + Math.random() * 20 + "px" ; flex.style.left = Math.random() * 1500 + "px" ; flex.style.position = "absolu" ; flex.style .color = "#F3F3F3"; flex. style. opacity= Math. random (); document. getElementsByTagName ("body"). appendChild (flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function()( flex.style.top = parseInt(flex. style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t) ;document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function()( var t= setInterval(function()( snow.snowflex(); ), 500); ); //tempête de neige(); var brouillard = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); fog.start = function()( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function()( x = 300 + 300*Math.sin(x);y = 300 + 300* -Math.cos(x);x += 2;fog.draw(ctx, x, y); ), 100); ); //début de brouillard();

Option B. Tout comme avec le code CSS, javascript peut être déplacé vers un fichier séparé et également appelé snow.js et inclus dans l'en-tête :

6. Remplissez l'image d'arrière-plan

Téléchargez l'image bg.jpg de l'archive à la racine de votre site

7. Insérez le code HTML

Eh bien, le plus important reste : insérer le code html de la neige qui tombe :

Bonne année! ❄

Le script Falling Snow s'est connecté avec succès. Assurez-vous de le vérifier en action. Tous mes vœux!