scroll animation

static/css/main.css

@@ -94,6 +94,7 @@ a {
     color: #d75b00;    
 }
 
+
 a:hover {
     text-decoration: underline;
     cursor: pointer;

static/index.html

@@ -22,7 +22,7 @@
                 <div class="row banner">
                     <h1>Prochaine activité</h1>
                     <span class="activite-temps" id="timer">00:00:10</span>
-                    <p class="activite-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta tenetur tempora similique. A id esse expedita atque dolor eum itaque fugiat enim nisi dicta. Architecto mollitia quasi sed voluptatibus? Veniam.</p>
+                    <p id="activite-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta tenetur tempora similique. A id esse expedita atque dolor eum itaque fugiat enim nisi dicta. Architecto mollitia quasi sed voluptatibus? Veniam.</p>
                 </div>
 
                 <hr/>
@@ -51,10 +51,24 @@
 
                 <hr/>
 
+                <div class="row banner">
+                    <h1>Chasse au trésor</h1>
+                    <p id="chasse-desc">
+                        Chaque jour de la semaine tes espions préférés ont préparé pour toi une <i style="font-weight: 900;">chasse au trésor</i> !
+                        Résous les énigmes pour tenter de gagner le fameux <u>ticket d'or</u>. Il te permettra de t'abrever gratuitement pendants les évenements festifs !
+                    </p>
+                </div>
+
+                <hr/>
+
                 <div class="row banner">
                     <h1>À propos de nous !</h1>
                     <img src="img/team.jpeg" alt="la liste du bde de 2025" />
                 </div>
+
+                <footer class="row">
+                    Copyright © OSS 110'Metz
+                </footer>
             </div>
         </div>
         

static/js/anim.js

@@ -1,3 +1,31 @@
+var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc");
+var $window = $(window)
+
+function check_if_in_view() {
+    var window_height = $window.height();
+    var window_top_position = $window.scrollTop();
+    var window_bottom_position = (window_top_position + window_height);
+  
+    $.each($animation_elements, function() {
+        var $element = $(this);
+        var element_height = $element.outerHeight();
+        var element_top_position = $element.offset().top;
+        var element_bottom_position = (element_top_position + element_height);
+    
+        //check to see if this current container is within viewport
+        if ((element_bottom_position >= window_top_position) &&
+            (element_top_position <= window_bottom_position)) {
+            if(!$element.hasClass('animated')) {
+                $element.addClass('animated');
+                new TypeIt('#' + $element.attr('id'), {
+                    speed: 30,
+                })
+                .go();
+            }
+        }
+    });
+  }
+
 $(window).on("load", function() {
 
     /*let type = new TypeIt("#typed-data", {
@@ -10,7 +38,8 @@ $(window).on("load", function() {
     $(document).on("click", function() {
         type.options({speed: 1});
     });*/
-    
+    $(window).on("scroll resize", check_if_in_view);
-});
+    $(window).trigger("scroll");
 
-$("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });
+    $("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });
+});

static/js/main.js

@@ -18,6 +18,10 @@ $(window).on("load", function() {
             t[1] = 0;
             t[2] = 0;
         }
-        $("#timer").text(t.join(":"));
+        $("#timer").text((new Date('December 17, 1995 ' + t.join(':'))).toLocaleTimeString('default', {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        }));
     }, 1000);
 });