Find important hints, super tricks and the latest news about our products and our company!

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.

💡 Try it nowsuperplug.in/supermarquee

What do you think of these updates? Let us know your feedback! 🚀

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.

  1. Head over to SuperMarquee’s Visual Designer
  2. In the Presets section, press on the “Starwars” preset button. You see how the preview updates instantly.
  3. Click on “Toggle Preview Settings” to customize the preview area.
  4. 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).


  5. Want to customize the text? No problem—just edit the text box with your own custom text.


  6. 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:

  1. 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


  2. Copy the provided code
  3. 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! 🚀

Got questions or feedback? Drop us a line!

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.

Give it a try and try it online.

Fading Edges for a Smooth Scrolling Experience

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.

Happy coding!

SuperMarquee Version 1.4

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.

Useful Links:

Hello SuperPlugin Blog!

Today we launched our blog to keep you updated with the latest news, tips & tricks about our products and our company itself.

What you can expect from this blog?

  • Information on product updates
  • Tutorials, tips & tricks on how to get even more out of our plugins
  • Alerts of special deals and discounts
  • Inspirational usage of our plugins incl. showcases of our customers
  • … and much much more!

Feel free to drop us a line if you are interested in a special blog post or topic.