---
# System prepended metadata

title: Gérer les planètes et astronautes sur le site

---

# Gérer les planètes et astronautes sur le site

**L'effet de parallaxe :**
Le script pour l'effet se trouve dans le fichier : `assets/js/parallaxe.js`
Elle cible les éléments du composant twig :  `frontoffice/components/stars.twig`
Un fichier scss est aussi en place pour ce composant : `assets/css/components/stars.scss`

Une class commune est utilisée pour animer tous les éléments de ce composant, elles sont placé aléatoirement sur différentes portions de la page en fonction de leur class en laissant les zones centrales libres pour ne pas gêner à la lisibilité.

Les éléments se placent relativement à leur parent, je recommande de placer le composant en dessous de `<body> </body>` dans les pages ou vous souahitez afficher cet effet pour que les étoiles se placent sur toute la page :
```=twig
{% block body %}
    {% include "./frontoffice/components/stars.twig" %}
```
![](https://i.imgur.com/yVLHOtW.png)

L'effet au scroll fonctionne avec le plugin GSAP `ScrollTrigger` et prend `body` comme trigger (donc pensez bien le modifier si vous changez l'emplacement votre composant twig dans le dom)

**L'astronaute et la planète**
* Ils sont séparés dans leur propre composant TWIG et SCSS
* Le style de positionnement n'est pas fait dans le composant directement mais bien dans le style de la vue ou il est positionné ex : 
Pour la home page => le positionnement est dans le fichier home.scss
* Les animations de l'astronaute sont faite en CSS dans son composant SCSS `astro.scss`
* Le SVG de l'astronaute à été re-découpé pour bien séparer les différentes sections sur illustrator. Vous pouvez changer de couleurs ses différentes sections grâce aux classes qui sont appliquées.

**Attention aux overflow avec ces éléments pendant l'intégration, pensez que les textes parfois deviennent illisible avec certaines formes derrière.**