add block component
This commit is contained in:
parent
904bc46b63
commit
652b42c95f
|
@ -0,0 +1,8 @@
|
||||||
|
<!-- TODO convert to proper template -->
|
||||||
|
<div class="js-block c-block c-block--4 c-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>
|
||||||
|
|
|
@ -0,0 +1,207 @@
|
||||||
|
$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 {
|
||||||
|
z-index: 1;
|
||||||
|
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 {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-block--2 {
|
||||||
|
&::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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-block--3 {
|
||||||
|
&::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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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__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: scale(1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .state-1 & {
|
||||||
|
transform: scale(0.5, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .state-2 & {
|
||||||
|
transform: scale(0.5, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// vim:set filetype=scss:
|
Reference in New Issue