Creating the Star Wars opening crawl (text scrolling effect) in WordPress can be done using CSS and JavaScript. Below is a step-by-step guide on how to implement this effect using a custom WordPress page template, a plugin, or a shortcode.


Method 1: Using CSS & HTML (Best for Simplicity)

This method is straightforward and works without additional plugins.

Step 1: Add the HTML Structure

Create a new page or post in WordPress and add the following HTML to the Text/HTML editor:

<div class="star-wars-container">
<div class="crawl">
<p class="title">Episode IV</p>
<p class="subtitle">A New Hope</p>
<p>
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire...
</p>
<p>
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the Death Star...
</p>
</div>
</div>

Step 2: Add the CSS

Add this CSS to your WordPress Customizer > Additional CSS or inside your theme’s stylesheet (style.css):

body {
background: black;
overflow: hidden;
}

.star-wars-container {
position: relative;
width: 100%;
height: 100vh;
perspective: 500px;
overflow: hidden;
}

.crawl {
position: absolute;
width: 50%;
left: 50%;
bottom: -100%;
transform: translateX(-50%) rotateX(20deg);
font-size: 20px;
text-align: justify;
color: yellow;
font-weight: bold;
animation: crawl-animation 40s linear infinite;
}

.crawl p {
margin-bottom: 20px;
}

.title {
text-align: center;
font-size: 30px;
}

.subtitle {
text-align: center;
font-size: 25px;
}

@keyframes crawl-animation {
0% { bottom: -100%; }
100% { bottom: 100%; }
}

Step 3: Save and View

Save the page and preview it. You should see the classic Star Wars text scroll effect.


Method 2: Using a WordPress Plugin

If you prefer a plugin-based approach:

  1. Install a Custom CSS/JS Plugin
    • Install and activate Simple Custom CSS and JS or WP Code Snippets.
    • Add the CSS and JavaScript (see Method 3 below) inside the plugin.
  2. Insert the HTML in the Post/Page
    • Use the Custom HTML Block in Gutenberg and paste the HTML.
  3. Save and View the effect.

Method 3: Using a WordPress Shortcode

If you want reusability, you can create a shortcode.

Step 1: Add This to Your theme’s functions.php File

function star_wars_crawl() {
ob_start(); ?>
<div class="star-wars-container">
<div class="crawl">
<p class="title">Episode V</p>
<p class="subtitle">The Empire Strikes Back</p>
<p>
It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base...
</p>
</div>
</div>
<style>
body
{
background: black;
overflow: hidden;
}
.star-wars-container {
position: relative;
width: 100%;
height: 100vh;
perspective: 500px;
overflow: hidden;
}
.crawl {
position: absolute;
width: 50%;
left: 50%;
bottom: -100%;
transform: translateX(-50%) rotateX(20deg);
font-size: 20px;
text-align: justify;
color: yellow;
font-weight: bold;
animation: crawl-animation 40s linear infinite;
}
.crawl p {
margin-bottom: 20px;
}
.title {
text-align: center;
font-size: 30px;
}
.subtitle {
text-align: center;
font-size: 25px;
}
@keyframes crawl-animation {
0% { bottom: -100%; }
100% { bottom: 100%; }
}
</style>
<?php
return ob_get_clean();
}
add_shortcode('starwars_crawl', 'star_wars_crawl');

Step 2: Use the Shortcode

Now, you can insert the effect anywhere by adding:

[starwars_crawl]

Bonus: Enhancing with JavaScript (Adding Fading Stars)

If you want extra animation effects (such as fading stars in the background), add this JavaScript inside a custom script plugin or inside your theme’s JavaScript file:

document.addEventListener("DOMContentLoaded", function() {
let stars = document.createElement("div");
stars.style.position = "absolute";
stars.style.width = "100%";
stars.style.height = "100vh";
stars.style.overflow = "hidden";
stars.style.pointerEvents = "none";

for (let i = 0; i < 100; i++) {
let star = document.createElement("div");
star.style.position = "absolute";
star.style.width = "2px";
star.style.height = "2px";
star.style.background = "white";
star.style.opacity = Math.random();
star.style.top = Math.random() * 100 + "%";
star.style.left = Math.random() * 100 + "%";
star.style.animation = `twinkle ${Math.random() * 5 + 5}s infinite`;

stars.appendChild(star);
}

document.body.appendChild(stars);
});

Add this CSS animation inside your stylesheet:

@keyframes twinkle {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}

Final Thoughts

  • Best for Simplicity: Use HTML + CSS.
  • Best for Customisation: Use the Shortcode Method.
  • Best for Non-Coders: Use a WordPress Plugin.
  • Extra Effects: Add JavaScript for a starry background.

Let me know if you need any modifications! 🚀

Similar Posts