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>

19
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>

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

@ -1,45 +1,203 @@
$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 {
transform-origin: 100% 100%;
transition: transform $duration;
transform: scale3d(0.5, 1, 1);
}
&.state-2 > .c-block__bg {
transform-origin: 100% 100%;
transform-origin: 100 100;
transition: transform $duration;
transform: scale3d(0.5, 0.5, 1);
} }
> .c-block__img { > .c-block__img {
will-change: opacity, transform; z-index: 2;
transform-origin: 0 0; //will-change: opacity, transform;
transition: opacity $duration $delay ease-in, transform $duration; background-size: cover;
opacity: 1; background-position: center;
transform: none; opacity: 0;
}
}
.c-block--1 {
&::before {
transform-origin: 100% 100%;
@at-root .state-0 & {
transform: scale3d(1, 1, 1);
} }
&.state-1 > .c-block__img { @at-root .state-1 & {
transition: opacity $duration $delay ease-out, transform $duration; transform: scale3d(0.5, 1, 1);
opacity: 0; }
@at-root .state-2 & {
transform: scale3d(0.5, 0.5, 1);
}
}
> .c-block__img {
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); transform: translate(50%, 0) scale(1.3);
} }
&.state-2 > .c-block__img { @at-root .state-2 & {
opacity: 0;
transform: translate(50%, 50%) scale(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);
}
}
> .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 {
&::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);
}
}
> .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--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);
}
}
} }
// vim:set filetype=scss: // vim:set filetype=scss:

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,

12
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(() => {
block.classList.remove(`state-${state}`); blockParent.classList.remove(`state-${state}`);
state = state < 2 ? state + 1 : 0; state = state < 2 ? state + 1 : 0;
if (state > 0) { blockParent.classList.add(`state-${state}`);
block.classList.add(`state-${state}`);
}
}, INTERVAl); }, INTERVAl);
});
} }
}); });