Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Glitch effect strobocops
<div class="glitch" data-text="Strobocops">
<span class="glitch__color glitch__color--red">Strobocops</span>
<span class="glitch__color glitch__color--blue">Strobocops</span>
<span class="glitch__color glitch__color--green">Strobocops</span>
<span class="glitch__main">Strobocops</span>
<span class="glitch__line glitch__line--first"></span>
<span class="glitch__line glitch__line--second"></span>
</div>
<div class="stars">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
html {
height: 100%;
}
body {
align-items: center;
background: #000;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
.glitch {
animation: glitch-skew 4s cubic-bezier(.25, .46, .45, .94) 4s infinite;
font-family: orbitron, sans-serif;
font-size: 8rem;
font-weight: 900;
line-height: 1;
position: relative;
text-align: center;
text-transform: uppercase;
transform-origin: center top;
&__main {
color: #FFF;
}
&__color {
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
transform-origin: center center;
width: 100%;
z-index: -1;
&--red {
animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) infinite;
color: red;
}
&--blue {
animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) infinite reverse;
color: blue;
}
&--green {
animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) 100ms infinite;
color: #00FF0B;
}
}
&__line {
animation: glitch-line 2s linear infinite;
background: #000;
content: '';
height: 1px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
&--first {
animation: glitch-line 2s linear infinite;
}
&--second {
animation: glitch-line 1s linear 1s infinite;
}
}
}
@keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-8px, 8px);
}
40% {
transform: translate(-8px, -8px);
}
60% {
transform: translate(8px, 8px);
}
80% {
transform: translate(8px, -8px);
}
100% {
transform: translate(0);
}
}
@keyframes glitch-skew {
0% {
transform: skew(0deg, 0deg);
}
48% {
transform: skew(0deg, 0deg);
filter: blur(0);
}
50% {
transform: skew(-20deg, 0deg);
filter: blur(4px);
}
52% {
transform: skew(20deg, 0deg);
}
54% {
transform: skew(0deg, 0deg);
filter: blur(0);
}
100% {
transform: skew(0deg, 0deg);
}
}
@keyframes glitch-line {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.stars {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
&__star {
border-radius: 50%;
box-shadow: 0 0 4px 1px #FFF;
height: 1px;
position: absolute;
width: 1px;
z-index: 100;
@for $i from 1 through 100 {
&:nth-child(#{$i}) {
top: random(100) * 1%;
left: random(100) * 1%;
box-shadow: 0 0 4px random(3) * 1px #FFF;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.