Défilement et lévitation du texte sur 'L'Union fait la force' OK

CSS/aide_ami.css

@@ -51,31 +51,41 @@ body {
                 justify-content: space-around;
                 width: 33vw;
             }
-                
-                .textRotate1 {
-                    font-size: 0.75vw;
-                    transform: rotate(12deg);
-                    animation: flotter 2s infinite;
-                }
 
-                .textRotate2 {
-                    transform: rotate(-10deg);
-                    font-size: 1.2vw;
-                }
+            .textWillAppear {
+                opacity: 0;
+            }
 
-                .textRotate3{
-                    transform: rotate(-18deg);
-                    font-size: 1vw;
-                }
+            .questionWillAppear {
+                opacity: 0;
+            }
 
-                @keyframes flotter {
-                    50% {
-                        transform: translate3D(0,-5vh,0);
-                    }
+                /* Animations des questions sur les côtés */
+                #question1 {
+                    animation: levite 3s forwards infinite ease-in-out;
+                }   
+
+                #question2 {
+                    animation: levite 3s forwards infinite ease-in-out;
+                    animation-delay: 1s;
+                } 
+
+                #question3 {
+                    animation: levite 3s forwards infinite ease-in-out;
+                    animation-delay: 2s;
+                } 
+
+                #question4 {
+                    animation: levite 3s forwards infinite ease-in-out;
+                    animation-delay: 3s;
+                } 
+
+                @keyframes levite {
+                    50% {transform: translate(0,-3vh);}
+                }
 
-                    to {
-                        transform: translate3D(0,0,0);
-                    }
+                @keyframes fade {
+                    100% {opacity: 1;}
                 }
 
             #text {

HTML/aide_ami.html

@@ -16,31 +16,23 @@
     </header>
     <main id="main">
         <section id="content">
-            <aside id=leftQuestions>
-                <p class="textRotate1">Dois-je vraiment m'occuper de cette affaire ?</p>
-                <p class="textRotate2">C'était quand même bizarre d'être capuché dans le sous-sol</p>
+            <aside id="leftQuestions">
+                <div class="questionWillAppear"><p id="question1">Dois-je vraiment m'occuper de cette affaire ?</p></div>
+                <div class="questionWillAppear"><p id="question2">C'était quand même bizarre d'être capuché dans le sous-sol</p></div>
             </aside>
             <article id="text">
-                <p>
-                    La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !
-                </p>
-                <p>
-                    Vous avez passé une nuit mouvementée par des questionnements incessants
-                </p>
-                <p>
-                    En même temps, c'est compréhensible vu ce que vous venez de vivre. <span>On dirait que l'aventure n'est pas finie pour autant...</span>
-                </p>
-                <p>
-                    Le lendemain, vous vous hâtez vers votre plus fidèle ami <input id="pseudoInput" type="text"/> pour tout lui expliquer.
-                </p>
+                <p class="textWillAppear">La photo est.. correcte. Au moins vous n'avez pas oublié de retirer le flash !</p>
+                <p class="textWillAppear">Vous avez passé une nuit mouvementée par des questionnements incessants</p>
+                <p class="textWillAppear">En même temps, c'est compréhensible vu ce que vous venez de vivre. <span>On dirait que l'aventure n'est pas finie pour autant...</span></p>
+                <p class="textWillAppear">Le lendemain, vous vous hâtez vers votre plus fidèle ami <input id="pseudoInput" type="text"/> pour tout lui expliquer.</p>
             </article>
             <aside id="rightQuestions">
-                <p class="textRotate3">Peut-être devrais-je laisser tomber et oublier cette histoire</p>
-                <p class="textRotate1">Il me reste du taboulé pour demain midi au fait ?</p>
+                <div class="questionWillAppear"><p id="question3">Peut-être devrais-je laisser tomber et oublier cette histoire</p></div>
+                <div class="questionWillAppear"><p id="question4">Il me reste du taboulé pour demain midi au fait ?</p></div>
             </aside>
         </section>
         <section id="buttons">
-                <button id="button1" class="button">Suivant</button>
+                <button id="button1" class="button" onclick="window.location.href = './aide_ami.html';">Suivant</button>
         </section>
     </main>
     <footer>

HTML/couloir.html

@@ -24,7 +24,7 @@
                 </p>
             </article>
             <div id="buttons">
-                <button id="safeButton" class="button">Prendre une photo, vous en parlerez à quelqu'un plus tard</button>
+                <button id="safeButton" class="button" onclick="window.location.href = './aide_ami.html';">Prendre une photo, vous en parlerez à quelqu'un plus tard</button>
                 <button id="riskyButton" class="button">Attendre qu'ils rentrent, prendre son courage à deux mains, et s'aventurer jusqu'à cette salle</button>
             </div>
         </section>

JAVASCRIPT/aide_ami.js

@@ -0,0 +1,23 @@
+let texte = document.getElementById("text");
+let p_counter = 0;
+let texts = document.getElementsByClassName("textWillAppear");
+let questions = document.getElementsByClassName('questionWillAppear');
+console.log(questions);
+
+function makeNextTextAppear(event) {
+    if (event.keyCode == 13 || event.keyCode == 32) {
+        if(p_counter < 2) {
+            texts[p_counter].style.cssText = "animation: fade 2s forwards;";
+        }
+        if (p_counter >= 2 && p_counter < 6) {
+            questions[p_counter-2].style.cssText = "animation: fade 2s forwards;";
+            console.log(questions[p_counter-2].style.cssText);
+        }
+        if(p_counter >= 6 && p_counter < 8) {
+            texts[p_counter-4].style.cssText = "animation: fade 2s forwards;";
+        }
+        p_counter += 1;
+    }
+}
+
+document.addEventListener("keypress", makeNextTextAppear);