This will be a quick one for simple animation lovers 🥰
The following code covers creating scrolling text which moves across the screen. Additionally, I'll add a funky border to the scrolling text.
For the love of A Tribe Called Quest, the chosen colors & font pay homage to The Low-End Theory album. Enjoy Buggin Out to this as I did.
-- 1️⃣ --
We'll import our font choice and set up the color palette in the root. We use CSS variables to pass on data to pass on these properties later on in the code.
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
:root {
--green: #2e9d1e;
--red: #fc040c;
--black: #181816;
--white: #e9eef4;
--font: "Permanent Marker";
}
-- 2️⃣ --
To keep this simple, we'll be giving the following h1
the ability to scroll across the page.
<div class="scrolling-container">
<h1><span>Scrolling Text</span></h1>
</div>
A div
with the class of scrolling-container
wraps around the h1
. The scrolling container
will hold the following properties:
.scrolling-container {
position: relative;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
👉 position: relative;
ensures the div remains "in the flow" of the layout but still movable!
👉 width: 100%;
gives the div the ability to take up its full width
👉 both overflow-x: hidden;
and overflow-y: hidden;
make it so that the div has no scrolling mechanism within itself.
-- 3️⃣ --
Now for our h1
, we give it the following properties.
h1 {
font-family: var(--font);
letter-spacing: 3px;
line-height: 50px;
text-transform: uppercase;
padding: 15px;
font-size: 3em;
color: var(--white);
text-align: center;
transform: translateX(100%);
animation: scrolling-text 10s linear infinite;
}
👉 The font-family
and color
properties use CSS variables to access the color and font we defined in the root.
👉 transform: translateX(100%)
repositions the element in a vertical direction.
👉 animation: scrolling-text 10s linear infinite;
sets the scrolling animation to this h1 element. scrolling-text
is the name of the animation made by keyframes below.
-- 4️⃣ --
We'll give our text some "Low-End" styling by targeting the span element.
span {
background-color: var(--black);
box-shadow: 0.2em 0.2em 0 0 var(--red), inset 0.2em 0.2em 0 0 var(--green);
}
- So our funky border is in actuality a
box-shadow
. Thebox-shadow
property combines an outset (outer shadow) with an inset (inner shadow)
-- 5️⃣ --
Finally, the @keyframes
properties that help create our scrolling animation take control of the transform:translateX
property of our h1
element.
@keyframes scrolling-text {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
The main thing here is our element's state when it starts (at 0%) to when it ends (at 100%). Setting it from 100% to -100% will move the element from the right side of the screen to the left.
Just like that, we have some scrolling text with some funky borders. I hope you enjoyed this Scenario... I had fun making it ✌️
You can find the full code snippet here
Usage can be seen here
Top comments (0)