20 projets de Noël impressionnants cachés dans CodePen

CodePen est un terrain de jeu en ligne pour les développeurs front-end talentueux, un endroit où vous pouvez toujours trouver des projets sympas pour élargir vos horizons et voir ce que les autres développeurs sont en train de faire. Les vacances de fin d'année sont le moment idéal pour surprendre vos proches avec des projets personnels créatifs, ou pour remercier vos clients avec des designs branchés et novateurs qui contribueront à égayer les vacances..

Dans cet article, nous allons jeter un coup d'oeil à 20 expériences de Noël impressionnantes sur CodePen, que vous pouvez utiliser comme source d'inspiration pour créer vos propres conceptions.

1. Recueil de chansons de Noël en famille

Cette belle application Family Christmas Songbook peut jouer vos chansons de Noël préférées hébergées sur SoundCloud. Les règles de style sont écrites dans le langage de feuille de style LESS et la fonctionnalité de lecteur de musique est fournie par un plugin jQuery personnalisé..

Les icônes flocon de neige et sapin de Noël à l'arrière-plan confèrent une atmosphère solennelle au dessin. Si vous passez le curseur de la souris sur le stylo, vous pouvez également trouver des effets CSS subtils..

2. Arbre de Noël numérique

Concevoir pour Noël est toujours un travail gratifiant, car ses éléments visuels typiques peuvent être construits de nombreuses manières créatives. Ce stylo est un bon exemple pour cela. Au début, vous ne pouvez voir que des triangles colorés, apparemment sans rapport avec les vacances, mais lorsque vous cliquez sur le bouton Révéler, ils sont placés ensemble dans un arbre de Noël. Ce n'est pas seulement une solution unique, mais rappelle également un jeu plus simple..

3. Animation de Noël avec des chutes de neige

Vous n'avez pas nécessairement besoin d'utiliser JavaScript si vous voulez créer une animation sympa pour Noël. Dans ce stylo, l’animation de neige et les images d’arrière-plan sont créées uniquement en CSS. Il convient d'examiner un peu le code, car il montre les incroyables capacités de CSS3. L'image de fond peut même être confondue avec un vrai graphique SVG.

4. Père Noël à la course!

Père Noël à la course! est un jeu JavaScript amusant pour les vacances utilisant le framework de jeu HTML5 de phaser.js. Il n'y a pas trop de règles dans ce jeu: le Père Noël fonctionne à l'infini, ou du moins jusqu'à ce qu'il tombe. Ce stylo vous donne une excellente occasion de comprendre comment écrire un jeu plus simple en JavaScript.

5. Sélecteur de noms de père Noël secret

Choisir un nom dans un chapeau est un moyen populaire dans les écoles et les bureaux de choisir les pères Noël secrets - ce stylo n’est qu’une version numérique de cette tradition. Comme il utilise uniquement du JavaScript vanille, vous pouvez facilement l'intégrer à votre propre site. Il suffit de changer les noms dans la variable donne.

6. Boules de Noël en CSS pur

Ces joyeuses boules de Noël sont écrites en CSS pur et s’appuient sur les règles de frontière. Les différentes parties des billes sont assemblées en utilisant des positions relatives calculées avec précision.

Si vous souhaitez ajouter rapidement une ambiance de vacances à une page Web, insérez simplement certaines de ces balles aux endroits appropriés dans une couleur qui correspond à la conception générale du site..

7. Flocons de neige mobiles

Vous pouvez faire bouger ces flocons de neige en les survolant sur un ordinateur de bureau ou en inclinant votre smartphone. Cette fonctionnalité est fournie par un code JavaScript orienté objet, utilisé intelligemment par le développeur pour créer une classe Snowflake personnalisée..

Les flocons de neige eux-mêmes sont construits en CSS3, et l’arrière-plan utilise des dégradés. Il n’ya pas d’image dans ce stylo..

8. Expérience d'accordéon de vacances

Cet accordéon de vacances est tout simplement magnifique. Si vous passez le curseur de la souris sur un onglet, le curseur se développe en développant un peu, et si vous cliquez dessus, il apparaît soudainement et couvre toute la page. Il est intéressant de noter que ce stylo utilise des graphiques SVG (Scalable Vector Graphics) stylisés avec CSS..

Les SVG sont plus puissants qu’ils ne le semblent à première vue, ils peuvent être intelligemment positionnés et conçus avec les mêmes règles de style que nous utilisons avec des éléments HTML classiques.

9. Bonhomme de neige plat pur CSS

Qui a dit que le design plat devait être ennuyeux? Ce beau bonhomme de neige peut facilement ajouter l’esprit de Noël à n’importe quel motif. Il n'y a pas d'images utilisées pour le bonhomme de neige, c'est complètement écrit en CSS. Il vaut la peine de regarder un peu le code CSS et de voir comment le développeur utilise les pseudo-sélecteurs: before et: after pour obtenir le résultat souhaité..

10. Flocon CSS3

Vous pouvez faciliter la création d'images CSS3 uniquement à l'aide d'outils de développement front-end avancés. Ce flocon de neige CSS3 bien conçu en est un excellent exemple. Le développeur a utilisé le langage de modélisation Jade compilé en HTML et le préprocesseur Sass CSS pour implémenter ce superbe design flocon de neige..

11. Bouton de Noël

