TextFlip
Kullanışlı ve kolay bir metin animasyonu

Textflip özellikle başlıklarda kullanabileceğiniz, CSS3 ve JavaScript yardımı ile oluşturulmuş basit bir jQuery Plugin'idir.

Textflip'i istediğiniz taşıyıcı HTML elementine uygulayabilirsiniz. Elementin içeriğindeki metni isteğiniz doğrultusunda anime edecektir.

Kullanım

Öncelikle sayfanızın head bölümüne gerekli JavaScript ve CSS dosyalarını eklemelisiniz. Elbette TextFlip çalışmak için jQuery'ye de ihtiyaç duyuyor.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="textflip.min.js"></script>
<link href="textflip.css" rel="stylesheet" />

Artık TextFlip'i istediğiniz element ya da elementlere uygulayabilirsiniz.

$('#element').textflip();
$('.element').textflip();

Parametreler

TextFlip üç parametre ile kullanılabilir. Bunlar:

• animation: Metne hangi animasyonun uygulanacağını belirler. rotateX, rotateY, rotateZ, opacity, random değerlerini alabilir.
• sequence: Animasyonun uygulanacağı karakter sıralamasını belirler. random ve linear değerlerini alabilir.
• interval: Animasyonun süresini belirler. Milisaniye cinsinden değer alır. Uygun sürenin otomatik belirlenmesi için boş bırakılmalı ya da 0 değeri verilmelidir.

$('.element').textflip({
  animation: 'rotateZ',
  sequence: 'linear',
  interval: 2000
});

Örnek

See the Pen TextFlip by Hakan Ozakar (@hozakar) on CodePen.

Kaynak kodu kurcalamak istiyorum: JSFiddle

Şimdi uğraşamam, indireyim bir ara kullanırım:  GitHub