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