Scrolling Text Animation With Funky Borders

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. The box-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