We’re excited to announce the release of SuperMarquee 3.1, bringing new customization options, smarter scrolling behavior, and important bug fixes to make your experience even smoother. This update enhances flexibility, improves UI logic, and ensures a more seamless integration into your projects.
🎉 What’s New in SuperMarquee 3.1?
✨ New Features & Improvements
✅ Custom CSS Class Support You can now add custom CSS classes to SuperMarquee instances, making it easier to style and integrate the component into your existing projects without modifying inline styles.
✅ Automatic Line Break Handling in Vertical Scroll Mode SuperMarquee now automatically replaces line breaks when using vertical scrolling mode, ensuring cleaner formatting and a more natural flow for multi-line text.
✅ Smart Logic for Hiding Fading Borders in PingPong Mode In PingPong scrolling mode, SuperMarquee now automatically hides fading borders when scrolling isn’t needed—this prevents unnecessary UI elements from appearing when content fits within the given space.
🔄 Internal Optimizations & Changes
🔹 Replaced internal CSS class usage with data-ids
This improves styling consistency and prevents conflicts with global styles or other frameworks.
🐞 Bug Fixes
🔧 Fixed perspective/fader property issues for WebComponents
Enhancements to the fading effect and better 3D perspective rendering for a smoother user experience.
🔧 Fixed IntersectionObserver bug for WebComponents
Improved detection of element visibility, ensuring that scrolling behavior triggers correctly across different browser implementations.
📌 Why Upgrade to SuperMarquee 3.1?
With these new features and fixes, SuperMarquee is now more powerful, flexible, and reliable than ever. Whether you need smooth scrolling text effects, seamless vertical animations, or an easy-to-customize marquee solution, version 3.1 makes implementation even easier.
Ever wanted to create an epic Star Wars-style scrolling text for your website? With SuperMarquee 3.0 and its Visual Designer, you can do it in just a few minutes. Let’s get started.
Step 1: Prepare Your Page
Before we begin, make sure you have a webpage where you want to embed the Star Wars Scroller. This could be a personal project, a landing page, or even a fun Easter egg on your site.
In our case, we set up an example page which looks like this.
The red square identifies where the Star Wars scroller should be placed. The basic HTML setup including CSS looks like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Star Wars Scroller</title>
<style>
body {
background-color: black;
color: #ffff00;
font-family: Verdana;
}
#scrollContainer {
text-align: center;
font-size: 48px;
height: 40vh;
}
</style>
</head>
<body>
<h1>Example Page</h1>
<div id="scrollContainer"></div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</body>
</html>
Now, we are ready to create the Star Wars effect itself.
Step 2: Open the SuperMarquee Visual Designer
Good news! SuperMarquee already includes a Star Wars scrolling text preset 🎉. So creating this effect is a breeze.
In the Presets section, press on the “Starwars” preset button. You see how the preview updates instantly.
Click on “Toggle Preview Settings” to customize the preview area.
Adjust the preview settings. This is useful to match the look & feel of your actual website.
Background Color: Set it to black (0, 0, 0) for the classic Star Wars effect.
Font Color: Change it to yellow (255, 255, 0) for that iconic scrolling intro.
Font Align: Change it to “C” (center).
Want to customize the text? No problem—just edit the text box with your own custom text.
Bonus. Finally, let’s add a nice fade-out effect for extra drama. Change the Color From of the Top Border to black and increase the size with the slider. Bam, you have a realistic looking fade-out effect.
Feel free to play around with the other settings.
Step 3: Generate the Code & Embed It
Once you’re happy with the settings:
In the footer menu of the Visual Designer, click the button to generate to code. You can choose between the Javascript-, jQuery- or WebComponent-version
Copy the provided code
Paste it into your webpage. Note: Don’t forget to include the SuperMarquee library first and maybe you need to wrap the code inside script-tags, depending of your code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Star Wars Scroller</title>
<style>
body {
background-color: black;
color: #ffff00;
font-family: Verdana;
}
#scrollContainer {
text-align: center;
font-size: 48px;
height: 40vh;
}
</style>
</head>
<body>
<h1>Example Page</h1>
<div id="scrollContainer"></div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!-- Make sure to include the library, e.g. from our CDN -->
<script src="https://cdn.jsdelivr.net/npm/sp-supermarquee@latest/dist/SuperMarquee.min.js"></script>
<script type="application/javascript">
const sm = new SuperMarquee(
document.getElementById( 'scrollContainer' ),
{
"content": "May the force be with you!<br />HTML5 is your father!",
"mode": "continuous",
"spacer": "",
"pingPongDelay": "2000",
"type": "vertical",
"direction": "btt",
"speed": "0.1",
"btnradio": "on",
"speed-custom-range": "0.125",
"position": "custom",
"pauseonhover": false,
"perspective": "{\"z\":\"400\",\"originX\":\"50\",\"originY\":\"50\",\"rotateX\":\"60\",\"rotateY\":\"0\",\"rotateZ\":\"0\"}",
"fader": "{\"left\":{\"size\":\"0\",\"colorFrom\":\"rgba( 255, 255, 255, 1 )\",\"colorTo\":\"rgba( 255, 255, 255, 0 )\"},\"right\":{\"size\":\"0\",\"colorFrom\":\"rgba( 255, 255, 255, 1 )\",\"colorTo\":\"rgba( 255, 255, 255, 0 )\"},\"top\":{\"size\":\"52\",\"colorFrom\":\"rgba( 0, 0, 0, 1 )\",\"colorTo\":\"rgba( 255, 255, 255, 0 )\"},\"bottom\":{\"size\":\"0\",\"colorTo\":\"rgba( 255, 255, 255, 1 )\",\"colorFrom\":\"rgba( 255, 255, 255, 0 )\"}}"
}
);
</script>
</body>
</html>
Step 4: Final adjustment and fine-tuning the experience
After everything works, you can fine-tune and adjust settings and styles directly in your project.
🌟 That’s It! You’re Ready to Roll
In just a few minutes, you’ve created a Star Wars-style scrolling text effect for your own site using SuperMarquee’s Visual Designer—just low coding required! 🚀
SuperMarquee 3.0: The Next Evolution for Web Developers
We are thrilled to announce the release of SuperMarquee 3.0 – the latest version of our HTML5 marquee component tailored specifically for web developers. This major update brings a host of new features, performance improvements, and bug fixes that promise to elevate your development experience.
New Features and Enhancements
VisualDesigner for Code-Free Creation
One of the standout features in SuperMarquee 3.0 is our new VisualDesigner. This intuitive tool enables you to create marquee instances without writing a single line of code. With an integrated code generator, you can quickly produce clean, ready-to-use code that perfectly fits your project’s requirements. Whether you’re a seasoned developer or just starting out, the VisualDesigner simplifies the process and streamlines your workflow.
Say goodbye to abrupt transitions! Our new Fading Edges option allows you to implement soft, elegant fades at the edges of your scrolling text. This enhancement not only adds a professional polish to your marquee displays but also ensures a smoother, more engaging user experience.
Improved Performance and Bug Fixes
SuperMarquee 3.0 comes with significant performance improvements, making it faster and more efficient than ever before. We’ve meticulously addressed and fixed several bugs from previous versions to provide you with a stable and reliable tool for all your web projects.
Extended Version Now at a Lower Price
In addition to the feature-rich standard edition, our Extended Version has also been updated and is now available at a reduced price to celebrate this release ✨✨✨. This makes it an even more attractive option for developers seeking enhanced functionality and extended support without stretching their budgets.
A Legacy of Success
We are proud to share that our previous versions of SuperMarquee have been a tremendous success. With over 2 million accesses per month on our CDN, the community’s trust and engagement have been overwhelming. This milestone is a testament to the quality, reliability, and innovation that SuperMarquee brings to the table.
Get Started with SuperMarquee 3.0 Today!
With its innovative new features, improved performance, and user-friendly design, SuperMarquee 3.0 is set to become the go-to solution for creating dynamic, engaging marquee displays on the web. Upgrade to the latest version today and experience the next level of HTML5 marquee technology.
For more details, visit our official website or check out the documentation to see how SuperMarquee 3.0 can transform your web projects.
SuperMarquee Version 1.4 is out. The new version now supports RSS feeds. The feeds are fully customizable via templates. We will cover all details in an own tutorial post later.
The full changelog of version 1.4 is as follows:
ADDED: RSS feed loader
ADDED: RSS feed template engine
FIXED: Whitespace handling
Migration steps from 1.3 to 1.4:
none … just update 😉
Feel free to drop us a line if you encounter any problems or if you have any questions.
