restructure anim-blocks

This commit is contained in:
Ray Elliott 2020-04-18 13:58:41 +00:00
parent b5bcf019bc
commit 4045502ed5
6 changed files with 59 additions and 319 deletions

View File

@ -1,8 +1,8 @@
<!-- TODO convert to proper template --> <!-- TODO convert to proper template -->
<div class="js-block c-block c-block--4 c-block-br block-styles"> <div class="js-block anim-block anim-block--4 anim-block-br block-styles">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div> <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div> </div>
<div class="js-block c-block c-block--5 block-sans-image-styles"> <div class="js-block anim-block anim-block--5>
</div> </div>

View File

@ -6,8 +6,8 @@
<p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p> <p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
</div> </div>
<div id="js-block-parent" class="hero__aside block-grid"> <div id="js-block-parent" class="hero__aside block-grid">
<div class="js-block c-block c-block--1 hero-block-1"> <div class="js-block anim-block anim-block--1 hero-block-1">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div> <div class="anim-block__img" style="background-image: url(/img/img.jpg)"></div>
</div> </div>
<div class="js-block c-block c-block--2 hero-block-2"> <div class="js-block c-block c-block--2 hero-block-2">

View File

@ -1,327 +1,57 @@
$duration: 1s; // units are the number of units that make up 100% of the container
$delay: 0.3s; // e.g., if there are 4 units then sizes, lengths, can be from 0 to 4
// corresponding to lengths of 0, 25%, 50%, 75% and 100%.
$units: 4;
$unit-size: 100% / $units;
$transition-img-in: opacity $duration $delay ease-in, transform $duration; %ab-layout {
$transition-img-out: opacity $duration $delay ease-out, transform $duration;
@mixin img-in {
transition: $transition-img-in;
opacity: 1;
transform: none;
}
@mixin img-out {
transition: $transition-img-out;
}
.c-block::before,
.c-block__img {
@include abs-full;
}
.c-block {
z-index: 1;
position: relative; position: relative;
overflow: hidden;
width: 100%;
height: 100%;
&::before { &::before {
//will-change: transform;
z-index: 1;
content: ""; content: "";
transition: transform $duration; display: block;
background-color: currentColor; position: absolute;
} width: $unit-size;
height: $unit-size;
> .c-block__img {
z-index: 2;
//will-change: opacity, transform;
background-size: cover;
background-position: center;
opacity: 0;
}
}
.c-block--1 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale(1, 1);
}
@at-root .state-1 & {
transform: scale(0.5, 1);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
> .c-block__img {
transform-origin: 0 0; transform-origin: 0 0;
transition: transform 0.3s linear;
@at-root .state-0 & {
@include img-in;
}
@at-root .state-1 & {
@include img-out;
transform: translate(50%, 0) scale(1.3);
}
@at-root .state-2 & {
transform: translate(50%, 50%) scale(2);
}
} }
} }
.c-block--2 { // all blocks start out at 1 unit size in length and width.
// $x, $y are the starting coordinates
@mixin ab-set-layout($x, $y) {
@extend %ab-layout;
&::before { &::before {
transform-origin: 100% 0; left: $x * $unit-size;
top: $y * $unit-size;
@at-root .state-0 & {
transform: scale(0.5, 0.5);
}
@at-root .state-1 & {
transform: scale(1, 1);
}
@at-root .state-2 & {
transform: scale(0.5, 1);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
transform: translate(50%, 50%) scale(2);
}
@at-root .state-1 & {
@include img-in;
}
@at-root .state-2 & {
transform: translate(50%, 0) scale(1.3);
@include img-out;
}
} }
} }
.c-block--3 { @mixin ab-set-state($state-class, $width, $height) {
&::before { @at-root .state-#{$state-class} &::before {
transform-origin: 100% 100%; transform: scale($width, $height);
@at-root .state-0 & {
transform: scale(1, 1);
}
@at-root .state-1 & {
transform: scale(0.5, 1);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
// > .c-block__img {
// transform-origin: 0 100%;
//
// @at-root .state-0 & {
// @include img-in;
// }
//
// @at-root .state-1 & {
// @include img-out;
// transform: translate(66.6%, 0) scale(1.3);
// }
//
// @at-root .state-2 & {
// transform: translate(66.6%, 66.6%) scale(2);
// }
// }
}
.c-block--4 {
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale(0.33, 1);
}
@at-root .state-1 & {
transform: scale(0.33, 0.25);
}
@at-root .state-2 & {
transform: scale(1, 1);
}
} }
} }
.c-block--5 { .block-grid {
&::before { padding-top: 3rem;
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale(0.5, 1);
}
@at-root .state-1 & {
transform: scale(0.5, 0.5);
}
@at-root .state-2 & {
transform: scale(1, 1);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
@include img-out;
transform: translate(50%, 0) scale(1.3);
}
@at-root .state-1 & {
transform: translate(50%, 50%) scale(2);
}
@at-root .state-2 & {
@include img-in;
}
}
} }
.c-block--6 { .anim-block {
&::before { background-color: rgba(blue, 0.06);
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale(1.333, 0.666);
}
@at-root .state-1 & {
transform: scale(0.5, 0.666);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
// > .c-block__img {
// transform-origin: 0 100%;
//
// @at-root .state-0 & {
// @include img-in;
// }
//
// @at-root .state-1 & {
// @include img-out;
// transform: translate(66.6%, 0) scale(1.3);
// }
//
// @at-root .state-2 & {
// transform: translate(66.6%, 66.6%) scale(2);
// }
// }
} }
.c-block--7 { .anim-block--1 {
&::before { @include ab-set-layout(2, 1);
transform-origin: 100% 100%;
@at-root .state-0 & { @include ab-set-state(0, 1, 1);
transform: scale(1, 1); @include ab-set-state(1, 2, 2);
} @include ab-set-state(2, 2, 3);
@at-root .state-1 & { @at-root &::before {
transform: scale(0.5, 1); background-color: rgba(blue, 0.8);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
@include img-in;
}
@at-root .state-1 & {
@include img-out;
transform: translate(66.6%, 0) scale(1.3);
}
@at-root .state-2 & {
transform: translate(66.6%, 66.6%) scale(2);
}
}
}
.c-block--8 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale(1, 1);
}
@at-root .state-1 & {
transform: scale(0.5, 1);
}
@at-root .state-2 & {
transform: scale(0.5, 0.5);
}
}
}
.c-block--9 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale(1, 1);
}
@at-root .state-1 & {
transform: scale(0.375, 1);
}
@at-root .state-2 & {
transform: scale(0.375, 0.375);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
@include img-in;
}
@at-root .state-1 & {
@include img-out;
transform: translate(66.6%, 0) scale(1.3);
}
@at-root .state-2 & {
transform: translate(66.6%, 66.6%) scale(2);
}
} }
} }

