Kamis, 01 Mei 2014

Typography Experiment with jQuery

Bermain dengan Typography memang menyenangkan, bagi yang suka! Teknik typo alias berkreasi dengan kata-kata bagi kalangan blogazine sering dipertontonkan dalam sesi membuat sebuah postingan. Sering kita lihat juga menghias kata di dalam fitur blockquote. AA Koben nemuin satu percobaan tentang type "type experiment" by mattjqueen. Trik type yg terintegrasi dengan jQuery script ini bisa membuat susunan kata-kata (kalimat) menjadi besar kecil.
Demo: cdpn.io/Akpnh
Pada halaman demo, ukuran font cukup besar agar terlihat trick typo secara tegas :D Seperi biasa orang baik hanya melakukan perubahan sedikit disana-sini agar lebih unyu-unyu :"> Jika sobat mau mengedit, adapun 2 hal dasar yg mesti diperhatikan terlebih dahulu adalah:
  1. Pemakaian jenis huruf.
  2. Font-size alias ukuran huruf.
Kedua faktor tersebut sangat menentukan kala kalian menentukan nominal pada property margin! Ingat akan hal itu yah :)
.panel-kal {
width: 500px;
margin: 0 auto;
font-family: 'IM Fell English',Times New Roman,Verdana;
}
.sabda {
float: left;
margin-left: 1em;
position: relative;
}
.lg {
float: left;
font-size: 1.5em;
position: relative;
margin: .5em .1em 0 .1em;
}
.lg2 {
float: left;
font-size: 1em;
position: relative;
margin: .5em .1em 0 .1em;
text-transform: uppercase;
}
.sm1 {
float: left;
font-size: .7em;
position: relative;
margin: 1.2em .1em 0;
text-transform: uppercase;
}
.sm2 {
float: left;
font-size: .7em;
position: relative;
text-transform: uppercase;
margin: 2.2em .1em 0 -.76em;
}
Planning HTML<div class="panel-kal">
<div class="typePanel">

----------- BLAH-BLEH-BLOH -----------

</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var evenFilter = ['lg','sm1','sm2'];
var oddFilter = ['lg','sm1','sm2','lg','lg'];
var words = $('.typePanel').text().split(' ');

function isEven(e){return 0==e%2?!0:!1}for($(".typePanel").html(""),i=0;i<words.length;i++){var $word=$('<div class="sabda"></div>'),wordLetters=words[i].split("");for(j=0;j<wordLetters.length;j++)wordLetters.length>3&&isEven(wordLetters.length)?$word.append('<div class="'+evenFilter[j%evenFilter.length]+'">'+wordLetters[j]+"</div>"):wordLetters.length>3?$word.append('<div class="'+oddFilter[j%oddFilter.length]+'">'+wordLetters[j]+"</div>"):$word.append('<div class="lg2">'+wordLetters[j]+"</div>");$(".typePanel").append($word)}
});
//]]>
</script>
type-experimentHappy type \m/

Tidak ada komentar:

Posting Komentar