1
0
Fork 0
mirror of https://github.com/GuerillaStudio/now-playing synced 2024-11-18 01:11:52 +00:00
now-playing/assets/scss/5-modules/glitch.scss
2020-03-23 12:20:29 +01:00

84 lines
1.3 KiB
SCSS

//
// (TEXT) PARAMS
// =================
// 1. Namespace
// 2. Intensity
// 3. Text color
// 4. Background color (flat)
// 5. Highlight #1 color
// 6. Highlight #2 color
// 7. Width (px)
// 8. Height (px)
//
.glitch,
.glitch--hover:hover {
@include textGlitch("glitchText", 50, $color-bg-head, red, blue, 9999, 100);
}
.glitch:nth-child(2)::after,
.glitch--hover:hover:nth-child(2)::after,
.glitch:nth-child(2)::before,
.glitch--hover:hover:nth-child(2)::before {
animation-delay: .3s;
}
.coverGlitch {
animation: coverTransform 2.5s steps(10) infinite, coverGlitch 3.2s infinite;
}
.coverGlitchSimpleHover:hover {
animation: coverGlitch 3.2s infinite;
}
.coverGlitch-svgFilter {
position: absolute;
visibility: hidden;
width: .1rem;
height: .1rem;
}
@keyframes coverGlitch {
45% {
filter: none;
}
46% {
filter: url(#dist-01);
}
47% {
filter: url(#dist-02);
}
48% {
filter: url(#dist-03);
}
50% {
filter: none;
}
95% {
filter: none;
}
96% {
filter: url(#dist-02);
}
97% {
filter: url(#dist-04);
}
}
@keyframes coverTransform {
0% {
transform: translate(-1%, -1%) scale(1.005);
}
1% {
transform: none;
}
88% {
transform: none;
}
89% {
transform: translate(1%, 2%) scale(1.005);
}
90% {
transform: none;
}
}