In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properties. We will add some attractive animations, and colors to the marquee effect.
Preview
Approach
- Create the basic structure of the web page using various elements like <div>, <h1>, <h3> elements.
- For the <div> class “marquee-container”, we will be applying the marquee animation by specifying the properties and animations. We will create the shadow and rounded corners for the effect of the marquee.
- We will also apply some attractive colors to make the effect beautiful. We will adjust the fonts, and spacing as per our need to make the effect more attractive.
- Use keyframes for defining the transform property. Set the property animation for 10s linear infinite for smooth animation to the element having class “marquee-container”.
Example: In this example, we will create a marquee effect using HTML and CSS.
HTML
<!DOCTYPE html> <html>
<head>
<title>Marquee Effect</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #feffae, #ffffff);
color: rgb(43, 70, 15);
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
h1 {
color: green;
margin-bottom: 10px;
}
h3 {
margin-bottom: 20px;
color: black;
}
.marquee-container {
display: flex;
overflow: hidden;
white-space: nowrap;
animation: marquee 10s linear infinite;
box-shadow: 0px 0px 10px rgba(36, 88, 21, 0.5);
border-radius: 10px;
}
.marquee-content {
font-size: 2em;
margin-right: 20px;
animation: textAnimation 5s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes textAnimation {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Marquee Effect using
HTML and CSS
</h3>
<div class="marquee-container">
<div class="marquee-content">
Welcome to GeeksforGeeks
</div>
</div>
</body>
</html>
|
Output:
Recommended Articles