diff --git a/assets/scss/5-modules/glitch.scss b/assets/scss/5-modules/glitch.scss index 12386c6..878050c 100644 --- a/assets/scss/5-modules/glitch.scss +++ b/assets/scss/5-modules/glitch.scss @@ -23,3 +23,62 @@ .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; + } +} diff --git a/assets/scss/8-rwd/_rwd-reduced-motion.scss b/assets/scss/8-rwd/_rwd-reduced-motion.scss index a311a5b..4afc38f 100644 --- a/assets/scss/8-rwd/_rwd-reduced-motion.scss +++ b/assets/scss/8-rwd/_rwd-reduced-motion.scss @@ -21,4 +21,9 @@ .catalog-item__content:focus .catalog-item__visual { transform: none; } + + .coverGlitch, + .coverGlitchSimpleHover:hover { + animation: none; + } } diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 0b95e34..bcb4dcf 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -38,7 +38,7 @@ + + {{ partial "cover-glitch-svg-filter" .}} + {{ end }} diff --git a/layouts/index.html b/layouts/index.html index c481836..8c8324a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -44,7 +44,7 @@

{{ .Title }}

by {{ .Params.artist }}
{{ end }} + + {{ partial "cover-glitch-svg-filter" .}} + {{ end }} diff --git a/layouts/partials/cover-glitch-svg-filter.html b/layouts/partials/cover-glitch-svg-filter.html new file mode 100644 index 0000000..af0d60f --- /dev/null +++ b/layouts/partials/cover-glitch-svg-filter.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + +