updated header animation

Author: janzenisek

_includes/home_header.html

@@ -21,7 +21,8 @@
     </div> -->
 
     <div class="header-bg">
-        {% include svg/header-bg2.svg %}
+        <svg xmlns="http://www.w3.org/2000/svg">            
+        </svg>
     </div>
 
 

_sass/home/_header.scss

@@ -69,8 +69,9 @@
 
 .header-bg {
     position: absolute;
-    bottom: 0;
+    top: 0;
     width: 100%;
+    height: 100%;
 
     background-position: center;
     -webkit-background-size: cover;
@@ -82,9 +83,11 @@
     z-index: 0;
 
     svg {
-        width: 90%;
-        height: 90%;
+        width: 100%;
+        height: 100%;
     }
+
+    
 }
 
 .slot {
@@ -432,5 +435,58 @@
   @keyframes parts2 {
     0%   { opacity: 0.15; }
     50%   { opacity: 0.20; }
-    100%   { opacity: 0.15; }
-  }
+    100%   { opacity: 0.15; }    
+  }
+
+
+  // new
+
+.header-bg svg rect {
+    // opacity: 0.0;
+    z-index: 0;
+
+    // animation-duration: 6s;
+    animation-iteration-count: infinite;        
+}
+
+
+// l1
+.header-bg svg .box1 {
+    animation-name: box1;
+    animation-delay: 0.0s;
+    animation-duration: 6s;
+}
+
+.header-bg svg .box2 {
+    animation-name: box2;
+    animation-delay: 1s;
+    animation-duration: 6s;
+}
+
+.header-bg svg rect {
+    animation-name: box3;
+    animation-delay: 2s;
+    animation-duration: 6s;    
+}
+
+
+@keyframes box1 {
+    0% { fill: #fff; }    
+    50% { fill: #56c69f;  }  
+    100% { fill: #fff;  }      
+}
+
+@keyframes box2 {
+    0% { fill: #fff; }    
+    50% { fill: #56c69f;  }  
+    100% { fill: #fff;  }      
+}
+
+@keyframes box3 {
+    0% { fill: #fff; }    
+    50% { fill: #56c69f;  }  
+    100% { fill: #fff;  }      
+}
+
+
+

assets/js/banneranimation.js

@@ -1,3 +1,96 @@
 ---
 ---
 
+// variable for the namespace 
+const svgns = "http://www.w3.org/2000/svg";
+
+// targeting the svg itself
+const svg = document.querySelector(".header-bg svg");
+
+
+let opacities = [ 0.0, 0.05, 0.1, 0.15 ];
+// let opacities = [ 0.0, 0.025, 0.05, 0.075 ];
+// let opacities = [ 0.025, 0.05, 0.075, 0.1, 0.125, 0.15, 0.175, 0.20, 0.225, 0.25 ];
+
+for(let i = 0; i < 10; i++) {
+    for(let j = 0; j < 10; j++) {
+        let newRect = document.createElementNS(svgns, "rect");
+        newRect.setAttribute("x", "" + i*10 + "%");
+        newRect.setAttribute("y", "" + j*10 + "%");
+        newRect.setAttribute("width", "10%");
+        newRect.setAttribute("height", "10%");
+        newRect.setAttribute("fill", "#ffffff");
+        newRect.setAttribute("opacity", "" + opacities[getRndInteger(0, 4)]);
+        
+        newRect.setAttribute("id", "x" + i + "y" + j);        
+        svg.appendChild(newRect);                
+    }   
+}
+getGridMapping();
+
+function getGridMapping() {
+
+
+    for(let i = 0; i < 10; i++) {
+        for(let j = 0; j < 10; j++) {
+            let rect = document.getElementById("x" + i + "y" + j);                        
+            rect.setAttribute("class", "");
+        }
+    }
+
+
+    let luX, luY, ruX, ruY, rdX, rdY, ldX, ldY;
+    luX = getRndInteger(3, 6);
+    luY = getRndInteger(3, 6);
+    ruX = luX + 2;
+    ruY = luY;
+    rdX = ruX;
+    rdY = ruY + 2;
+    ldX = luX;
+    ldY = rdY;
+    
+
+    for(let i = luX; i < ruX; i++) {
+        for(let j = luY; j < ldY; j++) {
+            let rect = document.getElementById("x" + i + "y" + j);                        
+            rect.setAttribute("class", "box1");
+        }
+    }
+
+    for(let i = luX-1; i < ruX+1; i++) {
+        for(let j = luY-1; j < ldY+1; j++) {
+            let rect = document.getElementById("x" + i + "y" + j);         
+            if(rect.getAttribute("class") != "box1") {
+                rect.setAttribute("class", "box2");
+            }            
+        }
+    }
+
+
+    // let level = 1;
+    // let box = 1;
+    // for(let i = 0; i < 3; i++) {  
+    //     box = 1;
+    //     for(let j = 0; j < 3; j++) {
+    //         let rect = document.getElementById("x" + i + "y" + j);                        
+    //         rect.setAttribute("class", "l" + level + "b" + box);
+    //     }   
+    //     box = 2;
+    //     for(let j = 3; j < 6; j++) {
+    //         let rect = document.getElementById("x" + i + "y" + j);                        
+    //         rect.setAttribute("class", "l" + level + "b" + box);
+    //     }   
+    //     box = 2;
+    //     for(let j = 6; j < 10; j++) {
+    //         let rect = document.getElementById("x" + i + "y" + j);                        
+    //         rect.setAttribute("class", "l" + level + "b" + box);
+    //     }   
+    // }
+    
+}
+
+function getRndInteger(min, max) {
+    return Math.floor(Math.random() * (max - min) ) + min;
+  }
+
+

assets/js/map.js

@@ -1,7 +1,7 @@
 ---
 ---
 
-(function($) {
+(function(L) {
 
 
     var map = L.map('map').setView([48.36936535443323, 14.513704089483294], 15);
@@ -41,4 +41,4 @@
         + '<br/><br/><a target="_blank" href="https://www.openstreetmap.org/directions?from=&to=48.37046%2C14.51391">Route hierhin</a>');
 
 
-})(jQuery);
+})(L);