Aujourd’hui petit tour du coté de la programmation web et surtout du langage CSS. En effet, j’avais depuis longtemps l’idée de recréer un système solaire sur une page web en utilisant uniquement du HTML 5 et du CSS 3. Ici vous ne trouverez donc pas une seule ligne de Javascript alors si c’est que vous cherchez, inutile de continuer de lire ces lignes, ce langage ne sera pas abordé dans cet article ;).

Il reste encore du monde ? Bien :)

Il faut savoir qu’avec l’apparition du CSS 3, des animations et autres transitions ont fait leur apparition et les possibilités de créations se sont multipliées. Dans mon projet de réaliser un système solaire, j’ai séparé la programmation en trois étapes principales :

  • – Création des astres et des orbites
  • – Animation des astres
  • – Création d’un menu dynamique

Vous pouvez des à présent voir le résultat à cette adresse : Système Solaire en CSS – projet compatible Chrome et Firefox.

Creations des astres et des orbites : Et la lumiere fut…

Avant d’animer quoi que ce soit, il faut déjà que notre système solaire soit un minimum présent. Inutile de créer directement les neuf… huit… toutes nos chères planètes, le soleil et une seule planète supplémentaire suffiront. Alors je vous vois sortir directement votre Photoshop et commencer à dessiner une jolie petite planète bien jolie et je vous dis Stop. On ne va pas se compliquer la tâche et l’on va directement créer notre petit cercle en CSS. Pour cela rien de plus facile, il vous suffit de déclarer un div dans votre code CSS et de lui ajouter un border-radius de 50% :


#soleil
{
/* On défini la taille de notre soleil */
width: 100px;
height: 100px;


/* Et on arrondi le tout */
border-radius: 50%;
}

Cela aura pour effet d’arrondir parfaitement les contours de votre soleil et vous aurez réalisé en quelques secondes votre premier astre. Mais bon, le soleil n’a pas vraiment cette tête là et autant rajouter un peu de couleur non ? Pour cela rien de plus facile, on va lui rajouter un dégradé comme ceci. Attention, les navigateurs n’étant pas tous d’accord sur le fonctionnement des animations, n’oubliez pas de rajouter les préfixes pour chacun d’eux.


