Combinez des images Adobe Stock et du code CSS pour créer des images animées attrayantes pour votre site web.
Recherche de photos originales
Commencez par rechercher de belles images Adobe Stock pour votre animation. Adobe Stock vous permet de lancer une recherche selon plusieurs critères, notamment à partir de mots-clés décrivant le contenu d'une photo.
Repérez une photo qui vous plaît et téléchargez-en un aperçu — ou placez-la dans une Bibliothèque Creative Cloud.
Repérez et enregistrez une autre photo de ciel rempli d'étoiles.
Masquage du ciel
Dans Photoshop, utilisez conjointement l'outil Sélection rapide et des masques de fusion pour supprimer le ciel de la photo de paysage urbain. Enregistrez le fichier au format PNG transparent pour préserver la transparence.
Ajoutez un léger dégradé transparent derrière la ville pour simuler le halo des lumières urbaines dans la nuit.
Une fois que vous avez masqué le ciel nocturne, utilisez l'option Exporter sous pour créer un fichier PNG. Dans la boîte de dialogue qui s’affiche, vérifiez que l'option Transparence est bien sélectionnée afin de pouvoir voir à travers l'image.
Ajout d'étoiles
Étendez la zone de travail dans Photoshop de sorte que la photo d'étoiles soit suffisamment grande pour pouvoir pivoter sans que ses bords soient visibles. À l'aide de l'outil Tampon de duplication, remplissez la zone de travail d'étoiles prélevées dans l'image originale.
Animation avec le code CSS
Ajoutez une propriété d'animation à la règle CSS #stars et définissez quelques valeurs. Appliquez un mouvement lent et régulier aux étoiles en définissant une durée de 210 secondes, un style d'animation linéaire et une limite de boucle infinie.
Résultat final
La combinaison d'Adobe Stock et du code CSS permet de créer une animation attrayante pour votre site web.
Consultez cette collection triée sur le volet d'Adobe Stock, qui compte certainement plus d'images que vous ne pourrez en utiliser dans votre prochain projet.
