Membuat Animasi Huruf Terbuka

Membuat Animasi Huruf Terbuka

  CSS3   8:44 PM


Bingung mau kasih judul apa artikel ini, intinya pada tutorial kali ini saya akan share caranya membuat huruf kemudian jika huruf disentuh akan terbuka. Keren dek pokoknya dan ide ini menurut saya sangat kreatif baik dalam tampilan dan untuk bermain dengan huruf.

Membuat Animasi Huruf Terbuka

Dalam tutorial kali ini saya akan membagikan cara membuat efek 3D yang menarik pada huruf seperti pada demo diatas. Mungkin yang baru melihat pertama kalai mengira huruf - huruf tersebut seperti benda hidup yang jika disentuh dapat bergerak. Memang tujuan dari tutorial ini adalah untuk menunjukkan bagaimana kita dapat membawa beberapa kehidupan ke huruf menggunakan transisi dan transformasi CSS pada pseudo-elements  dengan teknik seperti membuka surat dari keempat sisinya.
Perlu diketahui pseudo-element transitions tidak bisa bekerja pada semua browser. Hanya bisa kita lihat menggunakan mozilla dan google chrome saja.

HTML

Element html yang dibutuhkan sangat sederhana. disini kita menggunakan class grid dan data-later huruf yang akan kita gunakan. Berikut struktur htmlnya :
<ul class="grid">
 <li class="ot-letter-left"><span data-letter="C">C</span></li>
 <li class="ot-letter-top"><span data-letter="J">J</span></li>
 <li class="ot-letter-right"><span data-letter="8">8</span></li>
 <li class="ot-letter-bottom"><span data-letter="A">A</span></li>
</ul>

CSS

Akan ada tiga unsur untuk membuat huruf tersebut : bagian bawah gelap yang membuat latar belakang tampak dipotong, bagian pembukaan dan bayangan yang muncul ketika kita membuka huruf. Rentang yang kita styling sekarang, adalah bagian bawah. Kita akan menambahkan properti perspektif span sehingga kita dapat memiliki efek tiga dimensi yang bagus pada elemen palsu. Berikut css yang perlu ditambahkan :
.grid li span {
 display: inline-block;
 font-weight: 900;
 line-height: 1;
 position: relative;
 color: hsla(0, 0%, 0%, 0.6);
 transform-style: preserve-3d;
 perspective: 550px;
 z-index: 1;
}
Untuk membentuk bayangan kita tambahkan css berikut :
.grid li span:before,
.grid li span:after {
 position: absolute;
 content: attr(data-letter);
 line-height: inherit;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2;
 transition: all 0.3s;
}

.grid li span:before {
 text-shadow: none;
 color: hsla(0, 0%, 0%, 0.12);
}

Dengan css tersebut, kita memiliki tiga lapisan: yang pertama adalah lapisan gelap, sedangkan efek :before pseudo element adalah semi-transparan di atasnya, dan lapisan terakhir adalah lapisan yang dibuat berdasar efek :after pseudo element.

Transition

Berikut efek - efek transisi untuk huruf - hurufnya. Silakan anda coba sendiri :
/* Colors */

