Scrolling Text Animation With Funky Borders
Tags: beginners, css, tutorial, codepen
Published: 2021-04-02 15:14:05

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/powmysiv3lsryjzoy9yy.gif)

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.

--- 

# <center> -- 1️⃣ -- </center>

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.

```css
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

:root {
  --green: #2e9d1e;
  --red: #fc040c;
  --black: #181816;
  --white: #e9eef4;
  --font: "Permanent Marker"; 
}
``` 

# <center> -- 2️⃣ -- </center>
To keep this simple, we'll be giving the following `h1` the ability to scroll across the page. 


```html
<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:

```css
.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.

# <center> -- 3️⃣ -- </center>
Now for our `h1`, we give it the following properties.

```css
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.

![text-without-animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzw5n25bmzvonu29ss4h.png)

# <center> -- 4️⃣ --  </center>
We'll give our text some "Low-End" styling by targeting the span element.

```css
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)

![funky-borders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pgadulf49cfqg3knau2.png)

# <center> -- 5️⃣ -- </center>
Finally, the `@keyframes` properties that help create our scrolling animation take control of the `transform:translateX` property of our `h1` element. 

```css
@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.

![Scrolling Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfyo3pa8hg33kwx7efud.gif)

---

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](https://codepen.io/remrkabledev/pen/GRrWPdR)

Usage can be seen [here](https://remrkabledev.github.io/Product-Landing-Page-5DCC/)