complete animations

js/plans.js

@@ -49,8 +49,10 @@ $(document).ready(()=>{
         $('#notify1')[0].play()
         
         show.fadeIn(400,()=>{
-          offset = show.offset().top - content.offset().top - 20
-          firstChild.animate({'margin-top': '-' + offset},400)
+          if(show.hasClass('scroll')){
+            offset = show.offset().top - content.offset().top - 20
+            firstChild.animate({'margin-top': '-' + offset},400)
+          }
         })
         
       })

plans.php

@@ -23,16 +23,20 @@
                                 <button class="button dotted" data-cloud="luca_1">Ok</button>
                             </div>
                             
-                            <div class="cloud empty hidden" id="luca_1">
+                            <div class="cloud empty hidden scroll" id="luca_1">
                                 <img src="<?= $BASE_URL;?>/images/video.png" class="video-opener" data-video="video1">
                             </div>
                             
                             <div class="video" id="video1">
-                                <div class="video-close"></div>
+                                <div class="video-close button" data-cloud="luca_2"></div>
                                 <video width="400" controls>
                                     <source src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" type="video/mp4">
                                 </video>
                             </div>
+                            
+                            <div class="cloud empty hidden" id="luca_2">
+                                <button class="button dotted">Vail al test</button>
+                            </div>
                         </div>
                         <div class="input"></div>
                     </div>
@@ -48,12 +52,15 @@
                                 Il modulo "differenze culturali" è disponibile.
                             </div>
                             <div class="cloud empty">
-                                <button class="button dotted" data-cloud="sara_1">Ok</button>
+                                <button class="button dotted" data-cloud="sarah_1">Ok</button>
                             </div>
                             
-                            <div class="cloud left hidden" id="sara_1">
-                                Ciao Luca!<br>
-                                Il modulo "differenze culturali" è disponibile.
+                            <div class="cloud left hidden scroll" id="sarah_1">
+                                Sorprendentemente l'area del cervello destinata a riflettere sulle nostre opinioni e sui nostri gusti si attiva anche quando cerchiamo di immedesimarci in opinioni e gusti altrui, ma solo in un caso: quando cioè l'altro è "uno come noi", culturalmente o etnicamente.
+                            </div>
+                            
+                            <div class="cloud empty hidden" id="sarah_2">
+                                <button class="button dotted" data-cloud="sarah_2">Ok</button>
                             </div>
                         </div>
                         <div class="input"></div>