A simple solution to creating a glitched text solution using only one text tag and some SCSS, using randomized animations. Commented for easy viewing.
Last active
December 24, 2021 10:14
-
-
Save Bild96/ee4f3b3ace091907fe305ecb7887e5f8 to your computer and use it in GitHub Desktop.
SCRT BAZZAR (SCSS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="app"> | |
<div id="wrapper"> | |
<!-- Make sure data-text equals the text you put inside the tags. --> | |
<h1 class="glitch" data-text=" | |
SCRT BAZZAR">SCRT BAZZAR</h1> | |
<span class="sub">coming soon..</span> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Ignore all of this, scroll down until you see the next comment. | |
// I just like my eye candy. | |
@import url('https://fonts.googleapis.com/css?family=Montserrat:100'); | |
html, body, h1 { | |
padding: 0; | |
margin: 0; | |
font-family: 'Montserrat', sans-serif; | |
} | |
#app { | |
background: rgb(10,10,10); | |
height: 100vh; | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
background: linear-gradient(rgba(10,10,10,.6),rgba(0,0,0,.9)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), | |
url('https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7118759521e3184778a3b5e010e202c6'); | |
background-size: cover; | |
background-position: center; | |
z-index: 1; | |
} | |
#wrapper { | |
text-align: center; | |
} | |
.sub { | |
color: rgb(100,220,220); | |
letter-spacing: 1em; | |
} | |
// Here's the meat and potatoes. | |
/* Our mixin positions a copy of our text | |
directly on our existing text, while | |
also setting content to the appropriate | |
text set in the data-text attribute. */ | |
@mixin glitchCopy { | |
content: attr(data-text); | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.glitch { | |
position: relative; | |
color: white; | |
font-size: 4em; | |
letter-spacing: .5em; | |
/* Animation provies a slight random skew. Check bottom of doc | |
for more information on how to random skew. */ | |
animation: glitch-skew 1s infinite linear alternate-reverse; | |
// Creates a copy before our text. | |
&::before{ | |
// Duplicates our text with the mixin. | |
@include glitchCopy; | |
// Scoots text slightly to the left for the color offset. | |
left: 2px; | |
// Creates the color 'shadow' that happens on the glitch. | |
text-shadow: -2px 0 #ff00c1; | |
/* Creates an initial clip for our glitch. This works in | |
a typical top,right,bottom,left fashion and creates a mask | |
to only show a certain part of the glitch at a time. */ | |
clip: rect(44px, 450px, 56px, 0); | |
/* Runs our glitch-anim defined below to run in a 5s loop, infinitely, | |
with an alternating animation to keep things fresh. */ | |
animation: glitch-anim 5s infinite linear alternate-reverse; | |
} | |
// Creates a copy after our text. Note comments from ::before. | |
&::after { | |
@include glitchCopy; | |
left: -2px; | |
text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1; | |
animation: glitch-anim2 1s infinite linear alternate-reverse; | |
} | |
} | |
/* Creates an animation with 20 steaps. For each step, it calculates | |
a percentage for the specific step. It then generates a random clip | |
box to be used for the random glitch effect. Also adds a very subtle | |
skew to change the 'thickness' of the glitch.*/ | |
@keyframes glitch-anim { | |
$steps: 20; | |
@for $i from 0 through $steps { | |
#{percentage($i*(1/$steps))} { | |
clip: rect(random(100)+px, 9999px, random(100)+px, 0); | |
transform: skew((random(100) / 100) + deg); | |
} | |
} | |
} | |
// Same deal, just duplicated for ultra randomness. | |
@keyframes glitch-anim2 { | |
$steps: 20; | |
@for $i from 0 through $steps { | |
#{percentage($i*(1/$steps))} { | |
clip: rect(random(100)+px, 9999px, random(100)+px, 0); | |
transform: skew((random(100) / 100) + deg); | |
} | |
} | |
} | |
// Does the same deal as before, but now only skews. Used for main text. | |
@keyframes glitch-skew { | |
$steps: 10; | |
@for $i from 0 through $steps { | |
#{percentage($i*(1/$steps))} { | |
transform: skew((random(10) - 5) + deg); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment