some changes

This commit is contained in:
Ray Elliott 2020-04-20 16:24:45 +00:00
parent 4045502ed5
commit 499f10a107
5 changed files with 15 additions and 10 deletions

View File

@ -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>

BIN
site/static/img/img.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -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:

View File

@ -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 {

View File

@ -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;