Bonne journée et bonne année. À la veille du Nouvel An, je veux 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 fichier html, sans compliquer le travail avec Code HTML site om. Certes, il peut être retiré dans un 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 chute de neige. De plus, il y a un très beau fond et l'inscription "Happy New Year" écrite belle police"Homard" par Google. Vous pouvez facilement transformer ce fichier en une carte postale Internet avec des félicitations.

Relier le script des flocons de neige qui tombent au site fini

1. Inclure la bibliothèque jQuery

Il se connecte comme ceci : entre les balises et collez le code suivant :

2. Reliez 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 collez-y le code javascript suivant :

Inclure le fichier js dans :

4. Insérez le code html

Eh bien, la chose la plus importante reste - insérez le code html de la chute de neige à n'importe quel endroit de :

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

Relier une image d'arrière-plan, un grand en-tête et des flocons de neige qui tombent

Cette variante est différente en ce qu'elle a une image de fond et un grand titre "Bonne année". Connecter cette version du script de chute de neige au site est assez simple. Besoin de:

1. Téléchargez l'archive et décompressez-la

2. Inclure la bibliothèque jQuery

Assurez-vous d'inclure la bibliothèque jQuery (pas nécessaire si vous avez déjà inclus cette bibliothèque). Il se connecte comme ceci : entre les balises et collez le code suivant :

3. Connectez la police "Lobster"

De la même manière que pour inclure la bibliothèque jQuery, nous incluons la police de notre inscription "Happy New Year":

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

4. Inclure les styles

