rayelliott
/
victor-hugo
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

implement block demo

This commit is contained in:
Ray Elliott 2020-03-28 14:07:15 +00:00
parent c9ba7ab972
commit 4a95d715a7
5 changed files with 217 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
site/layouts/index.html
View File

@ -1,15 +1,7 @@
{{ define "main" }} {{ define "main" }}
<section class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around"> <section id="js-block-parent" class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
{{ partial "block.html" . }}
{{ partial "block.html" . }}
{{ partial "block.html" . }}
{{ partial "block.html" . }}
{{ partial "block.html" . }}
{{ partial "block.html" . }}
{{ partial "block.html" . }}
{{ partial "block.html" . }}
{{ partial "block.html" . }} {{ partial "block.html" . }}
</section> </section>

21
site/layouts/partials/block.html
View File

@ -1,5 +1,18 @@
<div class="js-block c-block relative bg-gray-300 w-64 h-64 overflow-hidden"> <div class="js-block c-block c-block--1 bg-gray-300 w-64 h-64 text-red-500">
<div class="c-block__bg bg-gray-600 w-full h-full"></div> <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
<div class="c-block__img absolute w-full h-full top-0 left-0 bg-cover bg-center" style="background-image: url(/img/img.jpg)"> </div>
</div>
<div class="js-block c-block c-block--2 bg-gray-300 w-64 h-64 text-orange-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--3 bg-gray-300 w-64 h-64 text-yellow-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--4 bg-gray-300 w-64 text-green-500">
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
</div>
<div class="js-block c-block c-block--5 bg-gray-300 w-64 h-64 text-blue-500">
</div> </div>

220
src/css/imports/blocks.scss
View File

@ -1,44 +1,202 @@
$duration: 1s;
$delay: 0.3s;
$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: 0.5;
transform: none;
}
@mixin img-out {
transition: $transition-img-out;
}
.c-block::before,
.c-block__img {
@include abs-full;
}
.c-block { .c-block {
$duration: 1s; z-index: 1;
$delay: 0.3s; position: relative;
overflow: hidden;
> .c-block__bg { &::before {
will-change: transform; //will-change: transform;
transform-origin: 100% 100%; z-index: 1;
content: "";
transition: transform $duration; transition: transform $duration;
transform: scale3d(1, 1, 1); background-color: currentColor;
} }
&.state-1 > .c-block__bg { > .c-block__img {
transform-origin: 100% 100%; z-index: 2;
transition: transform $duration; //will-change: opacity, transform;
transform: scale3d(0.5, 1, 1); background-size: cover;
} background-position: center;
opacity: 0;
&.state-2 > .c-block__bg { }
transform-origin: 100% 100%; }
transform-origin: 100 100;
transition: transform $duration; .c-block--1 {
transform: scale3d(0.5, 0.5, 1); &::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale3d(1, 1, 1);
}
@at-root .state-1 & {
transform: scale3d(0.5, 1, 1);
}
@at-root .state-2 & {
transform: scale3d(0.5, 0.5, 1);
}
} }
> .c-block__img { > .c-block__img {
will-change: opacity, transform;
transform-origin: 0 0; transform-origin: 0 0;
transition: opacity $duration $delay ease-in, transform $duration;
opacity: 1; @at-root .state-0 & {
transform: none; @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 {
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale3d(0.5, 0.5, 1);
}
@at-root .state-1 & {
transform: scale3d(1, 1, 1);
}
@at-root .state-2 & {
transform: scale3d(0.5, 1, 1);
}
} }
&.state-1 > .c-block__img { > .c-block__img {
transition: opacity $duration $delay ease-out, transform $duration; transform-origin: 0 100%;
opacity: 0;
transform: translate(50%, 0) scale(1.3); @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 {
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale3d(0.5, 1, 1);
}
@at-root .state-1 & {
transform: scale3d(0.5, 0.5, 1);
}
@at-root .state-2 & {
transform: scale3d(1, 1, 1);
}
} }
&.state-2 > .c-block__img { > .c-block__img {
opacity: 0; transform-origin: 0 100%;
transform: translate(50%, 50%) scale(2);
@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--4 {
height: 24rem;
&::before {
transform-origin: 100% 0;
@at-root .state-0 & {
transform: scale3d(0.33, 1, 1);
}
@at-root .state-1 & {
transform: scale3d(0.33, 0.25, 1);
}
@at-root .state-2 & {
transform: scale3d(1, 1, 1);
}
}
> .c-block__img {
transform-origin: 0 100%;
@at-root .state-0 & {
@include img-out;
transform: translate(66.6%, 0) scale(1.3);
}
@at-root .state-1 & {
transform: translate(66.6%, 66.6%) scale(2);
}
@at-root .state-2 & {
@include img-in;
}
}
}
.c-block--5 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale3d(1, 1, 1);
}
@at-root .state-1 & {
transform: scale3d(0.5, 1, 1);
}
@at-root .state-2 & {
transform: scale3d(0.5, 0.5, 1);
}
} }
} }

2
src/css/main.css
View File

@ -2,6 +2,8 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@import "imports/mixins.scss";
@import "imports/blocks.scss"; @import "imports/blocks.scss";
html, html,

20
src/index.js
View File

@ -5,19 +5,15 @@ import "./css/main.css";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
const TRANSITION_DURATION = 1000; const TRANSITION_DURATION = 1000;
const INTERVAl = TRANSITION_DURATION + 600; const INTERVAl = TRANSITION_DURATION + 600;
const blocks = document.querySelectorAll(".js-block"); const blockParent = document.getElementById("js-block-parent");
if (blocks) { if (blockParent) {
Array.prototype.forEach.call(blocks, (block) => { let state = 0;
let state = 0; setInterval(() => {
setInterval(() => { blockParent.classList.remove(`state-${state}`);
block.classList.remove(`state-${state}`); state = state < 2 ? state + 1 : 0;
state = state < 2 ? state + 1 : 0; blockParent.classList.add(`state-${state}`);
if (state > 0) { }, INTERVAl);
block.classList.add(`state-${state}`);
}
}, INTERVAl);
});
} }
}); });