.ot-letter-left { background: #e74d3c; }
.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c; }
.ot-letter-left span:after { color: #e74d3c; }
.ot-letter-left:hover span:after { color: #ea6253; }

.ot-letter-right { background: #ea6657; }
.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }
.ot-letter-right span:after { color: #ea6657; }
.ot-letter-right:hover span:after { color: #ed7a6e; }

.ot-letter-top { background: #ee7f72; }
.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }
.ot-letter-top span:after { color: #ee7f72; }
.ot-letter-top:hover span:after { color: #f09389; }

.ot-letter-bottom { background: #e95949; }
.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949; }
.ot-letter-bottom span:after { color: #e95949; }
.ot-letter-bottom:hover span:after { color: #eb6e60; }

/* Left */
.ot-letter-left span:before,
.ot-letter-left span:after {
 -webkit-transform-origin: 0 50%;
 -ms-transform-origin: 0 50%;
 transform-origin: 0 50%;
}

.ot-letter-left span:before {
 -webkit-transform: scale(1.08,1) skew(0deg,1deg);
 -ms-transform: scale(1.08,1) skew(0deg,1deg);
 transform: scale(1.08,1) skew(0deg,1deg);
}

.ot-letter-left span:after {
 text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
 -webkit-transform: rotateY(-15deg);
 -ms-transform: rotateY(-15deg);
 transform: rotateY(-15deg);
}

.ot-letter-left:hover span:before {
 -webkit-transform: scale(0.85,1) skew(0deg,20deg);
 -ms-transform: scale(0.85,1) skew(0deg,20deg);
 transform: scale(0.85,1) skew(0deg,20deg);
}

.ot-letter-left:hover span:after {
 -webkit-transform: rotateY(-40deg);
 -ms-transform: rotateY(-40deg);
 transform: rotateY(-40deg);
}

/* Right */
.ot-letter-right span:before,
.ot-letter-right span:after {
 -webkit-transform-origin: 100% 50%;
 -ms-transform-origin: 100% 50%;
 transform-origin: 100% 50%;
}

.ot-letter-right span:before {
 -webkit-transform: scale(0.85,1) skew(0deg,1deg);
 -ms-transform: scale(0.85,1) skew(0deg,1deg);
 transform: scale(0.85,1) skew(0deg,1deg);
}

.ot-letter-right span:after {
 text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4);
 -webkit-transform: rotateY(15deg);
 -ms-transform: rotateY(15deg);
 transform: rotateY(15deg);
}

.ot-letter-right:hover span:before {
 -webkit-transform: scale(0.85,1) skew(0deg,-20deg);
 -ms-transform: scale(0.85,1) skew(0deg,-20deg);
 transform: scale(0.85,1) skew(0deg,-20deg);
}

.ot-letter-right:hover span:after {
 -webkit-transform: rotateY(40deg);
 -ms-transform: rotateY(40deg);
 transform: rotateY(40deg);
}

/* Up */
.ot-letter-top span:before,
.ot-letter-top span:after {
 -webkit-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
}

.ot-letter-top span:before {
 -webkit-transform: scale(1,0.95) skew(-4deg,0deg);
 -ms-transform: scale(1,0.95) skew(-4deg,0deg);
 transform: scale(1,0.95) skew(-4deg,0deg);
}

.ot-letter-top span:after {
 text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
 -webkit-transform: rotateX(-15deg);
 -ms-transform: rotateX(-15deg);
 transform: rotateX(-15deg);
}

.ot-letter-top:hover span:before {
 -webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
 -ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
 transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}

.ot-letter-top:hover span:after {
 -webkit-transform: translateY(-0.035em) rotateX(-40deg);
 -ms-transform: translateY(-0.035em) rotateX(-40deg);
 transform: translateY(-0.035em) rotateX(-40deg);
}

/* Down */
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
 -webkit-transform-origin: 50% 0;
 -ms-transform-origin: 50% 0;
 transform-origin: 50% 0;
}

.ot-letter-bottom span:before {
 -webkit-transform: scale(1,1.05) skew(4deg,0deg);
 -ms-transform: scale(1,1.05) skew(4deg,0deg);
 transform: scale(1,1.05) skew(4deg,0deg);
}

.ot-letter-bottom span:after {
 text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
 -webkit-transform: rotateX(15deg);
 -ms-transform: rotateX(15deg);
 transform: rotateX(15deg);
}

.ot-letter-bottom:hover span:before {
 -webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
 -ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
 transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}

.ot-letter-bottom:hover span:after {
 -webkit-transform: translateY(0.045em) rotateX(40deg);
 -ms-transform: translateY(0.045em) rotateX(40deg);
 transform: translateY(0.045em) rotateX(40deg);
}

Agar semua element bekerja tambahkan script berikut :
<script src="http://racana.undip.ac.id/demo/animasi/js/modernizr.custom.js"></script>

Sekian share tutorial kali ini. Selamat mencoba dan selamat berkreasi :)

Share this:

Related Posts:
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Show Parser Box
Disqus CommentsLoadHide