Forem: Mohamed Youssouf

How To Create Horizontal Infinite Scrolling Text (Without Using JavaScript)

Mohamed Youssouf — Sun, 02 Apr 2023 13:53:50 +0000

Originally published at www.myoussouf.com

Back in the day, if we wanted to add a cool scrolling text animation to a website. The best and the easiest option would be to use the marquee tag, but nowadays it is deprecated and not advised to use it.

but with the modern properties that CSS has, we could do the exact thing even without JavaScript help!

In this tutorial, we will learn how to make scrolling text animation using the CSS animation property and @keyframe rule. So little knowledge of them is required.

The markup

<div class="scrolling_text">
    <div class="text">
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
    </div>
    <div class="text">
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
        <span>I'm moving wiiiiii!</span>
    </div>
</div>

Let’s break it down.

We created a parent element with the class name .scrolling_text that will be our main container.

Within it, we added two dives with class .text. Inside the .text element, we wrapped each word with the span tag to separate them.

You might ask yourself, why did we repeat .text twice?

We did this to make animation seamless because. If we used one .text element, there will be a blank space when its animation is about to complete as shown bellow.

The styling

we will start by styling the container element first.

.scrolling_text {
    width: 100%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}

In the above styles, We set the width of the .scrolling_text to 100% to make it take the full width of the page.

We used white-space property and set it to nowrap to prevent the text line from breaking.

also, it is important to set overflow to hidden to prevent the horizontal scrolling bar from appearing.

Next, let’s add styles to the .text element.

.text {
    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
    color: #3A1240;
}

As for the text element, nothing special is happening. We just made the font big and capitalized it to make it stand out.

Lastly, let’s add a margin on the left and right sides of the span element to separate the words.

.text span {
    margin: 0 40px;
}

And that is all basic styling. Now we are going to add the animation. The fun part!

To use CSS animation, we have to define the animation sequences with the @keyframes rule first. And then call it on the element we want to implement the animation on using the animation property.

So, let’s begin by defining our animation sequence using the @keyframes.

@keyframes animate_text {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
}

We set the animation sequence to move the element from its initial position to the left side by using the transform property.

Note: Each @kayframes requires a name, so it can be used. In our case, we named our animation “animate_text”.

Now let’s apply the animation sequence we defined to the element we want to animate. Which is the .text element by adding the animation property to it.

.text {
    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
    color: #3A1240;
    animation: animate_text 30s linear infinite; /* The animation property */
}

We called the animation sequence we defined with the @keyframes by using the name we gave it which is animate_text. And we set the animation duration to 30 seconds and looped it infinitely by adding the infinite keyword.

And voila! Our horizontal scrolling text.

Conclusion

We learned how to make a scrolling text animation, and how to implement animation using the @keyframes rule and animation property in CSS.

I hope this article was helpful to you, thanks for reading!

Free Tailwind CSS personal portfolio template

Mohamed Youssouf — Sun, 19 Mar 2023 15:26:42 +0000

Hello everyone!

Building a professional looking portfolio is a hard task and it takes a lot of time. that's why I built an open source portfolio template.

Carbon is free TailwindCSS portfolio template that's perfect for developers and designers. It comes with a high-quality design and all the essential components & pages you need to launch a complete portfolio website.

The template includes 5 pages, and they are:

Home
Work
Case study
About
Contact

Github link: https://github.com/MohamedYoussouf/carbon

Live preview: https://carbon-theme.netlify.app/

Feel free to share your thoughts in the comments.

Follow me on Twitter, I share useful tweets about web development and design there.

Top 5 free Figma UI kits to use in your projects

Mohamed Youssouf — Tue, 21 Sep 2021 13:01:02 +0000

Figma has become one of the most essential tools for designers, it has a huge community of users that share lots of free Figma resources.

In this post, I will share with some of my favorite Figma UI kits which you can use it in your projects or just for practicing purposes

Forem: Mohamed Youssouf

How To Create Horizontal Infinite Scrolling Text (Without Using JavaScript)

The markup

The styling

Conclusion

Free Tailwind CSS personal portfolio template

Github link: https://github.com/MohamedYoussouf/carbon

Live preview: https://carbon-theme.netlify.app/

Top 5 free Figma UI kits to use in your projects

Landify

Material Baseline Design Kit

Webpixels Design System

Marvie IOS UI Kit Dark theme

iOS 15 UI Kit for Figma