restructure anim-blocks
This commit is contained in:
parent
b5bcf019bc
commit
4045502ed5
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ html.is-animating .transition-fade {
|
|||
// hero
|
||||
|
||||
.hero-bg {
|
||||
background-color: var(--primary-500);
|
||||
// background-color: var(--primary-500);
|
||||
}
|
||||
|
||||
// about
|
||||
|
|
|
|||
14
src/index.js
14
src/index.js
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in New Issue