Creating a Star Wars Scroller with SuperMarquee's Visual Designer

#webdev #frontend #supermarquee #javascript

Ever wanted to create that epic Star Wars scrolling text with plan javascript for your website?

Today I gave it a try with the frontend javascript library called SuperMarquee. This library is completey free to use for personal projects and even comes with a Visual Designer.

Step 1
Setup your demopage in which you want to integrate the effect.

<!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>   

  <script src="https://cdn.jsdelivr.net/npm/sp-supermarquee@latest/dist/SuperMarquee.min.js"></script>
  <script type="application/javascript">
     // Code logic will be inserted here.
  </script>

</body>
</html>

Step 2

Launch the Visual Designer of SuperMarquee
Click on "Starwars" preset
Bonus. Add some fading edges using the Fading edges settings
Generate the code with the footer-buttons
Copy & paste it into your project

That's it

In just a few steps we have created a Star Wars-styled scrolling effect.

If you have any questions - just drop me a line!

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more