View File

@ -81,18 +81,18 @@
display: grid; display: grid;
@media (max-width: $bp-hero) { @media (max-width: $bp-hero) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(16, 1fr);
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: repeat(16, 1fr);
@media (max-width: $bp-hero) and (orientation: landscape) { @media (max-width: $bp-hero) and (orientation: landscape) {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
} }
} }
@media (min-width: $bp-hero) { @media (min-width: $bp-hero) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(16, 1fr);
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: repeat(16, 1fr);
} }
} }
@ -171,13 +171,13 @@
// row 1 // row 1
//////// ////////
.hero-block-1 { .hero-block-1 {
grid-column: 1/4; grid-column: 5/9;
grid-row: 1/4; grid-row: 5/9;
} }
.hero-block-2 { .hero-block-2 {
grid-column: 4/7; grid-column: 5/8;
grid-row: 1/4; grid-row: 1/5;
} }
.hero-block-3 { .hero-block-3 {

View File

@ -224,7 +224,7 @@ html.is-animating .transition-fade {
// hero // hero
.hero-bg { .hero-bg {
background-color: var(--primary-500); // background-color: var(--primary-500);
} }
// about // about

View File

@ -17,11 +17,21 @@ function initBlocks() {
if (blockParent) { if (blockParent) {
let state = 0; let state = 0;
setInterval(() => { blockParent.classList.add(`state-${state}`);
document.querySelector("header").addEventListener("click", () => {
const from = state;
blockParent.classList.remove(`state-${state}`); blockParent.classList.remove(`state-${state}`);
state = state < 2 ? state + 1 : 0; state = state < 2 ? state + 1 : 0;
blockParent.classList.add(`state-${state}`); blockParent.classList.add(`state-${state}`);
}, INTERVAl); console.log(`state: ${from} -> ${state}`);
});
// setInterval(() => {
// blockParent.classList.remove(`state-${state}`);
// state = state < 2 ? state + 1 : 0;
// blockParent.classList.add(`state-${state}`);
// }, INTERVAl);
} }
} }