fadein openinghours

LitusProject · Oct 25, 2023 · 5a7b4f2 · 5a7b4f2
1 parent b4df856
commit 5a7b4f2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/module/CommonBundle/Resources/assets/common/js/fade.js b/module/CommonBundle/Resources/assets/common/js/fade.js
@@ -0,0 +1,14 @@
+$(document).on("scroll", function() {
+    var pageTop = $(document).scrollTop();
+    var pageBottom = pageTop + $(window).height();
+    var tags = $(".tag");
+
+    for (var i = 0; i < tags.length; i++) {
+        var tag = tags[i];
+        if ($(tag).position().top < pageBottom) {
+            $(tag).addClass("visible");
+        } else {
+            $(tag).removeClass("visible");
+        }
+    }
+});
diff --git a/module/CommonBundle/Resources/assets/site/less/vtk-homepage-layout.less b/module/CommonBundle/Resources/assets/site/less/vtk-homepage-layout.less
@@ -91,6 +91,24 @@
   margin-bottom: 17px;
 }
 
+.fadeElement {
+  opacity: 0;
+  transition: all 2.5s;
+}
+
+.fadeElement.leftFade {
+  transform: translate(-30vh, 0);
+}
+
+.fadeElement.rightFade {
+  transform: translate(30vh, 0);
+}
+
+.fadeElement.visible {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
 .category-title:hover {
   color: @color-yellow
 }

diff --git a/module/CommonBundle/Resources/views/common/index/index.twig b/module/CommonBundle/Resources/views/common/index/index.twig
@@ -149,7 +149,7 @@
                         <a href="{{ url('cudi_booking') }}" class="btn btn-sm btn-primary">{{ translate('Reservations') }}</a>
                     </p>
                 {% endif %} #}
-                <div class="col-md-6">
+                <div class="col-md-6 fadeElement leftFade">
                     <div class="opening_hour_message">
                         <h2>Cudi - {{ translate('Opening Hours') }}</h2>
                         {% for message in cudi.messages %}
@@ -167,7 +167,7 @@
                         {% endfor %}
                     </div>
                 </div>
-                <div class="col-md-6">
+                <div class="col-md-6 fadeElement rightFade">
                     <div class="opening_hour_message">
                         <h2>Theokot - {{ translate('Opening Hours') }}</h2>
                         {% for message in shop.messages %}
@@ -384,6 +384,21 @@
             });
         });
 
+        $(document).on("scroll", function() {
+            var pageTop = $(document).scrollTop();
+            var pageBottom = pageTop + $(window).height();
+            var tags = $(".fadeElement");
+
+            for (var i = 0; i < tags.length; i++) {
+                var tag = tags[i];
+                if ($(tag).position().top < pageBottom) {
+                    $(tag).addClass("visible");
+                } else {
+                    $(tag).removeClass("visible");
+                }
+            }
+        });
+
         /* --------------------------
         * GLOBAL VARS
         * -------------------------- */