I don't know what you think about Star Wars, but for me the movies are some of the best ever created. That's why I'm going to show you how I created my fan remake with web technologies.
If you have no idea what I'm talking about... this is the original opening crawl from 1977:
youtube.com/watch?v=7jK-jZo6xjY
Let's start with a very basic markup to recreate this with web technologies:
<article class="starwars">
<audio preload="auto">
<source src="http://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" type="audio/ogg" />
<source src="http://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg" />
</audio>
<section class="start">
<p>
Start <br> <span>Star Wars opening crawl</span> from 1977
</p>
</section>
<div class="animation">
<section class="intro">
A long time ago, in a galaxy far,<br> far away…
</section>
<section class="logo">
<svg></svg>
</section>
<section class="titles">
<div>
<p>
It is a period of civil war.
</p>
<p>
During the battle, Rebel
</p>
<p>
Pursued by the Empire's
</p>
</div>
</section>
</div>
</article>
The next thing to do is to add some SCSS for the markup. But I'm just going to show the most important parts.
All sections have the same default properties.
section {
position: absolute;
top: 45%;
left: 50%;
z-index: 1;
}
It contains the famous sentence A long time ago, in a galaxy far, far away and is animated like this:
.intro {
opacity: 0;
animation: intro 6s ease-out 1s;
}
@keyframes intro {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
After the intro is hidden, the SVG Star Wars logo kicks in.
commons.wikimedia.org/wiki/File:Star_Wars_Logo.svg
The animation goes like this:
.logo {
opacity: 0;
animation: logo 9s ease-out 9s;
}
@keyframes logo {
0% {
transform(scale(2.15));
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform(scale(.1));
opacity: 0;
}
}
Then I apply an animation to the div child element (which contains the text):
.titles {
top: auto;
bottom: 0;
text-align: justify;
transform-origin: 50% 100%;
transform: perspective(300px) rotateX(25deg);
> div {
position: absolute;
top: 100%;
animation: titles 81s linear 13s;
}
}
@keyframes titles {
0% {
top: 100%;
opacity: 1;
}
95% {
opacity: 1;
}
100% {
top: 20%;
opacity: 0;
}
}
I'm going to use JS (with jQuery) to do some stuff:
Everything you want to know is in the comments.
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = $(args.el);
// Audio to play the opening crawl
this.audio = this.el.find('audio').get(0);
// Start the animation
this.start = this.el.find('.start');
// The animation wrapper
this.animation = this.el.find('.animation');
// Remove animation and shows the start screen
this.reset();
// Start the animation on click
this.start.bind('click', $.proxy(function() {
this.start.hide();
this.audio.play();
// Add the div.animation to the dom
this.el.append(this.animation);
}, this));
// Reset the animation and shows the start screen
$(this.audio).bind('ended', $.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
// Clone the div.animation
this.cloned = this.animation.clone(true);
// Remove it from dom
this.animation.remove();
// Overwrite the this.animation property with the cloned one
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
Just click on Start Star Wars opening crawl from 1977 to watch it. Enjoy!
Check out this Pen!
codepen.io/TimPietrusky/full/eHGfj
codepen.io/TimPietrusky/pen/eHGfj
His amazing article helped me to create this remake of the Star Wars opening crawl.
sitepoint.com/css3-starwars-scrolling-text
They improved my article and pointed out some bugs :D Thanks!
This is just the work of a fan who loves Star Wars. Please don't sue me :D