Remember last time, here in this blog "https://dev.to/harshitads44217/mothers-day-special-blog-2ack", we discussed how the <marquee>
tag used to be a top choice for developers in the web development industry? We also discovered that itโs been deprecated for quite a while now.
But guess what? Marquee-like animations are making a comeback in modern design trends! These are creating seamless scrolling effects.
.
- Collection of text-marquee-effect by awwwards.com
I'm back with some cool, alternative ways to create those eye-catching marquee effects without using the deprecated tag. Let's dive in and explore these exciting techniques to implement seamless scrolling effects!
.
1. Using GSAP ๐
.
If you like using JavaScript for the frontend development tasks then GSAP can be a great tool for you. If you know what it is, then well and good, otherwise let me introduce you to the ultimate modern tool for animation.
GSAP Official Website
Infinite Marquee GSAP Forum
GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It offers robust tools and an easy-to-use API to animate elements with precision and efficiency.
Consider this HTML
code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Example</title>
<style>
#gsap-marquee {
margin: 48vh 0;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
width: 100%;
background-color: teal;
border-radius: 6px;
line-height: 2.5em;
color: white;
font-size: 48px;
font-weight: 600;
font-smooth: always;
}
#gsap-marquee span {
display: inline-block;
padding-left: 100%;
}
</style>
</head>
<body>
<div id="gsap-marquee">
<span>This is a scrolling text created with GSAP.</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
gsap.to("#gsap-marquee span", {
xPercent: -100,
ease: "none",
duration: 10,
repeat: -1
});
</script>
</body>
</html>
In this example, GSAP animates the inside the #gsap-marquee
container. The text scrolls from right to left, creating a marquee effect. The gsap.to method moves the text by 100% of its width (xPercent: -100)
over 10 seconds, and this animation repeats indefinitely (repeat: -1)
. The ease: "none" ensures a constant speed throughout the animation.
.
Output :-
.
This setup ensures the text scrolls smoothly and continuously across the screen, mimicking the classic marquee effect with modern animation capabilities.
.
2. Using CSS Animation ๐คฉ
.
Don't underestimate the power of Cascading Style Sheets. CSS alone can make powerful and interactive animations. People who have some hands on over CSS animation know it very well. If you are somewhat skeptical then consider this HTML
code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
.scrolling-text {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
background-color: deeppink;
border-radius: 10px;
color: white;
margin:48vh 0;
}
.scrolling-text span {
display: inline-block;
line-height: 2.5em;
font-size:48px;
font-weight:400;
font-smooth: always;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="scrolling-text">
<span>This is a scrolling text created with CSS animations.</span>
</div>
</body>
</html>
This code creates a scrolling text animation using CSS animations.
.
Output :-
.
This code creates a scrolling text animation using CSS animations. Here's how it works. The div
with class name scrolling-text
contains a span
where the intended text is. The desired styling is applied to the div. A deeppink background, white text, rounded corners, and hidden overflow to ensure the text scrolls within the container. The text is styled with a large font size, specific line height, and smooth font rendering. Now here comes a few points to remember:-
.
CSS Animation:
- The
span
element is given aninline-block
display, ensuring it takes up space and aligns correctly. - The
padding-left: 100%
ensures that the text starts off-screen to the right. - The
animation: scroll-left 20s linear infinite
applies a keyframes animation calledscroll-left
to thespan
element. This animation lasts for 20 seconds, runs in a linear fashion, and loops infinitely.
Keyframes Animation:
- The
@keyframes scroll-left
defines the animation namedscroll-left
. -
0% { transform: translateX(100%); }
sets the initial position of the text to be completely off-screen to the right. -
100% { transform: translateX(-100%); }
moves the text to be completely off-screen to the left by the end of the animation.
How's it happening
.
- The animation starts with the text positioned off-screen to the
right (transform: translateX(100%))
. - Over 20 seconds, the text moves horizontally to the
left (transform: translateX(-100%))
, making it appear as if the text is scrolling across the screen. - Once the text reaches the left side and moves off-screen, the animation restarts, creating an infinite scrolling effect.
.
3. Using JavaScript ๐
If you are a fan of using JavaScript in your project then you can consider this implementation might sound interesting to you. Here in this implementation we will be using animation like the last example but by using JavaScript.
Consider this HTML
code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Scroller Example</title>
<style>
#scroll-container {
white-space: nowrap;
overflow: hidden;
width: 100%;
box-sizing: border-box;
background-color: royalblue;
border-radius: 10px;
color: white;
margin:48vh 0;
}
#scroll-text {
display: inline-block;
line-height: 2.5em;
padding-left: 100%;
font-size:48px;
font-weight:400;
font-smooth: always;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="scroll-text">This is a scrolling text created with JavaScript.</div>
</div>
<script>
function scrollText() {
const text = document.getElementById('scroll-text');
let position = text.offsetLeft;
function animate() {
position -= 1;
if (position < -text.offsetWidth) {
position = text.parentElement.offsetWidth;
}
text.style.transform = `translateX(${position}px)`;
requestAnimationFrame(animate);
}
animate();
}
document.addEventListener('DOMContentLoaded', scrollText);
</script>
</body>
</html>
.
Here JavaScript is used to create a scrolling text effect similar to the <marquee>
tag.
Output :-
The #scroll-container
holds the text and ensures it stays within a defined area. The #scroll-text
element is positioned within this container and moved continuously from right to left using the animate function. This function updates the position of the text and resets it once it has fully scrolled out of view, creating an infinite scrolling effect. The styling applied ensures the text and container have a visually appealing design with a blue background, white text, and rounded corners as we did in the last example.
.
4. Using jQuery ๐ค
.
.
It is also a JS implementation but by using a library called jQuery. If you have been working with JS from a while long then must have heard about it somewhere, right? or may be did not. Let me tell you something about it.
.
A small intro to jQuery:-
.
This also a JavaScript implementation but using a JS library this time
jQuery is a popular JavaScript library that simplifies working with web pages. It makes common tasks like grabbing elements, adding animations, and handling events much easier with shorter code. This lets developers focus on functionality instead of the nitty-gritty of JavaScript. It's free, open-source, and used on millions of websites! Launched in 2006, jQuery offered a much simpler way to interact with web pages compared to raw JavaScript. This led to its rapid adoption by developers. A steady rise in jQuery's usage throughout the late 2000s specifically 2006 onwards. By the late 2000s, jQuery had a well-established community, numerous plugins, and a mature codebase. This solidified its position as a dominant web development tool. That was a period of significant influence of jQuery.
This implementation gives an output similar to the previous one but using the jQuery library. Now consider this code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Scroller Example</title>
<style>
#scroll-container {
white-space: nowrap;
overflow: hidden;
width: 100%;
box-sizing: border-box;
background-color: blue;
border-radius: 10px;
color: white;
margin: 48vh 0;
line-height: 2.5em;
font-size: 48px;
font-weight: 400;
font-smooth: always;
}
#scroll-text {
display: inline-block;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="scroll-text">This is a scrolling text created with jQuery.</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var position = $('#scroll-text').offset().left;
var containerWidth = $('#scroll-container').width();
function animate() {
position -= 1;
if (position < -$('#scroll-text').width()) {
position = containerWidth;
}
$('#scroll-text').css('transform', 'translateX(' + position + 'px)');
requestAnimationFrame(animate);
}
animate();
});
</script>
</body>
</html>
.
See what's happening:-
.
Using basic jQuery functions and CSS. Here's a brief overview of the key steps:
-
Initialization: When the document is ready (
$(document).ready()
), the script initializes. This ensures the DOM is fully loaded before running the script. -
Element Selection: It selects the scrolling text element (
#scroll-text
) and calculates its initial position and the width of its container. -
Animation Logic: The
animate()
function updates the position of the text to create a scrolling effect. When the text scrolls out of view, it resets its position to create a continuous loop. -
CSS Transformation: The code applies a CSS
transform: translateX()
to the text element to move it horizontally. 5.** Frame Rate:** The animation loop continuously runs in sync with the browser's rendering cycle, ensuring smooth animation.
.
Output :-
.
.
Overall, the script continuously moves the text element horizontally within its container, creating a scrolling effect similar to the traditional marquee tag.
.
5. Using jQuery.Marquee Plugin ๐
.
Hope you are aware of the concept of plugin. So in jQuery, plugins are essentially pre-written Javascript code that extend jQuery's functionalities. They provide additional methods that you can use to achieve specific tasks on your web page, often simplifying complex interactions.
This jQuery plugin under animation category by AamirAfridi.com let's you scroll the text like the old traditional marquee. You can find this plugin here. So let's plug in to jQuery.
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Marquee Plugin Example</title>
<style>
#scroll-container {
width: 100%;
overflow: hidden;
box-sizing: border-box;
background-color: SlateBlue ;
border-radius: 10px;
color: white;
margin: 48vh 0;
padding: 10px; /* Add some padding for better visual presentation */
}
#scroll-text {
font-size: 48px;
font-weight: 400;
font-smooth: always;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="scroll-text">This is a scrolling text created with jQuery Marquee Plugin.</div>
</div>
<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Include jQuery Marquee Plugin -->
<script src="https://cdn.jsdelivr.net/npm/jquery.marquee/jquery.marquee.min.js"></script>
<script>
$(document).ready(function(){
$('#scroll-text').marquee({
// Configuration options
duration: 10000,
gap: 50,
delayBeforeStart: 0,
direction: 'left',
duplicated: true
});
});
</script>
</body>
</html>
After adding the latest version of jQuery and the jQuery Marquee plugin from a CDN the document is ready to add the marquee()
function and is called on the #scroll-text
element. The configuration options are set for the marquee, such as duration
, gap
, delayBeforeStart
, direction
, and duplicated
.
.
Output :-
.
.
By using this plugin, you can easily create a scrolling marquee effect with customizable options, making it a simple yet effective solution for adding animations to your web projects.
There are some similar jQuery plugins out there, that you can try your hands on. One such is jquery.simplemarquee
.
A Use Case : A CSS Scroll Snap ๐
.
Now, let's play around a use case where we need to show some elements moving from the right to the left. When we want to showcase company names in the partner section or display moving testimonials, we can use CSS Scroll Snap with Automatic Scrolling. Here's a simple implementation using CSS for this use case.
Now consider this code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scroll Snap with Automatic Scrolling</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.scroll-snap-container {
display: flex;
overflow: hidden;
width: 80%;
height: 10vh;
border-radius: 10px;
background-color: #f5a4d7;
position: relative;
}
.scroll-snap-wrapper {
display: flex;
width: calc(10 * 100% / 5); /* Two sets of items (5 original + 5 duplicates) */
animation: scroll 30s linear infinite;
}
.scroll-snap-item {
flex: 1 0 20%; /* Flex-grow: 1, Flex-shrink: 0, Flex-basis: 20% (5 items fit in 100%) */
text-align: center;
color: white;
background: #f5a4d7;
box-sizing: border-box;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-weight:400;
font-smooth: always;
}
.scroll-snap-item img {
max-width: 25%;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="scroll-snap-container">
<div class="scroll-snap-wrapper">
<div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
<div class="scroll-snap-item">Item 2</div>
<div class="scroll-snap-item">Item 3</div>
<div class="scroll-snap-item">Item 4</div>
<div class="scroll-snap-item">Item 5</div>
<div class="scroll-snap-item"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo"></div>
<div class="scroll-snap-item">Item 2</div>
<div class="scroll-snap-item">Item 3</div>
<div class="scroll-snap-item">Item 4</div>
<div class="scroll-snap-item">Item 5</div>
</div>
</div>
</body>
</html>
Here we create an automatic scrolling effect using CSS animations combined with the flexbox layout.
-
HTML Structure:
- The HTML contains a div with the class
scroll-snap-container
, which acts as the container for the scrolling items. - Inside the container, there is another
div
with the classscroll-snap-wrapper
, which holds multiplescroll-snap-item
elements.
- The HTML contains a div with the class
-
CSS Styling:
- The
scroll-snap-container
is styled to have a fixed size, with hidden overflow, rounded corners, and a background color. - The
scroll-snap-wrapper
is given a width that is double the containerโs width to create a seamless loop (two sets of items), and it uses the scroll keyframes animation to move its content. - Each
scroll-snap-item
is styled to be equally distributed within the container, with centered text and images.
- The
-
CSS Animation:
- The
@keyframes scroll
defines the animation namedscroll
. -
0% { transform: translateX(0); }
sets the initial position of the wrapper to the start. -
100% { transform: translateX(-100%); }
moves the wrapper to the left by 100% of its width over the duration of the animation.
- The
-
Animation Mechanism:
- The
scroll-snap-wrapper
uses thescroll
animation to move all items horizontally from right to left continuously. - This movement is achieved by setting the wrapper's initial transform to 0% and then moving it to -100% over 10 seconds, creating a looped effect. .
- The
Output :-
.
.
How It Works:
- The
scroll-snap-wrapper
contains two sets of items to ensure a seamless loop, moving from right to left over a set duration (10 seconds). - The
transform: translateX(-100%)
moves the content of the wrapper from its initial position to the left by 100% of its width, creating a continuous scrolling effect. - The
animation: scroll 10s linear infinite
ensures this movement is smooth, consistent, and repeats indefinitely, simulating a marquee-like animation using modern CSS techniques.
.
Adding another effect: Pause When Hover
And if we add want to pause the animation when we hover over the element we can add this in the style:-
.scroll-snap-wrapper:hover { animation-play-state: paused; }
.
Final Call: The Conclusion ๐ถโ๐ซ๏ธ๐ซฅ๐ฎ๐ค๐คฏ๐ซก๐
.
We have explored several alternatives to the traditional <marquee>
tag, each offering unique advantages and enhanced control for creating scrolling effects. From CSS animations and JavaScript scrollers to advanced solutions like GSAP and CSS Scroll Snap, these methods cater to modern web development standards and practices.
Let me know which method is your favorite! I'll keep sharing examples where marquee-like effects are used efficiently in contemporary designs. Your feedback and experiences are invaluable, so please share your preferred method and any insights or stories about working with the <marquee>
tag. Let's continue this conversation in the comments and inspire each other with creative scrolling effects.
Happy coding, and I look forward to reading your thoughts and experiences!
Suggested explorations on the same topic:-
- https://dev.to/harshitads44217/mothers-day-special-blog-2ack
- https://www.jqueryscript.net/demo/Text-Scrolling-Plugin-for-jQuery-Marquee/#google_vignette
- https://www.upgrad.com/blog/marquee-tag-attributes-in-html-features-uses-examples/
- https://www.geeksforgeeks.org/html-marquee-tag/
- https://blog.logrocket.com/deprecated-html-elements-and-what-to-use-instead/#:~:text=While%20the%20marquee%20tag%20makes,define%20what%20its%20content%20is.
- https://kasp9023.medium.com/what-happened-to-the-marquee-html-element-6ec6782f42ce#:~:text=When%20HTML5%20was%20developed%2C%20W3C%20decided%20to,that%20developers%20would%20not%20use%20the%20element.
- https://www.shiksha.com/online-courses/articles/marquee-tag-in-html-blogId-147137#:~:text=The%20tag%20in%20HTML%20is%20used%20to%20create%20a,moved%20horizontally%20across%20the%20screen.
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
- https://stackoverflow.com/questions/33102131/jquery-scrolling-text-like-marquee
- https://github.com/aamirafridi/jQuery.Marquee
- https://stackoverflow.com/questions/56522476/how-to-create-a-marquee-using-css-or-javascript
Top comments (1)
There's this website wildsouls.gr/en/. Shows remarkable work. see how they use this Marquee animation in different sections! Product section, Buttons, Footer ...