La saison des vacances est à son apogée et pour certains chanceux, dans des climats appropriés, l'hiver bat son plein. J'habite à Phoenix et le vrai hiver, et par conséquent la neige, n'est qu'un rêve lointain. Ainsi je suis obligé de me tourner vers nerdery pour obtenir mon correctif!
Aujourd'hui, nous allons passer en revue une technique CSS extrêmement simple que vous pouvez utiliser pour la rendre neige sur votre site Web. Cela ne vous prendra que quelques minutes au maximum et constitue une excellente introduction à l'utilisation de plusieurs images d'arrière-plan et d'animations d'images clés en CSS.
Kit Web FTW
Pour que les choses restent simples, je vais commencer tout ce code en utilisant le -webkit préfixe du vendeur. Cela gardera notre code plus propre et plus facile à lire à mesure que nous apprenons. La raison pour laquelle j'ai choisi Webkit est simple: le support d'animation d'images clés CSS est génial. Même Firefox, qui a récemment ajouté le support des images clés, ne le fera pas aussi bien que Safari.
Ensuite, nous verrons comment ajouter les préfixes des autres fournisseurs et quel type d’expérience vous pouvez vous attendre sur chaque navigateur. En fin de compte, si vous recherchez vraiment un effet solidement supporté qui fonctionne sur autant de navigateurs que possible, je vous recommande de chercher un plugin jQuery snow. Toutefois, si vous êtes intéressé par une expérience d'apprentissage CSS amusante, continuez à lire!
Mise en route: Nous trois PNG
La configuration de ce projet est constituée de trois images d’arrière-plan enneigées. Vous pouvez certainement en ajouter d'autres si vous le souhaitez, mais nous en utiliserons trois ici pour que les choses restent simples et agréables. Fondamentalement, tout ce dont vous avez besoin est de trois fichiers PNG d’arrière-plan transparents de taille variable, avec de petits points blancs aléatoires.
Voici mon processus pour les installer. Tout d'abord, j'ai créé une image carrée de 500 pixels et utilisé une petite brosse à pleine dureté. Vous pouvez configurer une brosse de dispersion si vous le souhaitez, mais j'aime bien le contrôle consistant à placer manuellement les points autour du canevas. Ensuite, pour vérifier que tout est bien en mosaïque, je suis allé dans Filtre> Autre> Décalage.
Depuis que j'ai commencé avec une image carrée de 500 pixels, je vais le couper en deux et le décaler de 250 pixels à la fois horizontalement et verticalement.
Une fois que vous avez exécuté cette commande, il est possible que vous ayez des points en désordre près du centre. Ils devraient être faciles à nettoyer en les effaçant un peu. Ce qui est important, c’est que les bords s’emboîtent bien pour que le milieu de l’image puisse être modifié comme vous le souhaitez.
Enregistrez maintenant votre fichier PNG et répétez ce processus pour une image carrée de 400 pixels et une image carrée de 300 pixels. Pour ces deux derniers, j'ai rendu les flocons un peu plus flous et ai légèrement réduit l'opacité.
Appliquer les fonds
Nous allons maintenant appliquer ces images à notre arrière-plan en CSS. Je les lance en utilisant le sélecteur de corps, mais n'hésitez pas à les appliquer à quelque chose de plus spécifique.
L'implémentation de plusieurs arrière-plans est identique à l'application d'un seul arrière-plan. La seule différence est que vous insérez une virgule après la première URL de l'image et en ajoutez une autre. Voici à quoi ressemblera notre code. Notez que les images d'arrière-plan seront toutes répétées par défaut.
Plusieurs arrière-plans bénéficient d'un excellent soutien, la seule chose dont vous devez vous soucier est, vous l'avez deviné, les anciennes versions d'IE. Comme avec à peu près tout le reste dans les CSS avancées, plusieurs arrière-plans sont pris en charge dans IE9, mais rien de plus ancien. Espérons que le nouveau programme de mise à jour automatique IE mettra fin à ce type de problèmes!
Configuration des images clés
Dans le passé, nous avions réalisé des animations d’images clés assez complexes sur Design Shack, mais cette fois, nous pouvons rester très simples.
Malgré le fait que je me réfère à cela comme? Simple? Certes, il y a beaucoup de choses dans cette syntaxe, alors décomposons-les morceau par morceau. Ce que cela fait est de mettre en place une animation que nous pouvons ensuite appeler à l'action ailleurs dans notre CSS. La syntaxe de base est? @Keyframes? mais ici, nous implémentons la version de Webkit, nous avons donc utilisé? @ - webkit-keyframes ?. La neige? partie est le nom que j'ai choisi pour l'animation. Vous avez une certaine liberté ici, mais essayez de choisir quelque chose de descriptif et d’aide.
Ensuite, nous initions deux cadres. La première est ce à quoi notre page ressemblera au début de notre animation, la seconde à quoi elle ressemblera à la fin. Au début, j'ai placé toutes nos images de fond en haut à gauche de la page en utilisant? 0px 0px.? Puis, à la fin, j'ai déplacé chaque image vers un nouvel emplacement. Tout comme lorsque nous plaçons chaque image, nous séparons chaque ensemble de valeurs de position par une virgule.
La logique de position
La position de chaque image à la fin de l'animation peut sembler arbitraire, mais en réalité, c'est très intentionnel. Pour que l'animation fonctionne correctement, vous devez comprendre certaines choses.
«Une fois qu'une instance d'animation a suivi son cours, elle recommence. Si vous ne positionnez pas vos images correctement, vous verrez un blip à ce stade.Si nous utilisons des animations par images clés au lieu de la propriété de transition plus simple et mieux gérée, c'est parce que nous pouvons boucler une animation par image-clé à l'infini, de sorte qu'elle continue de neiger indéfiniment. En gardant cela à l'esprit, vous devez vous rappeler qu'une fois qu'une instance d'une animation a suivi son cours, elle recommence. Si vous ne positionnez pas vos images correctement, vous verrez un blip à ce stade.
L'astuce consiste à utiliser la taille de vos images pour vous assurer que le cadre de fin correspond au cadre de départ, créant ainsi une transition transparente.Par exemple, ma deuxième image d'arrière-plan faisait 400 pixels sur 400 pixels, j'ai donc déplacé l'arrière-plan de 400 pixels au cours de l'animation, comme pour ma troisième image à 300 pixels. Pour ma première image, j'ai fait quelque chose d'un peu différent. Je voulais que ça bouge plus vite, alors j'ai doublé la hauteur et je l'ai déplacé de 1000 pixels. Comme il s'agit d'un multiple de la hauteur, la dernière image correspondra toujours à la première.
Notez également que j'ai également déplacé la position horizontale des images. Cela ajoute un peu de vent dans l'équation pour que la neige ne tombe pas parfaitement à la verticale. Si vous voulez que la neige se balance d'avant en arrière à mesure qu'elle tombe, ajoutez simplement quelques cadres supplémentaires.
Mise en œuvre de l'animation
Notre dernière étape consiste à revenir au sélecteur de corps et à lancer? -Webkit-animation? pour créer une instance de l'animation. Nous indiquons d’abord le nom de l’animation que nous voulons utiliser, dans ce cas-ci? Neige ,? puis on énonce la durée de l'animation (20 secondes), ensuite on choisit une fonction de chronométrage (linéaire) et finalement on boucle l'animation à l'infini.
Avec ça, votre site web devrait neiger comme un fou dans Safari! Jetons un coup d'oeil à développer un peu cela.
Autres préfixes de navigateur
Maintenant, pour ajouter plus de support du navigateur. Notre section de configuration des images clés doit être développée comme suit. J'ai commencé avec la syntaxe de base sans préfixe de navigateur, puis les préfixes de Mozilla, Webkit et Microsoft.
Ensuite, nous faisons la même chose pour les styles du corps. Tous les navigateurs utilisent la même syntaxe, seul le préfixe change.
Notez que le support IE ici est purement futuriste. Seul IE 10 prend en charge les animations d'images clés et est toujours en développement.
?Pas si vite? dit Firefox
À ce stade, je souhaitais que tout soit terminé avec le tutoriel, mais hélas, j’ai ouvert Firefox et trouvé un problème: pas d’animation! Après quelques recherches, il s’est avéré que le problème venait de l’implémentation en arrière-plan multiple.
Le problème est étrange. Firefox prend en charge plusieurs images d'arrière-plan et prend en charge les animations d'images clés. Il supporte même les animations qui utilisent plusieurs images de fond! Toutefois, pour une raison quelconque, il ne semble pas prendre en charge le déplacement indépendant de la position de chaque image d'arrière-plan lors d'une animation par images clés.
Mettre à jour
Bonne nouvelle, le commentateur Patric a résolu notre petit problème avec Firefox! Il s'avère que mon amour pour la sténographie m'a causé des ennuis ici. Firefox fonctionne parfaitement si vous listez toutes les valeurs de la ligne initiale. Voici le code d'image clé mis à jour:
Voyez-le en action
Démo: Cliquez ici pour lancer
Conclusion
Pour résumer, créer une animation de neige en boucle CSS pure qui fonctionne dans les navigateurs modernes est un jeu d'enfant. Quelques minutes de Photoshop et quelques lignes simples de code et vous obtenez le pôle Nord. Internet Explorer ne prend pas en charge les animations d’images clé jusqu’à la version 10, Opera n’a actuellement aucune prise en charge et Firefox une prise en charge, mais elle n’est pas aussi étendue que celle que vous trouverez dans Webkit.
Ce projet illustre parfaitement pourquoi il est important de jouer avec ce matériel avant qu'il ne soit prêt à être mis en œuvre dans le monde réel. Je ne savais pas que Firefox mettrait une clef en main dans ma petite animation tant que je ne me serais pas sali les mains avec une expérience. Maintenant, je me trouve beaucoup mieux renseigné sur la syntaxe nécessaire pour les animations CSS, navigateur par navigateur.