69 lines
1.2 KiB
SCSS
69 lines
1.2 KiB
SCSS
// Refined from
|
|
// https://github.com/ctrl-freaks/freezeframe.js/tree/master/packages/freezeframe/src
|
|
|
|
$base-zindex: 0;
|
|
$transition-duration: 300ms;
|
|
|
|
// Classnames must line up with classes in classes.js
|
|
.ff-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
.ff-image {
|
|
z-index: $base-zindex;
|
|
vertical-align: top;
|
|
opacity: 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.ff-canvas {
|
|
border-radius: var(--border-radius);
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
z-index: $base-zindex + 1;
|
|
vertical-align: top;
|
|
opacity: 0;
|
|
|
|
&.ff-canvas-ready {
|
|
transition: opacity $transition-duration;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.ff-active {
|
|
.ff-image {
|
|
opacity: 1;
|
|
}
|
|
.ff-canvas.ff-canvas-ready {
|
|
transition: none;
|
|
opacity: 0;
|
|
}
|
|
.ff-overlay {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.ff-inactive {
|
|
.ff-canvas.ff-canvas-ready {
|
|
transition: opacity $transition-duration;
|
|
opacity: 1;
|
|
}
|
|
.ff-image {
|
|
transition: opacity $transition-duration;
|
|
transition-delay: 170ms;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&.ff-responsive {
|
|
width: 100%;
|
|
|
|
.ff-image,
|
|
.ff-canvas {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|