#soleil
{
[...]
background: -webkit-linear-gradient(#ffde00, #ffc600);
background: -moz-linear-gradient(#ffde00, #ffc600);
background: linear-gradient(#ffde00, #ffc600);
}

Et voilà votre soleil est tout beau tout neuf mais il manque un peu de compagnie. Aucuns problèmes, nous allons lui rajouter sa première planète et si vous vous souvenez de vos cours de primaire, la première planète la plus proche du soleil est… Mercure ! Là encore on réalise un cercle en utilisant le même code que pour le soleil, mais avec cette fois-ci une taille inférieure. Pour un souci de lisibilité, j’ai choisi de créer un système solaire qui ne sera pas à l’échelle mais rien ne vous empêche de le faire de votre coté :


#mercure
{
width: 20px;
height: 20px;
border-radius: 50%;


background: -webkit-linear-gradient(#7d7d7d, #cccccc);
background: -moz-linear-gradient(#7d7d7d, #cccccc);
background: linear-gradient(#7d7d7d, #cccccc);
}

Tous vos astres doivent être alignés au centre de votre galaxie. Pour vous aider, n’hésitez pas à rajouter une image en fond pour bien positionner vos différents éléments. Cette opération est importante car elle aura un impact direct sur les animations que nous verrons juste après.

Maintenant on va rajouter l’orbite de Mercure. En fait il s’agit de la même opération que lorsque vous avez créé un astre, sauf que cette fois-ci nous n’allons pas lui donner une couleur ou un dégradé mais un border. La encore, n’oubliez pas d’aligner l’orbite au centre de votre galaxie :


#orbite_mercure
{
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid #50848f;
}

Et voilà, vous avez les premières bases de votre système solaire. Maintenant on va passer à la partie un peu plus fun et également plus complexe, les animations ! Attachez bien votre ceinture et vérifiez votre niveau d’oxygène, nous partons dans l’espace !

Animations des astres : Tourne, tourne petite planete !

Réaliser une animation est en fait très simple et fonctionne avec deux éléments uniquement. Le premier est votre « class/id » qui va être animé et votre deuxième est l’animation qui va lui être appliquée.

Ici, c’est Mercure qui va aller faire un tour de manège donc on applique l’animation que je vais nommer « ellipse_mercure » directement dans son code CSS. On défini dans les paramètres le nom de l’animation, la durée de celle-ci, son type de mouvement qui dans notre cas est linéaire et on fini par préciser que ce mouvement est infini pour que l’animation boucle sur elle même.


#mercure
{
[...]
-webkit-animation: ellipse_mercure 5s linear infinite;
animation: ellipse_mercure 5s linear infinite;
}

Puis nous devons définir notre animation. Ici il s’agit d’une simple translation additionné à une rotation  de 360°. La taille de votre translation correspond à la distance qui séparera votre planète du soleil, ici on va faire en sorte que cela corresponde à l’orbite de Mercure :


/* Animations pour les différents navigateurs */
@-webkit-keyframes ellipse_mercure {
from { -webkit-transform: rotate(0deg) translateY(-75px);}
to { -webkit-transform: rotate(360deg) translateY(-75px);}
}


@keyframes ellipse_mercure {
from { transform: rotate(0deg) translateY(-75px);}
to { transform: rotate(360deg) translateY(-75px);}
}

Une animation fonctionne avec des keyframes ou, en français, des images clefs. Cela veut dire qu’il faut préciser l’état de l’objet avant l’animation dans un premier temps, puis l’état de l’objet après animation dans un second. Ici c’est représenté par le « from » (l’état initial) et le « to » (l’état final).

Comme vous pouvez le voir, nous appliquons une transformation via la propriété « transform« . Cette transformation est donc une rotation de 360° avec le paramètre « rotate() » ainsi qu’une translation pour l’éloigner du soleil avec le paramètre « translateY()« . Rien de bien compliqué au final.

Et voilà, vous avez votre première planète qui tourne désormais autour de son étoile. Il vous suffit désormais de créer les autres astres de votre système solaire ainsi que leur orbite respectif et de leur appliquer une animation en changeant à chaque fois leur éloignement via la translation présente dans l’animation. En quelques minutes, vous devriez arriver à un résultat plutôt sympathique 😉

N’oubliez pas que les planètes ont toutes une période de révolution différente. Par exemple, Mercure met environ 87 jours à faire une révolution complète autour du soleil contrairement à la terre qui en met 365. Pour régler ce paramètre il vous suffit d’augmenter ou de réduire la durée de l’animation.

Walking on the Moon

Si vous avez bien suivi les étapes une par une, vous avez remarqué que je n’ai toujours pas abordé le cas de la Lune. Et bien en fait c’est vraiment très simple en mettre en place. Si suffit d’appliquer les même méthodes citées plus haut pour la création et l’animation des autres planètes, à ceci prés que vous devez inclure la « div » de la Lune au sein de la « div » de la Terre. Le satellite va ainsi récupérer le mouvement de la Terre auquel il faudra simplement rajouter l’animation et le tour est joué 😉

Creation d’un Menu dynamique

Si l’on rajoutait un peu de dynamisme à tout ça qu’en pensez-vous ?

Il existe en effet la possibilité de modifier un élément au survol « hover » d’un autre élément voisin. L’occasion pour nous de tester cette fonctionnalité, mais attention, elle demande une certaine rigueur dans son élaboration.

Vous allez devoir en effet gérer le ciblage de l’élément à modifier depuis l’élément déclencheur. Ici je veux simplement faire un bouton « Mercure » qui, lors de son survol, modifiera la couleur de l’orbite de la planète Mercure en orange et augmentera très légèrement sa taille.

Pour ce faire, le bouton Mercure doit être un élément proche de l’orbite de Mercure au sein de votre code HTML sinon cela ne fonctionnera pas. J’ai choisi l’option de mettre les deux éléments au sein d’un même parent. Leur proximité étant désormais suffisante, voici le code qui permet de réaliser la modification :


#infos_mercure
{
width: 100px;
text-align: right;
}


#infos_mercure:hover ~ #orbite_mercure
{
border: 3px solid #ff8a00;
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
transform: scale(1.02);
}

Ici j’utilise le combinateur « ~ » qui me permet de cibler un élément suivant voisin au sein de l’élément parent. Il existe d’autres combinateurs tel que « > » qui sélectionne tous les éléments directement enfant d’un élément et le « + » qui sélectionne les l’élément suivant directement adjacent.

Il nous suffit désormais d’appliquer un effet de transition à l’orbite de Mercure pour que la transformation se fasse tout en douceur. Encore une fois on indique la durée de la transition ainsi que son mode de lecture. Ici le paramètre « ease-in-out » nous permettra d’avoir un transition fluide aller retour.


#orbite_mercure
{
[...]
transition: 0.5s ease-in-out;
}

Voilà, vous connaissez toutes les astuces pour réaliser un système solaire uniquement en CSS. Il est évident que cette approche n’est pas forcément la plus optimale et l’on trouvera toujours un moyen d’améliorer ce code. Cependant, j’espère que cela vous aura servi à appréhender les animations CSS avec plus de clarté et que l’application de ce petit tutoriel vous aura aidé.

Il ne vous reste plus qu’a rajouter à votre système solaire un petit fond étoilé et deux ou trois petits effets de style plus classique et vous en aurez fini. N’hésitez pas à me partager votre résultat ou à me poser des questions auxquelles j’essayerai de répondre du mieux que je peux. D’ici là n’oubliez pas d’aller toujours plus loin dans l’espace, vers l’infini…

Categories: Tutoriel 0 like

4 Responses so far.

  1. Antoine COMBES dit :

    Salut, je suis un collègue d’Amaury Vallier que tu dois connaitre.

    C’est plutot la classe ton système solaire, mais il y a quelques petites choses qui me font tiquer dans tes sources:
    – tu utilises le préfixe vendeur -moz- sur tes animations. Firefox supporte les animations telles quelles depuis sa version 16, ce qui commence à etre sacrément obsolète 😀 (cd. http://caniuse.com/#feat=css-animation).

    – Tu parles des sélecteurs ~ et + comme s’ils permettaient de sélectionner respectivement TOUS les noeuds frères et LES DEUX noeuds frères directs, ce qui n’est pas du tout le cas ! CSS ne fonctionne qu’en descendant dans l’arborescence du DOM. Il lui est donc impossible de sélectionner les éléments frères précédents. ~ et + permettent donc de sélectionner tous les éléments frères SUIVANTS ou l’élément frère DIRECTEMENT suivant.

    Ceci étant dit, je trouve ton résultat final assez classe, meme si un refactoring du code pourrait se faire :D.

    • Deloriand dit :

      Salut Antoine. Oui je visualise très bien le bonhomme 😉
      Concernant les deux points que tu soulèves:
      – Ben je ne le savais pas donc je vais modifier ça et je m’endormirai moins bête ce soir ^^. Merci pour l’infos.
      – Oui effectivement j’ai oublié de préciser que les sélecteurs ne fonctionne qu’en descendant, une erreur de ma par là encore.
      Ensuite il est vrai que le code et certaines class mériteraient un refactoring, notamment les planètes. Comme je l’ai préciser, on peut très facilement l’améliorer. Mon but ici était vraiment d’expliquer clairement comment cela fonctionne et séparer les class permet d’avoir un bon regard sur l’ensemble. (Et puis jusqu’a il y a deux jours, j’avais jamais trop touché aux animations, mais chut 😉 )

      • Antoine COMBES dit :

        C’est ça que j’aime avec le combo CSS3 et HTML5, c’est que c’est tellement stylé que ça pousse à soi-même faire des trucs stylés. Ajoute du Javascript bien pensé par dessus, et on se retrouve rapidement avec des trucs de fou malade !

        Sinon, je te conseille vivement de jeter un coup d’oeil du côté des préprocesseurs CSS comme Less ou Sass, qui simplifient ÉNORMÉMENT la vie, ne serait-ce que par la possibilité d’utiliser des variables dans tes feuilles de style. Avec Less (et en refactorant), j’ai passé tes 800 lignes à un peu moins de 300 en rendant le tout plus robuste à mon avis 😀

Leave a Reply to Deloriand