Variante 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 ( font-family : "Lobster", cursive ; color : #FFF ; font-size : 90px ; text-align : center ; line-height : 95px ; font- poids : normal ; margin-top : 300px ; text-shadow : 5px 5px 5px #000 ; ) @media screen and (max-width : 1024px) ( /* Spécifique à cette image particulière */ img.bg ( left : 50 % ; margin-left : -512px ; /* 50 % */ ) html, body ( famille de polices : Helvetica, Arial, sans-serif ; taille de police : 12 px ; hauteur de ligne : 16 px ; rembourrage : 0 ; marge : 0; color: #333; ) .bar ( background-color: #111; color: #f0f0f0; box-shadow: 0px 0px 2px #333; line-height: 25px; padding: 0px 20px; opacity: 0.7; ) . bar:hover ( opacity: 1; ) .bar a ( color: #DDD; ) .bar a:hover ( color: #FFFFFF; ) a ( color: #FFFFFF; text-decoration: none; ) a:hover ( color : #CCC; ) #canvas ( bordure : 1px noir uni ; position : absolut e; indice z : 10000 ) #flake ( couleur : #fff ; position : absolue ; taille de la police : 25 px ; haut : -50 px ; ) #page ( position : relative ; )

Variante 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 le head comme suit :

5. Connectez le script de chute de neige

Variante A. Pour cela, il faut insérer tout en bas du site (avant de fermer) le code javascript suivant :

Variante B. Tout comme avec le code CSS, le javascript peut être placé dans un fichier séparé et également appelé snow.js et inclus dans le head :

6. Remplissez l'image de fond

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

7. Insérez le code html

Eh bien, la chose la plus importante reste - pour insérer le code html de la neige qui tombe :

Script de chute de neige connecté avec succès. Assurez-vous de le vérifier en action. Tous mes vœux!

Bonjour! Il y a exactement trois ans, j'ai déjà écrit,. Mais il s'est avéré que le script que j'ai alors proposé, et la manière de l'installer, n'étaient pas tout à fait clairs pour de nombreux lecteurs de mon blog. J'ai été littéralement bombardé de questions, car dans ce cas, il était nécessaire d'écrire des ajouts au code, de télécharger des fichiers dans le dossier racine ... Bien sûr, je devais aider tous ceux qui postulaient, et cela, comme vous le comprenez vous-même, a pris beaucoup de temps.

Mais, comme on dit, le temps ne s'arrête pas. Pas plus tard qu'hier, dans l'immensité de notre Internet omniscient, je suis tombé par hasard sur un excellent script et je connais maintenant une autre façon d'installer des flocons de neige qui tombent sur le site. Par souci d'intérêt sportif, je l'ai essayé en action. Vous voyez vous-même les résultats. Le script ne ralentit pas la vitesse de chargement des pages du site, s'adapte à presque tous les CMS, ne dérange pas les lecteurs - il crée simplement de la bonne humeur !

Pour ceux qui ont aimé ces flocons de neige qui tombent, je vais vous raconter les détails de leur "fabrication". Et ils sont préparés à l'aide de ce petit script :

Et c'est tout! Plus de dossiers de fichiers ou de fichiers individuels. Il suffit de mettre ce code juste après la balise d'ouverture et l'ambiance du Nouvel An est déjà avec vous.

Mais tous les thèmes sont différents et dans mon cas j'ai dû installer le script ailleurs. Ce scénario J'ai inséré dans l'en-tête du site dans le fichier header.php immédiatement après la balise et tout fonctionne très bien.

Mais je vous préviens immédiatement que lorsque vous travaillez avec l'éditeur de thème, vous devez absolument faire sauvegarde juste au cas où, pour être sûr. Soudain, vous faites quelque chose de mal et faites une erreur, puis vous pouvez tout réparer sans problème en utilisant une sauvegarde.

D'après les détails, je peux ajouter que 40 flocons de neige d'une taille maximale de 35px sont "cousus" dans le script. Et je pense aussi que valeurs optimales. Malheureusement, je n'ai pas pu trouver le nom de l'auteur de la publication trouvée afin de le remercier vivement pour le travail accompli.

Et les flocons de neige décoreront non seulement le site, mais seront également un excellent ajout à ceux qui créeront des cartes de vœux «virales» pour le Nouvel An, s'il y a de tels fans de bonne humeur parmi ceux qui lisent cet article. Au fait, vous pouvez intégrer des codes dans ces cartes postales virales et gagner de l'argent dessus.

J'espère que cette chute de neige moelleuse ne vous laissera pas non plus indifférent et qu'elle ravira les lecteurs de votre blog tout au long des vacances à venir.

Si vous avez des questions, vous pouvez les poser dans les commentaires de cet article. Je vous souhaite tout le meilleur et vous souhaite une bonne année 2015 ! J'attends vos commentaires avec impatience et me ferai un plaisir d'y répondre.

Bonjour chers amis! Bien que l'hiver soit fini, j'ai quand même envie de vous dire comment créer des flocons de neige qui tombent sur un site WordPress pour se souvenir un peu des journées d'hiver :-). Nous allons créer des flocons de neige qui tombent à l'aide d'un script et d'un plugin.

Autrement dit, dans cet article, nous analyserons deux méthodes de travail absolument. Là, vous déciderez vous-même quelle option vous préférez. Passons donc à la partie pratique de la leçon.

Comment faire tomber des flocons de neige WordPress avec un plugin ?

Surfer sur Internet à la recherche la meilleure option J'ai opté pour le plugin - WP Super Snow. Dans certains articles, je suis tombé sur d'autres options, mais dans tous, les auteurs n'ont pas mis à jour leurs créations depuis longtemps. WordPress est constamment mis à jour et développé. Par conséquent, ici, vous devez constamment maintenir votre projet afin d'être compatible avec toutes les versions.

Alors, allons dans la section Plugins - Ajouter un nouveau et installez le plugin Falling Snowflake pour WordPress.

Cliquez sur le bouton Installer, nous faisons tout comme d'habitude. Au fait, si vous ne savez toujours pas comment faire, mon article vous y aidera.

Excellent! Nous avons installé et activé le plugin. Après cela, une section Super Snow apparaîtra sur le côté gauche de votre panneau d'administration WordPress.

En entrant, vous verrez que le plugin est désactivé et que vous devez l'activer.

Nous allons maintenant passer en revue les paramètres de base.

La première section est Protections de désactivation (Sécurité lors de la désactivation) - laissez le premier élément de la liste déroulante tel quel, ne changez rien. De plus, il est recommandé. Ici on nous prévient simplement que si vous supprimez le plugin du menu général, alors rien n'est perdu. Si vous souhaitez effacer toutes les traces du plugin sur le site, vous devez cliquer sur la première option. Montré ici :

Dans cette section, vous pouvez définir la taille des flocons de neige qui tombent et leur nombre, ajouter votre propre version des flocons de neige, spécifier dans quelle balise ils doivent être placés. Par défaut, tout est enveloppé dans la balise body. Vous pouvez également le remplacer. Vous pouvez également spécifier un délai en secondes pour la chute des flocons de neige sur le site, les effets.

L'avant-dernière option consiste à afficher les flocons de neige qui tombent sur les pages et les publications. N'oubliez pas qu'il n'y aura pas de neige sur les appareils mobiles, car elle y est tout simplement exclue.

Par exemple, vous ne pouvez déclencher la chute de flocons de neige que sur des pages spécifiques en le spécifiant avec fonction spéciale(Ils sont listés sur la page)

Voici des exemples de fonctions :

wp_is_mobile() && is_page("noel-promo")— si cette page n'est pas mobile, affichez-la sur la page de promotion de Noël

Wp_is_mobile() && ! est_ssl()- ne pas montrer si ce n'est pas le cas appareil mobile et non sécurisé protocole https et ssl

wp_is_mobile() && temps() >= strtotime("2015-12-01") && temps()<= strtotime ("2015-12-31" ) - ne pas afficher sur les appareils mobiles et afficher uniquement dans la période au plus tard le 12 janvier et au plus tôt le 31 décembre. Autrement dit, nous définissons l'intervalle de temps.

Après toutes les actions et réglages effectués, nous cliquons sur "Enregistrer les modifications".

Voici ce que vous obtenez à peu près dans le navigateur.

Cela a entraîné de gros flocons de neige tombant lentement sur un site de test WordPress. Très mignon aussi.

Comment faire tomber des flocons de neige sur le site grâce à un script ?

Dans l'exemple ci-dessus, nous avons créé des flocons de neige à l'aide d'un plugin. C'est peut-être bien, mais nous savons tous que les plugins rendent le site plus lourd et plus lent. Pour ceux qui ont l'habitude de tout faire via des fonctions et du code, je suggère de faire tomber des flocons de neige via un script. Il y en a beaucoup sur le web. Je vais me concentrer sur l'option la plus simple - Snowstorm.

Vous pouvez télécharger ce script ici - snowstorm.zip

Que devez-vous faire en premier ? La première étape consiste à créer un répertoire de dossiers dans lequel vous pouvez mettre votre code javascript. J'ai créé un dossier Lib à la racine du site et je l'ai déjà téléchargé.

A l'intérieur, il n'est plus nécessaire de créer de dossiers pour ne pas allonger le chemin.

Ensuite, nous allons au modèle de pied de page de notre site et à la balise de fermeture < / body > Nous connectons notre script avec cette ligne :

Pour plus de clarté, je vais montrer où je l'ai inséré:

Assurez-vous d'enregistrer toutes les modifications et voici ce que vous devriez obtenir sur le site :

Vous pouvez maintenant "jouer" avec nos flocons de neige sur le site, c'est-à-dire définir leur vitesse, leur taille, le nombre de flocons de neige eux-mêmes et d'autres paramètres. Pour ce faire, nous devons apporter de petites modifications au script.

Collez le code suivant ci-dessous dans la zone de pied de page :

Dans le modèle, tout ressemblera à ceci :

Voyons maintenant ce qui s'est passé dans le navigateur :

Comme nous pouvons le voir, nos flocons de neige sur le site sont devenus d'une douce couleur bleutée, il s'est avéré être une vraie chute de neige sur le site 🙂

Autres paramètres de script de flocon de neige

Afin de "pervertir" encore plus le script, je passerai en revue d'autres options.

tempête de neige. autoStart = true ;- choix entre si la neige apparaîtra automatiquement au chargement de la page ou non.

tempête de neige. animationInterval = 33 ;- mesure de l'intervalle de millisecondes par image. Avec la valeur = 20, c'est rapide et fluide, mais cela chargera le processeur. Si vous mettez = 50, alors c'est plus conservateur, mais plus lent.

tempête de neige. floconBas = null ;- limiter l'adhérence de la neige en bas de page. Si non spécifié, la neige collera simplement au bas de la page du site et disparaîtra avec le défilement ou le défilement.

tempête de neige. floconsMax = 128 ;- définir une valeur nombre maximal flocons de neige tombant dans n'importe quelle partie de la page par unité de temps.

tempête de neige. floconsMaxActive = 64 ;- définit la limite de chute des flocons de neige (c'est-à-dire se déplaçant sur l'écran et considéré comme actif).

tempête de neige. followMouse = true ;- permet à la neige de se déplacer sur le site avec du "vent" par rapport au déplacement de la souris selon l'axe X (gauche/droite).

tempête de neige. freezeOnBlur = vrai ;- arrêter l'effet flocon de neige lorsque l'utilisateur est dedans ce moment quitte la fenêtre du navigateur, par exemple passe à un autre onglet, puis la neige s'arrête. Cela économise du CPU et est plus agréable pour l'utilisateur.

tempête de neige. Couleurneige = "#fff" ;- couleur blanche de la neige (ne pas manger ou utiliser de la neige jaune sur le site :-))

