jQuery Plugin For Star Wars Intro Crawl Effect - starwarsintro.js

starwarsintro.js is a very small jQuery plugin that lets you create a Star Wars Intro Crawl style 3D text scrolling effect using JavaScript and CSS3 transforms.

See also:

• Create Star Wars Intro Crawl With Pure CSS – starwarsintro.css

How to use it:

1. Markup html structure.

<div class="starwars-page">
  <div class="starwars-intro">
    <h1 class="text-center">VADER</h1>
    <br>
    <p>
      It is a period of insurgence. Rebel spaceships, striking from a hidden base on a moon of Yahin, have won a shocking surprise victory against the rightful reign of the Galactic Empire.
    </p>
    <p>
      The Empire's ultimate peacekeeping force, THE DEATH STAR, was destroyed due to an unforseen design flaw. Without this deterrent, the rule of law is in danger. Chaos looms! 
    </p>
    <p>
      For the nineteen years after the vaniquishing of the Jedi and his painful rebirth on Volcanic Mustafarm Sith Lord DARTH VADER has faithfully served his master. But now, he has failed the Emperor and must pay the price...
    </p>
  </div>
</div>

2. The primary CSS/CSS3 styles.

.starwars-page {
  margin: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  perspective: 500px;
  overflow: hidden;
  text-align: center;
}

.starwars-intro {
  top: 0%;
  margin: auto;
  width: 100%;
  max-width: 400px;
  position: relative;
  font-size: 1.8em;
  color: #e8be1e;
  text-align: justify;
  transform: rotateX(30deg) scale(2);
}

3. Load the latest version of jQuery library and the jQuery starwarsintro.js script at the end of the document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
<script src="starwarsintro.js"></script>

4. Adjust the default parameters.

var size=3;
var posY = 230; 
var ang = 60;
var delta =1;
var scaleDelta = 0.008;
var speed = 50;

---

This awesome jQuery plugin is developed by PolarNotion. For more Advanced Usages, please check the demo page or visit the official website.