Catégories
Astuces et Design

Détendez-vous avec ces extraits de code CSS et JavaScript apaisants

Nous pourrions tous utiliser un peu de calme dans nos vies. Et avec les pressions qui accompagnent la conception et le développement de sites Web, sans parler de l'état du monde. Il y a de nombreuses raisons de trouver une évasion.

Et si sortir du bureau est un excellent moyen de se détendre, ce n’est pas toujours possible. Par conséquent, il est important de trouver des moyens d’instaurer une paix où que vous soyez.

Notre mission pour aujourd'hui est de vous aider à vous ressourcer de votre quotidien avec…code. C'est vrai. Les extraits de cette collection peuvent vous emporter, même lorsque vous êtes assis à votre bureau. Alors, asseyez-vous et gagnez de l'énergie positive grâce à ces créations intelligentes.

La boîte à outils Web Designer

Téléchargements illimités: plus de 1 000 000 modèles Web, thèmes, plug-ins, éléments de conception et bien plus encore!

Emmène-moi aux tropiques

Le doux balancement des palmiers dans la brise de l'océan. Y a-t-il une destination plus souhaitable? Si vous ne pouvez pas vous y rendre en personne, vous pouvez au moins regarder cette animation JavaScript ensoleillée. Conseil de pro: pour rendre l'expérience totalement immersive, allumez un ventilateur et prenez l'une de ces boissons parapluie fantaisie.

Voir le stylo
Légère brise sur l'île parfaitement ronde par Bailh.

Jogging hypnotique

Parfois, ce sont les animations les plus simples qui sont les plus apaisantes. Ce jogger est un excellent exemple. Le mouvement en boucle de chaque pas, le vent dans les cheveux et le foulard qui souffle en font une scène sereine – surtout si vous réduisez la vitesse d'un cran. Ne vous laissez pas berner par le look simple, cependant. Il y a une bonne partie de JavaScript qui alimente cet athlète.

Voir le stylo
Cycle de course Cole par Dave DeSandro.

Paix, amour et JavaScript

Besoin d'un rappel coloré pour se détendre? Ce signe de paix animé trippant fera danser des étoiles dans vos yeux – littéralement. Alors que les étoiles s'étalent sur l'écran, regardez de plus près la piste de mouvement que chacun laisse derrière lui. Un chemin groovy à suivre, c'est sûr.

Voir le stylo
Peace Springs par Tiffany Rayside.

Courbes apaisantes

Voici un autre exemple de la simplicité qui est souvent préférable. Cette conglomération CSS de lignes courbes est assez basique, mais puissante. Leurs mouvements en forme de ruban et leurs changements d'opacité se traduisent par un effet agréable. Regarder pendant quelques minutes peut vous aider à évacuer ce stress quotidien.

Voir le stylo
Restez calme par Eric Porter.

Soulagement du stress sucré (ou aigre)

Lorsqu'il est fait à un rythme tranquille, changer de couleur peut apporter une sensation de sérénité. Prenez cette expérience de bubble-gum, par exemple. La sphère 3D et l'arrière-plan décalent les couleurs du dégradé pour engager doucement l'utilisateur. Pour une touche amusante, vous pouvez modifier la palette de couleurs pour refléter la gomme «sucrée» ou «aigre».

Voir le stylo
Bubble Gum par ilithya.

Le cube CSS apaisant

Ce cube 3D a beaucoup à faire. Lorsqu'il tourne sur un axe, un ensemble de cercles se balancent d'avant en arrière comme un pendule. Mais comme cette animation CSS est réglée à une vitesse inférieure, elle est plus relaxante qu’accablante.

Voir le stylo
Cube abstrait par Mattia Astorino.

Design paisible

Bien que la plupart des extraits de cette collection comportent une animation, le mouvement n'est pas toujours nécessaire. Cette maquette pour une application de pleine conscience montre comment le design lui-même peut apporter du zen dans votre vie. Les modes jour et nuit sont attrayants et servent de rappel pour simplement respirer.

Voir le stylo
Application de pleine conscience par co0kie.

Nature croissante

OK, nous n’avons généralement pas le temps de nous asseoir et de regarder les plantes pousser. Mais nous pouvons prendre quelques secondes de notre journée bien remplie pour voir ces vignes virtuelles prendre vie. Les plantes poussent et se balancent doucement dans une brise virtuelle, grâce à l'animation de toile HTML5 alimentée par JavaScript.

Voir le stylo
Prototype de croissance des plantes: Dark Garden par Matthew Main.

Restez calme et codez

Peut-être que cela semble contre-intuitif. Mais le code peut en fait fournir une présence apaisante – et ces extraits en sont la preuve.

En utilisant la couleur, le mouvement et l'interactivité, ils offrent une brève évasion des pressions de la vie quotidienne. Bien qu’ils ne remplacent pas de vraies vacances ou même un jour de congé, il y a des avantages à en tirer. Considérez-les comme une petite réinitialisation qui rafraîchira votre cerveau afin que vous puissiez continuer avec votre liste de choses à faire.

Vous voulez voir encore plus d'extraits de code apaisants? Découvrez notre collection CodePen pour plus de 20 exemples!

Laisser un commentaire

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