Skip to content

Commit 0900df5

Browse files
janzenisekjanzenisek
committed
updated header animation
1 parent eaedc11 commit 0900df5

3 files changed

Lines changed: 76 additions & 81 deletions

File tree

‎_includes/home_header.html‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,13 @@
77
&nbsp;&nbsp;&nbsp;predictive,<br/>
88
&nbsp;&nbsp;&nbsp;prescriptive&nbsp;<span class="todo"># todo</span><br/>
99
]
10-
<!-- <br/><br/>
11-
<span class="todo"># to be joined here:</span>
12-
<br/><span class="todo"># - modeling &amp; simulation</span>
13-
<br/><span class="todo"># - machine learning</span>
14-
<br/><span class="todo"># &nbsp;&nbsp;- privacy preserving</span>
15-
<br/><span class="todo"># &nbsp;&nbsp;- interpretable</span>
16-
<br/><span class="todo"># - optimization</span> -->
1710
</div>
1811

19-
<!-- <div class="headerCodeBlock2">
20-
<span class="todo2"># join discliplines here ... </span>
21-
</div> -->
22-
2312
<div class="header-bg">
2413
<svg xmlns="http://www.w3.org/2000/svg">
2514
</svg>
2615
</div>
27-
28-
29-
<!-- <div>
30-
`​`` html
31-
<a href="#">Hello world</a>
32-
`​``
33-
</div>
34-
<div>
35-
{% highlight javascript %}
36-
document.write("JavaScript is a simple language for javatpoint learners");
37-
{% endhighlight %}
38-
</div> -->
16+
3917
<!-- {% for slot in site.data.carousel.slots %}
4018
<header id="slot-{{ forloop.index0 }}" class="slot{% if forloop.index0 == 0 %} visible{% endif %}">
4119
<div class="header-content">

‎_sass/home/_header.scss‎

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -442,34 +442,10 @@
442442
// new
443443

444444
.header-bg svg rect {
445-
// opacity: 0.0;
446-
z-index: 0;
447-
448-
// animation-duration: 6s;
449-
animation-iteration-count: infinite;
450-
}
451-
452-
453-
// l1
454-
.header-bg svg .box1 {
455-
animation-name: box1;
456-
animation-delay: 0.0s;
457-
animation-duration: 6s;
458-
}
459-
460-
.header-bg svg .box2 {
461-
animation-name: box2;
462-
animation-delay: 1s;
463-
animation-duration: 6s;
445+
z-index: 0;
446+
animation-iteration-count: 1;
464447
}
465448