tempête de neige. neigeCaractère = " " ;- . ( ) = puce. · L'entité (·) n'est pas utilisée car elle est considérée comme un carré dans certains systèmes. Tout changement peut entraîner la coupure de notre flocon de neige et peut également entraîner des changements de flakeWidth (longueur) / flakeHeight (hauteur), alors soyez prudent.

tempête de neige. SnowStick = vrai ;- le paramètre permet aux flocons de neige de "coller" au bas de l'écran, lorsqu'il est éteint, la neige ne se déposera jamais au bas de l'écran.

tempête de neige. targetElement = null ;- c'est un peu plus compliqué ici, j'ai compris comment l'élément html est écrit par défaut dans le corps du document ( corps). Il peut s'agir d'un élément d'ID de ligne, tel que "myDiV" ou d'un lien DOM. Quelque chose comme ça.

tempête de neige. useMeltEffect = true ;- avec le support de ce paramètre, la neige tombée fondra, lorsque la valeur est activée.

tempête de neige. useTwinkleEffect = vrai ;- Permet à la neige de scintiller hors de vue lorsqu'elle tombe.

tempête de neige. usePositionFixed = faux ;- avec une valeur booléenne de true - la fenêtre de défilement n'affectera pas la chute de neige, c'est-à-dire qu'elle ira et ira. Cela augmente considérablement la charge sur le processeur. Le défaut est faux.

