Catégories
Plugin et site web

8 extraits de code CSS et JavaScript animés qui célèbrent l'été

Il y a une raison pour laquelle tant d'entre nous attendent avec impatience l'été. Il donne l'occasion de sortir à l'extérieur et loin de nos bureaux. Ensuite, vous avez la possibilité de passer plus de temps avec vos amis et votre famille. Comme on dit, l'aventure est là-bas.

Encore mieux, vous n’avez pas besoin de ces vacances traditionnelles pour sortir. L'été peut être une explosion juste traîner dans votre jardin ou dans un parc local.

Dans cet esprit, nous vous apportons une collection d'extraits de code qui apportent un peu d'été à votre écran. Qu'il vous rappelle des journées chaudes et paresseuses – avec votre téléphone éteint, bien sûr.

La boîte à outils du concepteur Web

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

Just Ducky CSS

Regarder les enfants jouer dans la piscine est toujours amusant (jusqu'à ce que leur comportement vous fasse poser votre boisson parapluie). Ce canard en caoutchouc CSS pur nageant parmi les vagues est un excellent rappel de plaisir doux.

Voir le stylo Rubber Ducky va nager par Heather Taylor

Un verre dans une div

En parlant de boissons savoureuses, consultez ce délicieux numéro d'agrumes. Ce qui rend celui-ci si spécial, c'est le fait qu'il utilise un seul div élément. Tout cela dans un seul récipient – plus un glaçon flottant lentement. Doux!

Voir le Pen a single div challange de Brahim Baif

Foire d'été

L'une des expériences les plus magiques de l'été est d'assister à une foire. Que ce soit grand ou petit, il y a juste quelque chose de spécial à être là – surtout la nuit. Cette scène animée lisse montre une grande roue tournant au coucher du soleil avec des ballons flottant. Et, cliquer sur l'écran ajoute plus de ballons.

Adieu le stylo – JavaScript pur par Toshiya Marukubo

Temps chaud, sons chauds

Si vous avez grandi à l'époque, vous savez l'importance d'avoir un boombox. Pas aussi efficace qu'un smartphone, mais l'efficacité n'était pas la question. Vous vouliez faire exploser ces morceaux pour que Tout le monde savait que vous étiez arrivé. Cette récréation fidèle offre une animation JavaScript et jouera même de la musique (accordez vos haut-parleurs en conséquence – c'est fort). Même la palette de couleurs crie rétro.

Voir la Pen Music de Ricardo Oliva Alonso

Road Trip

Un road trip spontané – ils peuvent être tellement amusants. Empilez famille et amis dans la voiture et voyez la nature voler par votre fenêtre. C’est exactement ce que cette belle scène imite. Il utilise l'animation GSAP pour vous emmener sur une route de montagne alors que le jour se transforme en nuit.

Voir le Pen Roadtrip Sunset d'Alex Trost

Allez-y, sautez

Quoi de plus attrayant qu'une piscine par une chaude journée? Cette oasis propose des SVG animés, avec de l'eau ondulante. Regardez de plus près et la profondeur simulée de l'image est tout simplement incroyable.

Voir le Pen Pool Ripple par Sarah Drasner

Une forêt enchanteresse

Voir la nature dans son propre habitat est l'un des vrais plaisirs de l'été. Ici, nous avons une belle forêt par une journée ensoleillée. Comme si cela ne suffisait pas, il y a un flux constant de papillons qui voltigent. Vous voulez connaître un secret cool? Le soleil et la coccinelle sont des emoji.

Voir le Pen CSS Butterflies de Scott Weaver

Et si vous visitez cette forêt la nuit…

Bien sûr, la nature de jour est amusante. Mais le vrai plaisir d'été commence quand le soleil se couche. C’est alors que les lucioles nous apportent un spectacle de lumières gratuit. La beauté de cette animation de toile HTML5 réside à la fois dans son déroulement fluide et dans le fait qu'elle ne submerge pas d'effets spéciaux.

Voir les lucioles Pen de Michal

L'été sans fin existe – grâce au code

Que vous vous détendiez au bord de la piscine ou que vous soyez coincé dans votre bureau, nous espérons que cette collection d'extraits de code d'été vous fera sourire. Non seulement cela, espérons-le, suscite également votre intérêt à en savoir plus sur les technologies incluses. Les goûts de CSS et JavaScript peuvent vous ramener à la chaleur toute l'année. Et, oh oui, ils sont également utiles pour d'autres choses.

Besoin de plus d'été? Consultez notre collection CodePen pour des extraits supplémentaires!

Laisser un commentaire

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