466-
.header-bg svg rect {
467-
animation-name: box3;
468-
animation-delay: 2s;
469-
animation-duration: 6s;
470-
}
471-
472-
473449
@keyframes box1 {
474450
0% { fill: #fff; }
475451
50% { fill: #56c69f; }
@@ -483,10 +459,20 @@
483459
}
484460

485461
@keyframes box3 {
486-
0% { fill: #fff; }
487-
50% { fill: #56c69f; }
488-
100% { fill: #fff; }
462+
0% { fill: #fff; }
463+
5% { fill: #fff; }
464+
15% { fill: #56c69f; }
465+
25% { fill: #fff; }
466+
100% { fill: #fff; }
489467
}
490468

469+
@keyframes box4 {
470+
0% { fill: #fff; }
471+
5% { fill: #fff; }
472+
15% { fill: #56c69f; }
473+
50% { fill: #56c69f; }
474+
75% { fill: #fff; }
475+
100% { fill: #fff; }
476+
}
491477

492478

‎assets/js/banneranimation.js‎

Lines changed: 60 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ const svgns = "http://www.w3.org/2000/svg";
88
const svg = document.querySelector(".header-bg svg");
99

1010

11-
let opacities = [ 0.0, 0.05, 0.1, 0.15 ];
11+
// let opacities = [ 0.0, 0.05, 0.1, 0.15 ];
12+
let opacities = [ 0.10, 0.125, 0.15, 0.175 ];
1213
// let opacities = [ 0.0, 0.025, 0.05, 0.075 ];
1314
// let opacities = [ 0.025, 0.05, 0.075, 0.1, 0.125, 0.15, 0.175, 0.20, 0.225, 0.25 ];
1415

@@ -26,10 +27,64 @@ for(let i = 0; i < 10; i++) {
2627
svg.appendChild(newRect);
2728
}
2829
}
29-
getGridMapping();
30+
// createGridAnimation_InsideOut();
31+
createGridAnimation();
32+
setInterval(createGridAnimation, 9000);
3033

31-
function getGridMapping() {
34+
function createGridAnimation() {
35+
for(let i = 0; i < 10; i++) {
36+
for(let j = 0; j < 10; j++) {
37+
let rect = document.getElementById("x" + i + "y" + j);
38+
rect.setAttribute("class", "");
39+
rect.setAttribute("style", "animation:none;");
40+
}
41+
}
42+
setTimeout(() => {
43+
for(let y = 0; y < 10; y++) {
44+
for(let x = 0; x < 10; x++) {
45+
let rect = document.getElementById("x" + x + "y" + y);
46+
rect.setAttribute("style", `animation: box3 10s linear ${y*100}ms;`);
47+
}
48+
}
49+
50+
setFigure();
51+
console.log("reconfigured animation");
52+
}, 250);
53+
}
3254

55+
function setFigure() {
56+
let l1X = getRndInteger(1, 4);
57+
let l1Size = getRndInteger(6,10-l1X);
58+
59+
let layer = 8 - getRndInteger(0,4);
60+
for(let i = l1X; i < (l1X+l1Size); i++) {
61+
let rect = document.getElementById(`x${i}y${layer}`);
62+
rect.setAttribute("style", `animation: box4 10s linear ${layer*100}ms;`);
63+
}
64+
65+
layer--;
66+
let left = getRndInteger(1,3);
67+
let right = getRndInteger(1,3);
68+
let l2X = l1X + left;
69+
let l2Size = l1Size-left-right;
70+
for(let i = l2X; i < (l2X+l2Size); i++) {
71+
let rect = document.getElementById(`x${i}y${layer}`);
72+
rect.setAttribute("style", `animation: box4 10s linear ${layer*100}ms;`);
73+
}
74+
75+
layer--;
76+
left = getRndInteger(1,3);
77+
right = getRndInteger(1,3);
78+
let l3X = l2X + left;
79+
let l3Size = l2Size-left-right;
80+
l3Size = l3Size <= 0 ? 1 : l3Size;
81+
for(let i = l3X; i < (l3X+l3Size); i++) {
82+
let rect = document.getElementById(`x${i}y${layer}`);
83+
rect.setAttribute("style", `animation: box4 10s linear ${layer*100}ms;`);
84+
}
85+
}
86+
87+
function createGridAnimation_InsideOut() {
3388

3489
for(let i = 0; i < 10; i++) {
3590
for(let j = 0; j < 10; j++) {
@@ -38,7 +93,6 @@ function getGridMapping() {
3893
}
3994
}
4095

41-
4296
let luX, luY, ruX, ruY, rdX, rdY, ldX, ldY;
4397
luX = getRndInteger(3, 6);
4498
luY = getRndInteger(3, 6);
@@ -47,8 +101,7 @@ function getGridMapping() {
47101
rdX = ruX;
48102
rdY = ruY + 2;
49103
ldX = luX;
50-
ldY = rdY;
51-
104+
ldY = rdY;
52105

53106
for(let i = luX; i < ruX; i++) {
54107
for(let j = luY; j < ldY; j++) {
@@ -64,29 +117,7 @@ function getGridMapping() {
64117
rect.setAttribute("class", "box2");
65118
}
66119
}
67-
}
68-
69-
70-
// let level = 1;
71-
// let box = 1;
72-
// for(let i = 0; i < 3; i++) {
73-
// box = 1;
74-
// for(let j = 0; j < 3; j++) {
75-
// let rect = document.getElementById("x" + i + "y" + j);
76-
// rect.setAttribute("class", "l" + level + "b" + box);
77-
// }
78-
// box = 2;
79-
// for(let j = 3; j < 6; j++) {
80-
// let rect = document.getElementById("x" + i + "y" + j);
81-
// rect.setAttribute("class", "l" + level + "b" + box);
82-
// }
83-
// box = 2;
84-
// for(let j = 6; j < 10; j++) {
85-
// let rect = document.getElementById("x" + i + "y" + j);
86-
// rect.setAttribute("class", "l" + level + "b" + box);
87-
// }
88-
// }
89-
120+
}
90121
}
91122

92123
function getRndInteger(min, max) {

0 commit comments

Comments
 (0)