Atualizações javaScript no site do ror

EbertonKM · Nov 13, 2024 · bebd91a · bebd91a
1 parent 9fb2328
commit bebd91a
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 6 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -71,12 +71,12 @@ section,
 
 /*Animação de hover scale. Apenas aplicado em telas grandes*/
 @media screen and (min-width:991px) {
-    .hover-scale:hover {
+    .hover-scale:hover, .hover-scale-survivor:hover {
         transform: scale(1.2);
         transition: transform 0.2s ease;
     }
 
-    .hover-scale {
+    .hover-scale, .hover-scale-survivor {
         transition: transform 0.2s ease;
     }
 }

diff --git a/assets/img/backgrounds/background2.jpg b/assets/img/backgrounds/background2.jpg
diff --git a/assets/img/backgrounds/background3.jpg b/assets/img/backgrounds/background3.jpg
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
@@ -0,0 +1,24 @@
+$(function() {
+    var delay = 7;
+    var currentBackground = 0;
+    var maxBackground = $('.background').length - 1;
+
+    initBackground();
+    changeBackground();
+
+    function initBackground() {
+        $('.background').hide();
+        $('.background').eq(currentBackground).show();
+    }
+
+    function changeBackground() {
+        setInterval(function() {
+            $('.background').eq(currentBackground).fadeOut(3000);
+            currentBackground++;
+            if (currentBackground > maxBackground) {
+                currentBackground = 0;
+            }
+            $('.background').eq(currentBackground).fadeIn(3000)
+        }, delay * 1000)
+    }
+})
diff --git a/assets/js/surviviorsHoverAnimation.js b/assets/js/surviviorsHoverAnimation.js
@@ -0,0 +1,3 @@
+$(function() {
+
+})
diff --git a/index.html b/index.html
@@ -22,6 +22,8 @@
 
 <body>
     <!--Background da página-->
+    <img src="assets/img/backgrounds/background3.jpg" alt="background-image" class="background">
+    <img src="assets/img/backgrounds/background2.jpg" alt="background-image" class="background">
     <img src="assets/img/backgrounds/background.jpg" alt="background-image" class="background">
 
     <!--Header com uso do Bootstrap-->
@@ -120,31 +122,31 @@ <h2 class="titulo bg-fosco">Sobreviventes</h2>
             <!--Seleção dos sobreviventes-->
             <div class="container-seletor">
                 <a href="#arti">
-                    <div class="seletor hover-scale bg-fosco">
+                    <div class="seletor hover-scale-survivor bg-fosco">
                         <img src="assets/img/sobreviventes/arti.webp" alt="Artífice">
                         <h4>Artífice</h4>
                     </div>
                 </a>
             </div>
             <div class="container-seletor">
                 <a href="#caca">
-                    <div class="seletor hover-scale bg-fosco">
+                    <div class="seletor hover-scale-survivor bg-fosco">
                         <img src="assets/img/sobreviventes/caca.webp" alt="Caçadora">
                         <h4>Caçadora</h4>
                     </div>
                 </a>
             </div>
             <div class="container-seletor">
                 <a href="#coma">
-                    <div class="seletor hover-scale bg-fosco">
+                    <div class="seletor hover-scale-survivor bg-fosco">
                         <img src="assets/img/sobreviventes/coma.webp" alt="Comando">
                         <h4>Comando</h4>
                     </div>
                 </a>
             </div>
             <div class="container-seletor">
                 <a href="#enge">
-                    <div class="seletor hover-scale bg-fosco">
+                    <div class="seletor hover-scale-survivor bg-fosco">
                         <img src="assets/img/sobreviventes/enge.webp" alt="Engenheiro">
                         <h4>Engenheiro</h4>
                     </div>
@@ -422,6 +424,12 @@ <h6 class="footer-texto">© Copyright 2012 - 2023 Hopoo Games, LLC</h6>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
         crossorigin="anonymous"></script>
+     <!--Link do jQuery-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
+        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <!--Link do meu script-->
+    <script src="assets/js/scripts.js"></script>
 </body>
 
 </html>