restructure anim-blocks
This commit is contained in:
parent
b5bcf019bc
commit
4045502ed5
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
|
|
14
src/index.js
14
src/index.js
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue