Удаление сканлиний
This commit is contained in:
parent
4cde9fc55a
commit
275fc232a4
|
@ -1,13 +1,6 @@
|
||||||
@import 'scanlines';
|
|
||||||
@import 'underlines';
|
@import 'underlines';
|
||||||
@import 'sliders';
|
@import 'sliders';
|
||||||
|
|
||||||
//#wrapper-navbar {
|
|
||||||
.navbar-brand {
|
|
||||||
@include scan-crt(true);
|
|
||||||
@include scan-moving(false);
|
|
||||||
@extend .scanlines;
|
|
||||||
}
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,102 +0,0 @@
|
||||||
/* REGULAR SCANLINES SETTINGS */
|
|
||||||
|
|
||||||
// width of 1 scanline (min.: 1px)
|
|
||||||
$scan-width: 2px;
|
|
||||||
|
|
||||||
// emulates a damage-your-eyes bad pre-2000 CRT screen ♥ (true, false)
|
|
||||||
$scan-crt: true;
|
|
||||||
|
|
||||||
// frames-per-second (should be > 1), only applies if $scan-crt: true;
|
|
||||||
$scan-fps: 60;
|
|
||||||
|
|
||||||
// scanline-color (rgba)
|
|
||||||
$scan-color: rgba(#000, .3);
|
|
||||||
|
|
||||||
// set z-index on 8, like in ♥ 8-bits ♥, or…
|
|
||||||
// set z-index on 2147483648 or more to enable scanlines on Chrome fullscreen (doesn't work in Firefox or IE);
|
|
||||||
$scan-z-index: 2147483648;
|
|
||||||
|
|
||||||
/* MOVING SCANLINE SETTINGS */
|
|
||||||
|
|
||||||
// moving scanline (true, false)
|
|
||||||
$scan-moving-line: true;
|
|
||||||
|
|
||||||
// opacity of the moving scanline
|
|
||||||
$scan-opacity: .75;
|
|
||||||
|
|
||||||
/* MIXINS */
|
|
||||||
|
|
||||||
// apply CRT animation: @include scan-crt($scan-crt);
|
|
||||||
@mixin scan-crt($scan-crt) {
|
|
||||||
@if $scan-crt == true {
|
|
||||||
animation: scanlines 1s steps($scan-fps) infinite;
|
|
||||||
}
|
|
||||||
@else { animation: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// apply CRT animation: @include scan-crt($scan-crt);
|
|
||||||
@mixin scan-moving($scan-moving-line) {
|
|
||||||
@if $scan-moving-line == true {
|
|
||||||
animation: scanline 6s linear infinite;
|
|
||||||
}
|
|
||||||
@else { animation: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CSS .scanlines CLASS */
|
|
||||||
|
|
||||||
.scanlines {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden; // only to animate the unique scanline
|
|
||||||
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
display: block;
|
|
||||||
pointer-events: none;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
// unique scanline travelling on the screen
|
|
||||||
&:before {
|
|
||||||
// position: absolute;
|
|
||||||
// bottom: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: $scan-width * 1;
|
|
||||||
z-index: $scan-z-index + 1;
|
|
||||||
background: $scan-color;
|
|
||||||
opacity: $scan-opacity;
|
|
||||||
// animation: scanline 6s linear infinite;
|
|
||||||
@include scan-moving($scan-moving-line);
|
|
||||||
}
|
|
||||||
|
|
||||||
// the scanlines, so!
|
|
||||||
&:after {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: $scan-z-index;
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
transparent 50%,
|
|
||||||
$scan-color 51%
|
|
||||||
);
|
|
||||||
background-size: 100% $scan-width*2;
|
|
||||||
@include scan-crt($scan-crt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ANIMATE UNIQUE SCANLINE */
|
|
||||||
@keyframes scanline {
|
|
||||||
0% {
|
|
||||||
transform: translate3d(0,200000%,0);
|
|
||||||
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scanlines {
|
|
||||||
0% {
|
|
||||||
background-position: 0 50%;
|
|
||||||
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in a new issue