tempête de neige. vMaxX = 8 ; tempête de neige. vMaxY = 5 ;— la valeur de la vitesse des flocons de neige en x et y pour la tempête. Une variable aléatoire dans cette plage est choisie pour chaque flocon de neige.

C'est tout chers amis, il est fort possible que j'aie fait une erreur quelque part en expliquant les paramètres du script, alors vous me corrigez. Pour moi, en général, tout fonctionne bien et plaît à l'œil. Merci de votre attention, j'attends vos commentaires et discussions avec impatience. J'ai une question pour vous - quel effet utilisez-vous avec le début de l'hiver pour le site ? 🙂

s'occuper de la décoration du site. Vous allez sur le site, et là, neige qui tombe ou flocons de neige, l'esprit des fêtes se fait sentir et une bonne ambiance festive se crée immédiatement. Bien que la neige soit virtuelle, elle plaît toujours. Êtes-vous d'accord? Oui bien sur. Alors, aujourd'hui, je vais vous dire - Comment ajouter, activer, installer de la neige ou des flocons de neige sur le site.

Pour cela, il existe des plugins spéciaux avec lesquels vous pouvez vacances activer les chutes de neige ou les flocons de neige sur le site, et pour ceux qui ont peur des modules, il existe un script pour les chutes de neige sur le site. Je vous présenterai le script à la toute fin du post. En attendant, les plugins les plus simples mis à jour et compatibles avec dernière version WordPress.

Plugin Snow Flurry - il neige sur un site WordPress

