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