How to Implement a Marquee Animation using HTML and CSS
What’s up coders? Today, we are going to implement a marquee animation. Repeating this sounds weird because I guess if you clicked on the headline, you knew what you were subscribing for lol, silly me.
This is a demo of what we are about to build:
It is very simple animation but brings so much enhancement to a website. I guess the person who said “simplicity is the key of brillance” was right.
Prerequisites
In order for us to achieve our objective we need to have a basic knowledge of HTML and CSS.
Let’s get our hands dirty now!
1. Organizing the project 📁
NB: You may skip this step if you have your project setup already.
In the root directory of our project, let’s create an index.html file, an assets folder (to place our images) and a style.css file. The final result should be something like:
2. Page Structure
In the index.html file, paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Playwrite+NL:[email protected]&display=swap"
rel="stylesheet"
/>
<title>Marquee Animation</title>
</head>
<body>
<h1>Marquee Animation</h1>
<div class="marquee">
<div class="marquee__slider">
<img src="./assets/bmw.jpg" />
<img src="./assets/apple.png" />
<img src="./assets/mercedes.jpg" />
<img src="./assets/tesla.jpg" />
</div>
<div class="marquee__slider">
<img src="./assets/bmw.jpg" />
<img src="./assets/apple.png" />
<img src="./assets/mercedes.jpg" />
<img src="./assets/tesla.jpg" />
</div>
</div>
</body>
</html>- As you can see, we have a marque class that encloses two marquee__slider classes.
- The marquee__slider classes contain identical images in the same order intentionally to create a seamless animation. This ensures that when the first slider finishes moving across the page, the second one continues before the first returns to its starting position.
If we fail to add a second identical marquee__slider class, the animation will look like this:
3. Styling 🎨
In the style.css file, let’s paste the following code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
width: 100vw;
flex-direction: column;
justify-content: center;
gap: 3rem;
align-items: center;
background-color: #f7f7f7;
font-family: "Playwrite NL", cursive;
}
.marquee {
border: 2px solid black;
display: flex;
overflow: hidden;
white-space: nowrap;
width: 40%;
}
.marquee__slider {
display: flex;
flex-direction: row;
object-fit: cover;
padding: 5px;
animation: marquee linear 5s infinite;
}
img {
width: 150px;
height: 150px;
object-fit: cover;
}
.marquee:hover .marquee__slider {
animation-play-state: paused;
}
@keyframes marquee {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}- The key part to our styling is the key frame we have created. Here we are moving the marquee__slider from right to left and immediately as the animation ends, it is moved back to it’s initial position for the animation to start back.
- Notice the animation property in the marquee__slider class. We added the animation-name (see key frame) plus other properties such as animation-duration, animation-timing-function and animation-iteration-count (More on this here).
- We also made the animation to stop on hover thanks to the lines:
.marquee:hover .marquee__slider {
animation-play-state: paused;
}Hot take ❗:
- For this animation to work correctly, you must always make sure that the width of your marquee_slider class is greater than that of the marquee class because when the animation ends, the slider is moved back to 0% and of your slider is too small, the user will notice it moving back to position and the animation will be less appealing to see.
Just like that, we’ve finished implementing our smooth marquee. Feel free to leave a clap if you enjoyed it!
In Plain English 🚀
Thank you for being a part of the In Plain English community! Before you go:
- Be sure to clap and follow the writer ️👏️️
- Follow us: X | LinkedIn | YouTube | Discord | Newsletter
- Visit our other platforms: CoFeed | Differ
- More content at PlainEnglish.io