Plugin simple et entièrement personnalisable. Installable : taille maximum flocons de neige; à quelle fréquence de nouveaux flocons sont créés ; ajouter la vitesse minimale et maximale de chute de neige, la couleur du flocon de neige, ainsi que la possibilité de désactiver le plugin après un certain nombre de secondes. Après avoir installé et activé le plugin, une section avec le nom approprié apparaîtra dans le panneau d'administration :

Super plugin WFS Let It Snow - ajoute des chutes de neige à votre site

Plug-in WFS Let It Snow

Un excellent plugin jQuery, avec lui, vous pouvez simplement faire une vraie chute de neige sur le site, c'est-à-dire un voile blanc. Dans les paramètres, vous pouvez sélectionner le type de chute de neige parmi quatre options : légère, moyenne, lourde et voile blanc. Et aussi, faites tomber des flocons de neige uniquement sur page d'accueil ou pas du tout ; activer/désactiver la neige ; taille minimale et maximale des flocons de neige ; minimum et vitesse maximum flocons; activer les ombres (pour les sites Web avec un fond blanc):

Configuration du plug-in WFS Let It Snow

Ici, également après l'installation et l'activation du plugin, la sous-section Let It Snow apparaîtra dans la section de configuration, cliquez et configurez. Nous allons plus loin.

Tribulant Snow Storm - un blizzard sur votre site

J'ai plus aimé ce plugin, je ne sais même pas pourquoi, peut-être à cause de la direction des chutes de neige, un blizzard de neige réagit au mouvement du pointeur de la souris (si vous activez cette option). Cool, les visiteurs vont adorer. Plus des paramètres : la couleur de la neige ; la quantité de flocons; intervalle d'animation ; assistance mobile ; la neige fond en bas de l'écran et un effet de scintillement :

C'est probablement tout avec les modules de décoration du site avec des chutes de neige, auxquels vous devriez prêter attention. Moi aussi, j'organiserai un blizzard sur le blog à l'approche du Nouvel An. Une chose est dommage, si vous avez un fond clair du site (j'en ai aussi) vous devrez changer de blanc neige pour un autre, par exemple : bleu ou bleu clair. Quelque chose comme ca. J'ai presque oublié, tous les plugins présentés sont installés de manière standard, via le panneau d'administration - ajoutez le plugin et entrez son nom dans le champ de recherche.

Maintenant, pour ceux qui ne veulent pas jouer avec les plugins, le moyen le plus simple est comment installer des chutes de neige sur un site web sans plugin .

Script de chute de neige

Le script de flocon de neige qui tombe convient à n'importe quel site Web ou blog sur n'importe quelle plate-forme. Vous n'avez qu'à bricoler (le script doit être téléchargé sur votre hébergement), vous pouvez utiliser votre hébergement là où se trouve votre site, ou vous pouvez en utiliser un tiers, par exemple : gratuit et Google Drive. Et voici donc le code du script :

