Header bg slider: first draft

css/main.css

@@ -35,12 +35,21 @@ header {
     margin: 0;
     padding: 0;
 }
-.main-header.bg1 {
+/* .main-header.bg1 {
     background-image: url(../img/fara_background.jpg);
 }
 .main-header.bg2 {
     background-image: url(../img/fara_bg_2.jpg);
 }
+.main-header.bg3 {
+    background-image: url(../img/fara_bg_3.jpg);
+}
+.main-header.bg4 {
+    background-image: url(../img/fara_bg_4.jpg);
+}
+.main-header.bg5 {
+    background-image: url(../img/fara_bg_5.jpg);
+} */
 .main-header h1 {
     font-size: 3rem;
 }
@@ -70,8 +79,19 @@ header {
     background-color: rgba(254, 254, 254, 0.25);
 }
 /* ---- Navbar ----- */
+.nav-menu {
+    text-align: right;
+}
+.nav-menu a {
+    color: inherit;
+    padding: 10px;
+    font-size: 0.85rem;
+    text-decoration: none;
+    cursor: pointer;
+}
 .active {
-    color: #fff;font-weight:bold;
+    color: #fff;
+    font-weight:bold;
 }
 #nav {
     max-height: 50px;
@@ -87,20 +107,16 @@ header {
     max-height: 41%;
     padding: 7px 0 10px 20px;
 }
-#links {
-    text-align: right;
+.nav-light a:hover {
+    color: #fff;
 }
-#links a {
-    color: inherit;
-    padding: 10px;
-    font-size: 0.85rem;
-    text-decoration: none;
-    cursor: pointer;
+.nav-dark a:hover {
+    color: #000;
 }
-#links a:hover {
+/* #links a:hover {
     color: #fff;
     text-decoration: none;
-}
+} */
 /** Footer **/
 footer {
     min-height: 5rem;

index.html

@@ -11,10 +11,10 @@
         <header class="main-header bg1">
             <div class="container">
                 <div class="columns text-gray" id="nav">
-                    <div class="column col-7">
+                    <div class="column col-lg-7 col-sm-2 col-md-2">
                         <img src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
                     </div>
-                    <div class="column col-5" id="links">
+                    <div class="column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
                         <a href="index.html" title="Torna alla home page">Home</a>
                         <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
                         <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
@@ -38,34 +38,58 @@
     <!-- MOOOVE AWAAAAAYY -->
     <script type="text/javascript">
         window.addEventListener('load', () => {
-            let navlinks = document.querySelector('#links').children;
+            let navlinks = Array.from(document.querySelectorAll('#links a'));
 
-            Array.from(navlinks).forEach(element => {
+            navlinks.forEach(element => {
                 let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
                 
                 if (window.location.href.includes(ref) || element.href.includes('index.html')) {
                     element.setAttribute('class', 'active');
                 }
-                /**
-                 let homeRE = new RegExp(/https?:\S+\/$/);
-                 if (homeRE.test(window.location.href)) {
-                     navlinks[0].setAttribute('class', 'active');
-                    }
-                */
-            });            
+            });
+
+            let images = [
+                'img/fara_background.jpg',
+                'img/fara_bg_2.jpg',
+                'img/fara_bg_3.jpg',
+                'img/fara_bg_4.jpg',
+                'img/fara_bg_5.jpg',
+            ];
+            let nextimage = 0;
+            let header = document.querySelector('header');
+            
+            slider();
+            /**
+             * Fade in??
+            */
+            function slider () {
+                opacity = 1;
+
+                if(nextimage >= images.length) {
+                    nextimage = 0;
+                }
+                header.style = 
+                    'background-image : url("' +images[nextimage++] + '");';
+                setTimeout(slider, 3000);
+            }
         });
 
         window.addEventListener('scroll', event => {
             let nav = document.querySelector('#nav');
+            let links = document.querySelector('#links');
 
             if (window.pageYOffset !== 0) {
                 nav.classList.add('bg-white');
                 nav.classList.remove('text-gray');
+                links.classList.add('nav-dark');
+                links.classList.remove('nav-light');
             }
             else {
                 nav.classList.add('text-gray');
                 nav.classList.remove('bg-white');
+                links.classList.add('nav-light');
+                links.classList.remove('nav-dark');
             }
-        })
+        });
     </script>
 </html>