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.
- Head over to SuperMarquee’s Visual Designer
- 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! 🚀
Got questions or feedback? Drop us a line!
