DEV Community

loading...
Cover image for Scrolling Text Animation With Funky Borders

Scrolling Text Animation With Funky Borders

remrkabledev profile image Malcolm R. Kente ・3 min read

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.

Scrolling Text With Funky Borders

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"; 
}
Enter fullscreen mode Exit fullscreen mode

-- 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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ 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;
}
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ 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.

text-without-animation

-- 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);
}
Enter fullscreen mode Exit fullscreen mode
  • So our funky border is in actuality a box-shadow. The box-shadow property combines an outset (outer shadow) with an inset (inner shadow)

funky-borders

-- 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%);
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Scrolling Text


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

Discussion (0)

pic
Editor guide