Merge pull request #43 from BohdanKoleiko/develop

finale changes
BohdanKoleiko · Jun 23, 2024 · 168ae8c · 168ae8c
2 parents 679ea31 + c0a5bbb
commit 168ae8c
Show file tree

Hide file tree

Showing 6 changed files with 594 additions and 27 deletions.
diff --git a/source/index.html b/source/index.html
@@ -17,8 +17,8 @@
       <!-- Connection styles -->
       <link rel="stylesheet" href="./css/bootstrap.css" />
       <link rel="stylesheet" href="./css/bootstrap-reboot.min.css" />
-      <!--<link rel="stylesheet" href="./css/font.css">-->
       <link rel="stylesheet" href="./css/style.min.css" />
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    </head>
    <body>
       <div class="wrapper" id="top">
@@ -102,20 +102,30 @@
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
          crossorigin="anonymous"
+         defer
       ></script>
 
       <!--JQuery script-->
-      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+      <script
+         src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
+         defer
+      ></script>
 
       <!-- justValidate plugin -->
-      <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
+      <script
+         src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"
+      ></script>
 
       <!-- IMask CDN -->
       <script src="https://unpkg.com/imask"></script>
 
+      <!-- Animate -->
+      <!--<script src="js/wow.min.js"></script>-->
+
       <!--My own script-->
-      <script src="./js/inputMask.js"></script>
-      <script src="./js/formValid.js"></script>
-      <script src="./js/script.js"></script>
+      <script src="./js/wow.js" defer></script>
+      <script src="./js/inputMask.js" defer></script>
+      <script src="./js/formValid.js" defer></script>
+      <script src="./js/script.js" defer></script>
    </body>
 </html>
diff --git a/source/js/script.js b/source/js/script.js
@@ -20,6 +20,18 @@ window.addEventListener('DOMContentLoaded', () => {
       menu.classList.toggle('menu_active');
       fixedWrapper.classList.toggle('wrapper_fixed');
    });
+
+   // SHOW feedback SECTION WHEN IT IS IN A VIEW
+   const feedback = document.querySelector('.feedback');
+   const getFeedBackOffsetTop = feedback.offsetTop - feedback.offsetHeight / 2;
+
+   window.addEventListener('scroll', () => {
+      if (document.documentElement.scrollTop >= getFeedBackOffsetTop) {
+         feedback.style.cssText = 'transform: translateX(0); transition: all 0.5s;';
+      } else {
+         feedback.style.transform = 'translateX(-100%)';
+      }
+   });
 });
 
 window.addEventListener('scroll', () => {
@@ -32,7 +44,7 @@ arrowTop.addEventListener("click", () => {
       left: 0,
       behavior: 'smooth',
    })
-})
+});
 
 $(document).ready(function () {
    $('ul.catalog__tabs-menu').on('click', 'li:not(.catalog__tabs-item_active)', function () {
@@ -78,4 +90,10 @@ $(document).ready(function () {
          $('.order .modal__subtitle').text($('.catalog__header').eq(i).text());
       });
    });
+
+   // Innited new WOW instance
+   const wow = new WOW({
+      animateClass: 'animate__animated',
+   });
+   wow.init();
 });