Aujourd’hui, je vous propose de réaliser une animation de globe-terrestre en rotation perpétuelle. Pour cela, nous allons déchaîner toute la puissance de ce qui a fait que CSS3 à commencer à intéresser les Webdesigners (parfois un peu trop), à savoir les ombres (internes / externes), les dégradés, les transitions, les bords-arrondis et l’animation native via les fameuses @Keyframes.
Comment ça marche ?
Le principe est relativement simple. On part d’un planisphère complet appliqué en tant que background. Nous allons nous assurer que ce background est répété sur l’axe horizontal grâce à background-repeat. J’expliquerai pourquoi un peu plus tard. On créer un masque par-dessus, d’abord carré puis rond grâce à la propriété » border-radius: 50%; « . On obtient un rendu 2D, vraiment plat et sans saveur.
Pour lui donner plus de réalisme, on va travailler l’effet de volume, en partant du principe que le Soleil, notre source lumineuse, vient d’un côté et éclaire toujours la même proportion et le même endroit de la planète grâce à un dégradé linéaire légèrement décentré.
Pour obtenir un rendu qui vous plaît, notamment en ce qui concerne les proportions entre teintes sombres et lumineuses, je vous conseille de passer par un générateur de dégradé CSS.
On va ensuite légèrement penché le tout, puisque l’axe de la Terre est légèrement incliné, grâce à la propriété « transform: rotate« .
Enfin, nous allons travailler l’aspect atmosphérique de notre planète grâce à l’utilisation de « box-shadow« , en deux temps. Tout d’abord, on va générer ne ombre interne grâce au paramètre « inset » de box-shadow. On la veut assez fine et légèrement bleutée, tout en étant relativement transparente. On complétera ensuite le tout avec une ombre externe, comme si notre planète était entouré d’une atmosphère gazeuse et difficile à discerner.
Il ne reste plus qu’à animer l’ensemble grâce à @Keyframe, qui va consister à faire se déplacer le background du planisphère dans un sens, sur un axe horizontal. Le background étant répété horizontalement de manière infini grâce à background-repeat, la rotation sera donc permanente.
Pour poser le décor spatial, on trouvera un fond étoilé. un fond étoilé qui pourrait se répéter horizontalement sans « cassure ». On l’animera ensuite de la même façon que pour notre planète, mais dans le sens inverse, toujours grâce aux Keyframes. L’impression de mouvement et d’immersion n’en sera que plus forte. C’est une astuce vieille comme le monde en animation qui consiste à animer des plans superposés à des vitesses différentes. C’est sur ce principe que fonctionne le fameux effet Parallaxe.
Cependant, je vous mets en garde. Une telle composition réclamera pas mal de ressources de la part de votre navigateur. Les keyframes combinés aux multiples effet spéciaux utilisés sont plutôt gourmands. en performances. Une animation gérée via Javascript serait certainement moins exigeante mais on sort du cadre du tutoriel qui est de n’utiliser que du CSS. C’est la seule chose qui m’a dissuadé de reproduire tout un système solaire d’ailleurs.
Et le tour est joué. Je vous souhaite donc un bon voyage spatial.