Les conceptions intelligentes optent fréquemment pour des solutions subtiles, tout comme le bouton de Noël enneigé de ce stylo. Le fond rouge foncé est un choix parfait pour une conception de Noël; tout ne doit pas être vert après tout.

Les couleurs, les dégradés, la police de caractères et l'effet de survol rendent ce bouton très élégant et solennel. Vous n'avez besoin que de quelques-uns d'entre eux pour décorer rapidement un site pour Noël.

12. Joyeuses fêtes de parallaxe

Si vous aimez le défilement parallaxe, pourquoi ne l'utilisez-vous pas pour vos projets de vacances? Le développeur de ce stylo a intelligemment expérimenté l'effet et a utilisé le plugin jQuery de Parallax.js de manière moins courante. L'effet de défilement n'est pas vertical comme d'habitude, mais horizontal. L'atmosphère de Noël est intensifiée par une chute de neige impressionnante

Si je devais corriger n'importe quel défaut de ce stylo, ce serait le choix de la couleur: les lettres blanches sur un fond partiellement blanc affaiblissent considérablement l'accessibilité du dessin.

13. Papier d'emballage de Noël CSS

Vous pouvez créer un papier d'emballage de Noël totalement unique à l'aide de CSS3. Le développeur de ce stylo montre non seulement une, mais six variantes pour cela. Les superbes motifs sont obtenus par l'utilisation intelligente des dégradés CSS et la propriété background-blend-mode.

Vous pouvez trouver des exemples encore plus intéressants et une explication détaillée sur le site Web du développeur..

14. Boîte dans une boîte

Cette conception imaginative a été inspirée par les poupées russes traditionnelles (une poupée à l'intérieur d'une poupée). Si vous ouvrez la boîte extérieure en cliquant dessus, elle révèle une boîte intérieure qui est également la boîte extérieure d'une autre boîte intérieure. La fonctionnalité est écrite en jQuery et les emplacements exacts des boîtes sont définis à l'aide de règles de position absolue et relative dans le fichier CSS..

15. Boîte-cadeau avec effet de peau de papier

Si vous réussissez à retirer le ruban de ce cadeau en le faisant glisser, vous pouvez jeter un coup d'œil à l'effet de peau de super-papier qui révèle le contenu intérieur du cadeau. Vous pouvez lire l'intégralité du didacticiel sur le site Web du développeur. C'est un truc qu'il vaut vraiment la peine d'apprendre. Si vous voulez juste utiliser le code, vous pouvez aussi le cloner depuis GitHub.

16. Toile animée Esprit de vacances

Noël peut être un bon moment pour expérimenter de nouvelles choses, tout comme le développeur l'a fait dans ce stylo en utilisant une toile HTML5 comme arrière-plan animé. Le canevas précède le contenu (Joyeuses fêtes!) Du fichier HTML et est défini comme arrière-plan à l'aide du positionnement CSS intelligent..

Le stylo utilise également un script d'animation en arrière-plan inclus dans un fichier JavaScript séparé..

17. Interface utilisateur des cartes-cadeaux

Cette carte cadeau attrayante est non seulement pour Noël, mais peut être utilisée à tout moment lorsque vous voulez surprendre vos utilisateurs avec un cadeau sur votre site Web. Il ne repose pas sur JavaScript car il est entièrement écrit dans le langage de style Sass..

La conception utilise la propriété CSS3 de clip-path qui permet aux développeurs d'afficher uniquement une région spécifique d'un élément, au lieu d'afficher toute sa zone..

18. Carte de joyeux Noël Pure CSS

Ce Père Noël qui rit infiniment - en utilisant uniquement HTML et CSS3 - peut vous donner l’opportunité de comprendre comment la syntaxe de l’animation d’images clés peut être utilisée dans la pratique. En CSS3, vous pouvez utiliser la règle @keyframes pour spécifier les règles d'une animation, puis vous pouvez lier cette animation spécifiée à un élément donné à l'aide de la propriété animation CSS3..

Vous devez ajouter le nom de l'image clé en tant que première valeur de la propriété animation, comme le développeur l'a fait avec les images clés personnalisées appelées bodyLaugh, beardLaugh, headLaugh et mouthLaugh créées spécifiquement pour ce stylo..

19. biscuit de Noël

Si vous passez le curseur de la souris sur cet impressionnant biscuit de Noël, il révèle un message de Noël unique qui est un moyen extraordinaire de souhaiter un joyeux Noël à vos visiteurs. Le code HTML est écrit en langage HAML, le langage de balisage HTML de l'abstraction, tandis que les règles de style tirent parti de la puissance du langage Sass syntaxiquement génial de Styesheets..

Le résultat est intelligent et génial. En ajoutant un peu plus de JavaScript, il peut même être utilisé pour fournir des devis ou des messages personnalisés aux utilisateurs..

20. lumières de Noël clignotantes

Ces lumières de Noël clignotantes peuvent rapidement donner une atmosphère unique à n'importe quel site Web. Le code frontal est écrit en HAML qui se compile en HTML, Sass se compile en CSS et jQuery.

L'effet lumineux animé est obtenu grâce à la règle @keyframes susmentionnée fournie par CSS3. Les couleurs des voyants sont définies dans le fichier jQuery en ajoutant 50 degrés à la valeur de teinte du voyant précédent à l'aide de l'échelle de couleurs HSL..