Star Wars Crawl

index.html

<!-- I did not find the text of the original generic. So here is a translation into my native language. -->
<audio autoplay>
  <source src="https://ia801703.us.archive.org/15/items/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.ogg" type="audio/ogg">
    <source src="https://ia801703.us.archive.org/15/items/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3" type="audio/mp3">
      Your web browser is outdated or don't support OGG and MP3 codecs.
</audio>
<div id="prelude">6 χρόνια πριν σε ένα γαλαξία όχι και τόσο μακρινό...</div>
<div id="intro">
  <canvas id="canvas"></canvas>
  <div id="introContent">
    <h2>STAR WARS<br /><br />Επεισόδιο VI</h2>
    <h2>Τα 6α Γενέθλια του Βασίλη</h2>
    <p>...το έτος 2009, ένα μωρό γεννήθηκε. Από την αρχή, η ενέργεια και η δύναμή του τράβηξαν την προσοχή του συμβουλίου των Τζεντάι που ονόμασαν το παιδί Βασίλη Τουρτούρη. Στα επόμενα 6 χρόνια της ζωής του, ο νέαρός Βασίλης έμαθε να χειρίζεται τη Δύναμη.
    </p>
    <p>Τον τελευταίο καιρό, οι ιππότες Τζεντάι έχουν αισθανθεί μία διαταραχή στη δύναμη που παράγεται από τη σκοτεινή πλευρά. Το συμβούλιο των Τζεντάι κάλεσε το μικρό Μαθητευόμενο Βασίλη για να αναζητήσει μελλοντικούς Τζεντάι. Η παρουσία σας απαιτείται για να ολοκληρώσετε αυτή τη σημαντική εκπαίδευση των Τζεντάι!</p>
    <p>Ελάτε να γιορτάσετε μαζί μας... Τα 6α γενέθλια του Βασίλη</p>
    <p>11 Ιουλίου στις 18:00</p>
    <p>Gazebo Beach Bar</p>
  </div>
</div>

script.js

  var windowHeight = $('#intro').height();
    var windowWidth = $('#intro').width();
    
    $('#canvas').attr({height:windowHeight});
    $('#canvas').attr({width:windowWidth});
    
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    function smallStarCreate(starNumber, starSize) {
        for(var i=0; i<starNumber; i++) {
            ctx.beginPath();
            var starLeft = Math.floor(Math.random()*windowWidth) + 1;
            var starTop = Math.floor(Math.random()*windowHeight) + 1;
            var colorVal01 =  Math.floor(Math.random()*106) + 150;
            var colorVal02 =  Math.floor(Math.random()*106) + 150;
            var opacityVal =  (Math.floor(Math.random()*11)) / 10;
            ctx.fillStyle = "rgba(" + colorVal01 + ", " + colorVal02 + ", " + 255 + ", " + opacityVal + ")";
            ctx.fillRect(starLeft, starTop, starSize, starSize);
            ctx.fill();
        }
    }
    smallStarCreate(200, 1);
    smallStarCreate(50, 2);
    ctx.restore();
    ctx.save();
    
    function bigStarCreate(starNumber, starSize) {
        for(var i=0; i<starNumber; i++) {
            ctx.beginPath();
            var starLeft = Math.floor(Math.random()*windowWidth) + 1;
            var starTop = Math.floor(Math.random()*windowHeight) + 1;
            var colorVal01 =  Math.floor(Math.random()*106) + 150;
            var colorVal02 =  Math.floor(Math.random()*106) + 150;
            var opacityVal =  (Math.floor(Math.random()*11)) / 10;
            var colorVal =  Math.floor(Math.random()*151);
            var radgrad = ctx.createRadialGradient(starLeft,starTop,0,starLeft,starTop,starSize);
            radgrad.addColorStop(0, 'rgba(255, 255, 255, 1)');
            radgrad.addColorStop(1, "rgba(" + colorVal01 + ", " + colorVal02 + ", " + 255 + ", " + opacityVal + ")");
            ctx.fillStyle = radgrad;
            ctx.arc(starLeft, starTop, starSize, 0, Math.PI * 2, true);
            ctx.fill();
        }
    }
    bigStarCreate(10, 1);
    bigStarCreate(5, 2);
    var sky = new Image();
    sky.src = canvas.toDataURL("image/png");
    $('#intro').css("background", "url("+sky.src+")");
    ctx.restore();
    ctx.save();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Star Wars Crawl.markdown

