Membuat Intro Khas Film Star Wars Dengan CSS3

Sebelumnya ada yang pernah nonton sekuel film Star Wars episode 1-6 ? apa belum nonton sama sekali, waduh sebaiknya kamu nonton dulu deh, masa film yang paling populer tahun 70-an sampai sekarang dan akhir tahun ini akan keluar lagi episode yang ketujuh.

Memebuat Intro Di Film Star Wars Dengan CSS3
Seperti inilah intronya.

Nah, disini saya bukan membahas tentang semua sinopsis filmnya, tapi yang akan saya bahas disini adalah bagaimana cara membuat intro khas di film Star Wars ini. Kalo kamu sudah pernah nonton salah satu atau semua film Star Wars, pasti kamu sering melihat intro khasnya bukan ?.

Dan tutorial ini saya dapat di situs Site Point yang ditulis oleh Craig Buckler, disana dia menulis tutorial membuat intro khas Star Wars dan saya kemudian mencoba di blog dummy yang baru saya buat beberapa saat yang lalu melakukan sedikit perubahan.

Dan yang mengejutkannya disini adalah semuanya ini murni terbuat dari CSS dan HTML5 loh. Dan hanya bisa bekerja pada sebagian browser saja, untuk pengguna browser Opera dan IE, mungkin harus menunggu beberapa waktu lagi untuk bisa mendukung CSS Transformations dan Animations.


Bagaimana unik bukan hasilnya, nah tanpa banyak basa-basi lagi mari kita lihat bagaimana cara membuat intro khas Star Wars ini:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* { padding: 0; margin: 0; }

body, html
{
background: #000 url(http://2.bp.blogspot.com/-JSsA2jUuG6o/VLDGBmRv-SI/AAAAAAAAAKU/Xbe1SL-fImI/s1600/Space-Background.gif) repeat fixed;
 width: 100%;
 height: 100%;
 font-family: "Droid Sans", arial, verdana, sans-serif;
 font-weight: 700;
 color: #ff6;
 overflow: hidden;
}

p#start
{
 position: relative;
 width: 16em;
 font-size: 200%;
 font-weight: 400;
 margin: 20% auto;
 color: #4ee;
 opacity: 0;
 z-index: 1;
 -webkit-animation: intro 2s ease-out;
 -moz-animation: intro 2s ease-out;
 -ms-animation: intro 2s ease-out;
 -o-animation: intro 2s ease-out;
 animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@-moz-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@-ms-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@-o-keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

@keyframes intro {
 0% { opacity: 1; }
 90% { opacity: 1; }
 100% { opacity: 0; }
}

h1
{
 position: absolute;
 width: 2.6em;
 left: 50%;
 top: 25%;
 font-size: 10em;
 text-align: center;
 margin-left: -1.3em;
 line-height: 0.8em;
 letter-spacing: -0.05em;
 color: #000;
 text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
 opacity: 0;
 z-index: 1;
 -webkit-animation: logo 5s ease-out 2.5s;
 -moz-animation: logo 5s ease-out 2.5s;
 -ms-animation: logo 5s ease-out 2.5s;
 -o-animation: logo 5s ease-out 2.5s;
 animation: logo 5s ease-out 2.5s;
}

h1 sub
{
 display: block;
 font-size: 0.3em;
 letter-spacing: 0;
 line-height: 0.8em;
}

@-webkit-keyframes logo {
 0% { -webkit-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
 0% { -moz-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
 0% { -ms-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
 0% { -o-transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
 0% { transform: scale(1); opacity: 1; }
 50% { opacity: 1; }
 100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
 position: absolute;
 width: 18em;
 height: 50em;
 bottom: 0;
 left: 50%;
 margin-left: -9em;
 font-size: 350%;
 text-align: justify;
 overflow: hidden;
 -webkit-transform-origin: 50% 100%;
 -moz-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-transform: perspective(300px) rotateX(25deg);
 -moz-transform: perspective(300px) rotateX(25deg);
 -ms-transform: perspective(300px) rotateX(25deg);
 -o-transform: perspective(300px) rotateX(25deg);
 transform: perspective(300px) rotateX(25deg);
}

#titles:after
{
 position: absolute;
 content: ' ';
 left: 0;
 right: 0;
 top: 0;
 bottom: 60%;
 background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
 background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
 background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
 background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
 background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
 pointer-events: none;
}

#titles p
{
 text-align: justify;
 margin: 0.8em 0;
}

#titles p.center
{
 text-align: center;
}

#titles a
{
 color: #ff6;
 text-decoration: underline;
}

#titlecontent
{
 position: absolute;
 top: 100%;
 -webkit-animation: scroll 100s linear 4s infinite;
 -moz-animation: scroll 100s linear 4s infinite;
 -ms-animation: scroll 100s linear 4s infinite;
 -o-animation: scroll 100s linear 4s infinite;
 animation: scroll 100s linear 4s infinite;
}

/* animation */
@-webkit-keyframes scroll {
 0% { top: 100%; }
 100% { top: -170%; }
}

@-moz-keyframes scroll {
 0% { top: 100%; }
 100% { top: -170%; }
}

@-ms-keyframes scroll {
 0% { top: 100%; }
 100% { top: -170%; }
}

@-o-keyframes scroll {
 0% { top: 100%; }
 100% { top: -170%; }
}

@keyframes scroll {
 0% { top: 100%; }
 100% { top: -170%; }
}

Dan dibawah ini adlah HTML-nya, disini kamu bisa menambahkan tulisan apa saja terserah kamu:

<div id="titles"><div id="titlecontent">

 <p>Kontennya</p>

</div></div>



Bagaimana, setelah melihat hasilnya apakah sekarang kamu ingin menonton seluruh sekuel film Star Wars ?, Filmnya Worth it kok buat kamu tonton.

4 comments

  1. KEren. Tapi kalau dibuka di HP gimana yah, lambat gak yah

    ReplyDelete
    Replies
    1. gak tau juga mas ridha, ini juga baru dapet tutorialnya :D

      nanti dicoba buka lewat HP deh :)

      Delete
    2. Sebenarnya bisa dicoba sih paakai responsinator.com kalau gak salah. Cuman lebih enak dicoba langsung buka pakai hp.

      Delete
    3. kalo responsive sih kayanya nggak deh :(

      Delete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.