پلاگین تایپوگرافی با جی کوئری

به نام خدا

با استفاده از این پلاگین می توانید حالت های متنی زیبایی ایجاد نمایید. ابتدا این پلاگین را دانلود نمایید.

کدهای زیر را میان تگ باز و بسته head قرار دهید:

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Sancreek|Raleway:100' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
<script>
$(document).ready(function() {
$(".cs-text-cut").lettering('words');
});
</script>

و کدهای زیر را میان تگ باز و بسته body قرار دهید:

<div class="container">
 
<header>
  
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
<a href="index6.html">Demo 6</a>
<a href="index7.html">Demo 7</a>
<a href="index8.html">Demo 8</a>
</nav>
 
<div class="support-note"><!-- let's check browser support with modernizr -->
<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
 
</header>
 
<section class="main">
 
<h2 class="cs-text">
<span class="cs-text-cut">Smooth</span>
<span class="cs-text-mid">Operator</span>
<span class="cs-text-cut">Smooth</span>
</h2>
 
</section>
 
</div>

 

همانطور که مشاهده می کنید می توانید با ایجاد تغییرات در کدهای زیر حالت های مختلف را بوجود بیاورید:

<script>
$(document).ready(function() {
$(".cs-text-cut").lettering('words');
});
</script>

 

برای مشاهده دموی این پلاگین اینجا کلیک کنید.

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

Time limit is exhausted. Please reload CAPTCHA.