Star Wars Crawl

A CSS3 experiment by a Star Wars fan.

Forked from Karottes's Pen Star Wars Crawl.

A Pen by Captain Anonymous on CodePen.

License.

style.css

@-webkit-keyframes prelude {
  from{opacity: 0;}
  20%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}

@-moz-keyframes prelude {
	from{opacity: 0;}
	20%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}
@-o-keyframes prelude {
	from{opacity: 0;}
	20%{opacity: 1;}
	80%{opacity: 1;}
	to{opacity: 0;}
}

@-webkit-keyframes introContent {
	from{opacity: 1; -webkit-transform: rotateX(80deg) scaleY(0.1) translateY(800px);}
	50%{opacity: 1;}
	60%{opacity: 0;}
	to{-webkit-transform: rotateX(80deg) scaleY(0.1) translateY(-1500px);}
}

@-moz-keyframes introContent {
	from{opacity: 1; -moz-transform: rotateX(80deg) scaleY(0.1) translateY(800px);}
	50%{opacity: 1;}
	60%{opacity: 0;}
	to{-moz-transform: rotateX(80deg) scaleY(0.1) translateY(-1500px);}
}

@-o-keyframes introContent {
	from{opacity: 1; -o-transform: rotateX(80deg) scaleY(0.1) translateY(800px);}
	50%{opacity: 1;}
	60%{opacity: 0;}
	to{-o-transform: rotateX(80deg) scaleY(0.1) translateY(-1500px);}
}

body{
	background: #000;
	color: #fff;
	font-family: 'Archivo Narrow', sans-serif;
}

#canvas{
	position: absolute;
	z-index: 1;
	display: none;
}

#intro{
	position: fixed;
	padding: 10px;
	bottom: 0;
	right: 0;
	top: 0;
	left: 0;
	color: #E7AE05;
	-webkit-perspective: 60;
	-webkit-perspective-origin: center 0;
	-moz-perspective: 60px;
	-moz-perspective-origin: center 0;
	-o-perspective: 60;
	-o-perspective-origin: center 0;
	letter-spacing: 1px;
	text-align: justify;
	text-shadow: 0 0 1px #E7AE05;
}

#introContent{
	opacity: 0;
	font-size: 30px;
	line-height: 35px;
	cursor: default;
	width: 45%;
	margin: 0 auto;
	-webkit-transform: rotateX(80deg) scaleY(0.1);
	-moz-transform: rotateX(80deg) scaleY(0.1);
	-o-transform: rotateX(80deg) scaleY(0.1);
    -webkit-animation-name: introContent;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 80s;
    -webkit-animation-delay: 3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: introContent;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 80s;
    -moz-animation-delay: 3s;
    -moz-animation-iteration-count: 1;
    -o-animation-name: introContent;
    -o-animation-timing-function: linear;
    -o-animation-duration: 80s;
    -o-animation-delay: 3s;
    -o-animation-iteration-count: 1;
}

#skipIntro{
	position: fixed;
	right: 20px;
	top: 20px;
	cursor: pointer;
}

h1, h2, h3, h4{
	text-align: center;
}

audio{
	display: none;
}

#prelude{
	opacity: 0;
	color: #1B7DEB;
	text-align: center;
	margin-top: 20%;
	text-shadow: 0 0 1px #1B7DEB;
	font-size: 20px;
    -webkit-animation-name: prelude;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: prelude;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 7s;
    -moz-animation-iteration-count: 1;
    -o-animation-name: prelude;
    -o-animation-timing-function: linear;
    -o-animation-duration: 7s;
    -o-animation-iteration-count: 1;
}