some changes
This commit is contained in:
parent
4045502ed5
commit
499f10a107
|
@ -10,7 +10,7 @@
|
|||
<div class="anim-block__img" style="background-image: url(/img/img.jpg)"></div>
|
||||
</div>
|
||||
|
||||
<div class="js-block c-block c-block--2 hero-block-2">
|
||||
<div class="js-block anim-block anim-block--2 hero-block-2">
|
||||
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
|
||||
</div>
|
||||
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
|
@ -14,18 +14,19 @@ $unit-size: 100% / $units;
|
|||
width: $unit-size;
|
||||
height: $unit-size;
|
||||
transform-origin: 0 0;
|
||||
transition: transform 0.3s linear;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
// all blocks start out at 1 unit size in length and width.
|
||||
// $x, $y are the starting coordinates
|
||||
@mixin ab-set-layout($x, $y) {
|
||||
@mixin ab-set-layout($x: 0, $y: 0, $color: rgba(0, 0, 0, 0.5)) {
|
||||
@extend %ab-layout;
|
||||
|
||||
&::before {
|
||||
left: $x * $unit-size;
|
||||
top: $y * $unit-size;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -44,15 +45,19 @@ $unit-size: 100% / $units;
|
|||
}
|
||||
|
||||
.anim-block--1 {
|
||||
@include ab-set-layout(2, 1);
|
||||
@include ab-set-layout(2, 1, blue);
|
||||
|
||||
@include ab-set-state(0, 1, 1);
|
||||
@include ab-set-state(1, 2, 2);
|
||||
@include ab-set-state(2, 2, 3);
|
||||
}
|
||||
|
||||
@at-root &::before {
|
||||
background-color: rgba(blue, 0.8);
|
||||
}
|
||||
.anim-block--2 {
|
||||
@include ab-set-layout(1, 1, red);
|
||||
|
||||
@include ab-set-state(0, 1, 1);
|
||||
@include ab-set-state(1, 2, 2);
|
||||
@include ab-set-state(2, 2, 3);
|
||||
}
|
||||
|
||||
// vim:set filetype=scss:
|
||||
|
|
|
@ -176,8 +176,8 @@
|
|||
}
|
||||
|
||||
.hero-block-2 {
|
||||
grid-column: 5/8;
|
||||
grid-row: 1/5;
|
||||
grid-column: 1/5;
|
||||
grid-row: 5/9;
|
||||
}
|
||||
|
||||
.hero-block-3 {
|
||||
|
|
|
@ -19,7 +19,7 @@ function initBlocks() {
|
|||
let state = 0;
|
||||
blockParent.classList.add(`state-${state}`);
|
||||
|
||||
document.querySelector("header").addEventListener("click", () => {
|
||||
document.getElementById("js-block-parent").addEventListener("click", () => {
|
||||
const from = state;
|
||||
blockParent.classList.remove(`state-${state}`);
|
||||
state = state < 2 ? state + 1 : 0;
|
||||
|
|
Reference in New Issue