/* Snow Fall 1 - pas d'images - Java Script Visitez http://rainbow.arch.scriptmania.com/scripts/ pour ce script et bien d'autres */ // Définissez le nombre de flocons de neige (plus de 30 - 400 non recommandé) var snowmax=100 // Définit les couleurs de la neige. Ajoutez autant de couleurs que vous le souhaitez var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5") // Définissez les polices qui créent les flocons de neige. Ajoutez autant de polices que vous le souhaitez var snowtype=new Array("Times") // Définissez la lettre qui crée votre flocon de neige (recommandé : *) var snowletter="*" // Définissez la vitesse de descente (plage de valeurs recommandées de 0,3 à 2) var sinkspeed=0,6 // Définissez la taille maximale de vos flocons de neige var snowmaxsize=35 // Définissez la taille minimale de vos flocons de neige var snowminsize=8 // Définissez la zone de neige // Définissez 1 pour tous -over -snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=1 //////////////// // /////////////////////////////////////////////// /// /////// // LA CONFIGURATION SE TERMINE ICI ////////////////////////////////// // ////////////////////////////////// // Ne pas modifier sous cette ligne var snow=new Array () var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=nouveau tableau(); var ltrght=nouveau tableau(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5|| ns6||opera function randommaker(range) ( rand=Math.floor(range*Math.random()) return rand ) function initsnow() ( if (ie5 || opera) ( marginbottom = document.body.scrollHeight marginright = document .body.clientWidth-15 ) sinon si (ns6) ( marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 ) var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+"px"; snow[i].style.color=snowcolor snow[i].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+"px"; snow[i].style.top=snow[i].posy+"px"; } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px"; snow[i].style.top=snow[i].posy+"px"; if (snow[i].posy>=marginbottom-2*neige[i].taille || parseInt(neige[i].style.left)>(marginright-3*lftrght[i]))( if (snowingzone==1) (snow[i].posx=randommaker(marginright-snow[i].size) ) si (snowingzone==2) (snow[i].posx=randommaker(marginright/2-snow[i].size)) if (snowingzone==3) (snow[i].posx=randommaker(marginright/2 -snow[i].size)+marginright/4) if (snowingzone==4) (snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2) snow[i] .posy=0 ) ) var timer=setTimeout("movesnow()",50) ) for (i=0;i<=snowmax;i++) { document.write(""+snowletter+"") ) si (navigateur) ( window.onload=initsnow )

Avant de télécharger ce script sur l'hébergement, il doit être (si nécessaire) modifié, c'est-à-dire la couleur de la neige, la quantité, la vitesse, etc. Ensuite, téléchargez le code sur l'hébergement et collez le lien ici :

La prochaine étape, nous insérons cette conception après la balise dans votre modèle et vous avez terminé. Vous aurez une boule de neige sur le blog, sous forme de flocons de neige. Et je te dis au revoir, pas pour longtemps. Bonne chance.

(fonction(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId : "R-A -292864-4", renderTo : "yandex_rtb_R-A-292864-4", asynchrone : vrai )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript" ; s.src = "//an.yandex.ru/system/context.js" ; s.async = true ; t.parentNode.insertBefore(s, t); ))(this , this.document, "yandexContextAsyncCallbacks");

Il reste très peu de temps avant l'hiver, et un grand nombre de webmasters commencent à créer l'ambiance adéquate 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 de chute de neige 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 !

Pour installer cet effet sur votre site, procédez comme suit.

1. Télécharger 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 que nous avons.

3. De face balise de fermeture connecter les scripts :

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 le comprenez, est universel, et au lieu de neige ronde, vous pouvez ajouter des étoiles, par exemple, comme ceci :

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

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

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

Ainsi que tout autre caractère (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 la vitesse des flocons de neige est rapide.

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écharger l'archive tempête de neige.zipà la fin de l'article. Décompressez et téléchargez le contenu sur votre site d'une manière qui vous convient.

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 se collent au bas de l'écran, donnant une légère impression de formation d'une congère par les flocons de neige.

Chutes de neige - effet de chute de neige avec 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 DIRIGER:

3. Balise d'ouverture attribuer la classe " darkBg»:

4. De face balise de fermeture inclure des scripts :

5. Et à l'étape finale, attribuez une classe aux éléments sur lesquels les congères doivent se former :

Class="collectonme"

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

Collection : ".collectonmoi",

Il s'agit d'une action obligatoire, sinon la neige sur votre site ne tombera pas.

Excellent script, c'est ce que nous avons utilisé sur notre site auparavant.

Effet de neige tombante en couches lisse avec CSS3

Ici, comme vous l'avez compris, nous n'allons pas recourir à l'utilisation de toutes sortes de scripts, mais ne gérerons que du pur CSS.

Manifestation:

Magique, n'est-ce pas ?

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

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

2. Collez dans votre feuille 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 % ; background-image : url ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation : neige 20s linéaire infinie ; -moz-animation : neige 20s linéaire infinie ; -ms-animation : neige 20s linéaire infinie ; animation : neige 20s linéaire infinie ; ) @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 40 0px, 300px 300px ; ) )

Enregistrez ensuite toutes les modifications.

Voici une si bonne sélection d'effets de neige qui ravira sûrement les visiteurs de votre site Web.