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 -->
<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>
<div class="js-block c-block c-block--5 block-sans-image-styles">
<div class="js-block anim-block anim-block--5>
</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>
</div>
<div id="js-block-parent" class="hero__aside block-grid">
<div class="js-block c-block c-block--1 hero-block-1">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
<div class="js-block anim-block anim-block--1 hero-block-1">
<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">

View File

@ -1,327 +1,57 @@
$duration: 1s;
$delay: 0.3s;
// units are the number of units that make up 100% of the container
// 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;
$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;
%ab-layout {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
&::before {
//will-change: transform;
z-index: 1;
content: "";
transition: transform $duration;
background-color: currentColor;
}
> .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 {
display: block;
position: absolute;
width: $unit-size;
height: $unit-size;
transform-origin: 0 0;
@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);
}
transition: transform 0.3s linear;
}
}
.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 {
transform-origin: 100% 0;
@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;
}
left: $x * $unit-size;
top: $y * $unit-size;
}
}
.c-block--3 {
&::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 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);
}
@mixin ab-set-state($state-class, $width, $height) {
@at-root .state-#{$state-class} &::before {
transform: scale($width, $height);
}
}
.c-block--5 {
&::before {
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;
}
}
.block-grid {
padding-top: 3rem;
}
.c-block--6 {
&::before {
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);
// }
// }
.anim-block {
background-color: rgba(blue, 0.06);
}
.c-block--7 {
&::before {
transform-origin: 100% 100%;
.anim-block--1 {
@include ab-set-layout(2, 1);
@at-root .state-0 & {
transform: scale(1, 1);
}
@include ab-set-state(0, 1, 1);
@include ab-set-state(1, 2, 2);
@include ab-set-state(2, 2, 3);
@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--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);
}
@at-root &::before {
background-color: rgba(blue, 0.8);
}
}

View File

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

View File

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

View File

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