moving vhs effect

Tags: not a laylout, code, vhs, noise

Description:

this vhs effect is not like the others, this one actually moves!! :3
- adds a vhs overlay to your profile

Code:

<!-- (c) Layout created by aerin (https://layouts.spacehey.com/layout?id=36718) -->

<style>
.noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 400;
opacity: 0.8;
pointer-events: none;
opacity: 1;
z-index: 450;
}

.noise:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ice-creme.de/images/background-noise.png');
pointer-events: none;
will-change: background-position;
animation: noise 1s infinite alternate;
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.6;
will-change: opacity;
animation: opacity 3s linear infinite;
}

.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size;
animation: scanlines 0.2s linear infinite;
}

.main {
}

.main .noise:before {
background-size: 170%;
}

.main .vhs {
position: absolute;
left: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
will-change: opacity;
animation: type 1.2s infinite alternate;
animation-delay: calc(60ms * var(--char-index));
}

.main .time {
position: absolute;
right: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .glitchtext {
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}

@keyframes opacity {
0% {
opacity: 0.6;
}
20% {
opacity: 0.3;
}
35% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
60% {
opacity: 0.4;
}
80% {
opacity: 0.7;
}
100% {
opacity: 0.6;
}
}

@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
}
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

@keyframes type {
0%,
19% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
</style>
<div class="lines"></div>
<div class="main">
<div class="noise"></div>

<style>
.rgbtxt {
animation: rgbText 1s steps(9) 0s infinite alternate;
animation-name: rgbText;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

</style></div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 67 comments ( View all | Add Comment )

𝜗𝜚𝚖𝚊𝚛𝚝𝚢𝚗𝚊	1731330397 using <3 Report Comment
Sm0lBvn	1730705776 Using XD Report Comment
OLLIE/MILO!!	1730128722 Usingg!! Report Comment
𝕷𝖚𝖈𝖎𝖋𝖊𝖗	1729433508 using Report Comment
june (ryro4ever)	1728768469 using! >< Report Comment
✦ 𝐭𝐨𝐲𝐨𝐥𝐝𝐢𝐞𝐳 ✦	1728593154 usingg!! Report Comment
𐔌 . ⋮ r#b .ᐟ ֹ ₊ ꒱	1727008279 using! Report Comment
tommy ⚭	1726851819 using :-) Report Comment
xMarisaDesux	1726767641 Using! Report Comment
☆ FRED ! !	1726560277 using !! Report Comment
✿moths.asleep✿	1726358129 Using !! This is an awesome filter :) Report Comment
6ane	1725326645 Usingg! Report Comment
ೄྀSilas	1722759238 Using l Report Comment
zeke	1721174890 using waow Report Comment
MJ	1721125142 using Report Comment
gummyLungz	1721070566 using tysmm!! Report Comment
❝𝐌𝐄𝐃𝐈𝐂❞	1720683534 using Report Comment
Ehtupablo	1718957898 USING Report Comment