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!