Typography Experiment with jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Typography Experiment with jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article HTML, Article jQuery, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Typography Experiment with jQuery
link : Typography Experiment with jQuery

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/AkpnhPada 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>

Happy type \m/

Thus articles Typography Experiment with jQuery

that is all articles Typography Experiment with jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Typography Experiment with jQuery with the link address https://autopostingblogspot.blogspot.com/2014/05/typography-experiment-with-jquery.html