K a t a n a . j s

Keskin, zarif ve güçlü web animasyonları oluşturun.

Hangi Sürümü Seçmeliyim?

Neden Katana.js?

Hızlı ve Hafif

Yüksek performans için optimize edilmiştir, web sitenizi yavaşlatmaz.

Kullanımı Kolay

Basit ve anlaşılır sözdizimi ile hızlıca animasyon oluşturun.

Geniş Uyumluluk

Modern tarayıcılarla tam uyumludur.

Örnek Kod


// Katana.js ile ilk animasyonunuzu oluşturun
katana.to('.my-element', {
  opacity: 0.5,
  duration: 800,
  delay: 200,
  easing: 'easeInOutQuad'
});

// Art arda animasyonlar için
katana.sequence([
  { el: '.box1', props: { translateX: 250 } },
  { el: '.box2', props: { translateY: -150 } },
  { el: '.box3', props: { scale: 1.2 } }
]);

Animasyonları Keşfet

katana.js, web projelerinize dinamizm katmak için tasarlanmış basit ve güçlü animasyon fonksiyonları sunar.

TEMEL HAREKETLER

moveRight

Elemanı sağa kaydırır.

moveLeft

Elemanı sola kaydırır.

moveUp

Elemanı yukarı taşır.

moveDown

Elemanı aşağı indirir.

moveTo

Elemanı kesin koordinatlara taşır.

KAYDIRMA (SLIDE)

horizontalSlide

Sağa veya sola doğru kayma.

verticalSlide

Yukarı veya aşağı kayma.

SALLAMA VE TİTREŞİM

wiggle

Küçük açılı sağ-sol sallanma.

wobble

Daha geniş açılı dalgalanma.

shake

Sert titreşim efekti.

DÖNME (ROTATE)

rotate

2 boyutlu düzlemde döndürür.

rotateX

X ekseni etrafında döndürür.

rotateY

Y ekseni etrafında döndürür.

rotateAndScale

Döndürmeyi ölçekleme ile birleştirir.

ÖLÇEKLEME (SCALE)

scaleUp

Belirlenen faktör kadar büyütür.

scaleDown

Belirlenen faktör kadar küçültür.

pulse

Nabız efekti vererek dikkat çeker.

GÖRÜNÜRLÜK (OPACITY)

fadeIn

Elemanı yavaşça görünür hale getirir.

fadeOut

Elemanı yavaşça yok eder.

blink

Elemanı yanıp söndürür.

ZIPLAMA VE KOMBO ANİMASYONLAR

jump

Elemanı yukarı zıplatır ve geri indirir.

circleMotion

Eleman daire çizerek hareket eder.

Başlamaya Hazır Mısınız?

Katana.js'i İndir

Sürüm: 1.0.0 | Boyut: 12KB (minified)

Sürümler Sayfasına Geri Dön

Katana.js Swift Edition - Dökümantasyon

Genel Tanıtım

Katana.js Swift Edition, JavaScript ile yazılmış hafif ama güçlü bir animasyon kütüphanesidir. “Swift Edition” ismi, kütüphanenin en hızlı, en performanslı ve en dinamik sürümünü temsil eder. Toplamda 35 adet ön tanımlı animasyon içerir. Bu animasyonların odak noktası hızdır. Yani diğer sürümlerde (örneğin Smooth veya Slow Edition) yumuşaklık ve estetik ön plandayken, Swift Edition tamamen keskin ve hızlı efektler üzerine kuruludur.

Katana.js Swift Edition, requestAnimationFrame API’si üzerine inşa edilmiştir. Bu sayede tarayıcı uyumluluğu yüksektir ve performansı maksimum düzeydedir. Modern web uygulamaları, oyunlar veya dinamik web siteleri için uygundur.

Başlangıç Kullanımı

Katana.js Swift Edition’i kullanmak için üç temel adım vardır.

KatanaSwift.js dosyasını projenize ekleyin. Bu dosya kütüphanenin çekirdeğini içerir.
HTML içinde animasyon uygulamak istediğiniz bir eleman tanımlayın. Örneğin kutu, resim, buton.
JavaScript ile KatanaSwift nesnesinden bir fonksiyon çağırın. Fonksiyonlar doğrudan DOM elementlerini alır ve onlara animasyon uygular.

Ortak Parametreler

Tüm animasyon fonksiyonları benzer parametreler kullanır.

Element: Animasyon uygulanacak hedef DOM elemanı.
Değer: Hedef nokta, hedef açı veya hedef büyüklük.
Süre: Animasyonun kaç milisaniye süreceği. Varsayılan olarak genelde 500 ms’tir.


// Örnek: KatanaSwift.moveRight(kutu, 200, 1000) → kutuyu 1 saniyede 200 piksel sağa taşır.
katana.moveRight(myBox, 200, 1000);

Animasyon Kategorileri

Temel Hareketler

Bu grup, elemanları ekranda sağa, sola, yukarı, aşağı kaydırmaya yarar.

moveRight → elemanı sağa kaydırır.
moveLeft → elemanı sola kaydırır.
moveUp → elemanı yukarı taşır.
moveDown → elemanı aşağı indirir.
moveTo → elemanı kesin koordinatlara taşır.

Kaydırma (Slide)

Kaydırma fonksiyonları, elemanı belli bir yönde hızlıca kaydırır.

horizontalSlide → sağa veya sola doğru kayma.
verticalSlide → yukarı veya aşağı kayma.

Sallama ve Titreşim

Kullanıcı dikkatini çekmek veya hata durumlarını göstermek için kullanılır.

wiggle → küçük açılı sağ-sol sallanma.
wobble → daha geniş açılı dalgalanma.
shake → sert titreşim efekti.

Dönme (Rotate)

Elemanı çeşitli eksenlerde döndürür.

rotate → 2 boyutlu düzlemde döndürür.
rotateX → X ekseni etrafında döndürür.
rotateY → Y ekseni etrafında döndürür.
rotateAndScale → döndürmeyi ölçekleme ile birleştirir.

Ölçekleme (Scale)

Elemanı büyütür, küçültür veya nabız efekti verir.

scaleUp → belirlenen faktör kadar büyütür.
scaleDown → belirlenen faktör kadar küçültür.
pulse → önce büyütüp sonra küçülterek nabız efekti verir.

Görünürlük (Opacity)

Elemanı saydamlaştırarak görünürlük kontrolü sağlar.

fadeIn → elemanı yavaşça görünür hale getirir.
fadeOut → elemanı yavaşça yok eder.
blink → elemanı yanıp söndürür.

Renk ve Stil

Elemanın görsel stilini değiştirir.

colorChange → iki renk arasında geçiş yapar. RGB değerleri kullanılır.
fadeInAndMove → eleman hem hareket eder hem görünür hale gelir.
fadeOutAndMove → eleman hem hareket eder hem kaybolur.

Zıplama ve Kombo Animasyonlar

Bu grup biraz daha karmaşık animasyonları içerir.

jump → elemanı yukarı zıplatır ve geri indirir.
jumpAndRotate → eleman zıplarken döner.
wobbleAndFade → eleman sallanırken görünürlüğü değişir.
comboMoveJump → eleman önce hareket eder sonra zıplar.

Dairesel Hareket

Eleman belirlenen yarıçapta daire çizerek hareket eder.

circleMotion → eleman belirlenen yarıçapta daire çizerek hareket eder.

Kullanım Senaryoları

ÖRNEK 1: Basit bir kutuyu görünür yapmak için fadeIn fonksiyonu kullanılır. Bu fonksiyon kutunun opaklığını 0’dan 1’e yükselterek gözle görünür hale getirir.
ÖRNEK 2: Bir butonun dikkat çekmesi için wiggle fonksiyonu uygulanabilir. Buton hafif sağa sola sallanarak kullanıcının gözünü çeker.
ÖRNEK 3: Bir oyun sahnesinde karakterin zıplama animasyonu için jump fonksiyonu kullanılabilir. Karakter önce yukarı çıkar, sonra tekrar iner.
ÖRNEK 4: Bir form alanına yanlış giriş yapıldığında shake fonksiyonu çağrılarak kutu hızlıca titretilir. Böylece kullanıcı hatayı görür.
ÖRNEK 5: Bir ikonun sürekli dönmesi için rotate fonksiyonu döngüye alınabilir. Böylece sonsuz dönen bir ikon elde edilir.

İpuçları ve İleri Kullanım

Katana.js Swift Edition animasyonları zincirlenebilir. Örneğin setTimeout kullanarak bir animasyon bitince diğeri başlatılabilir.
Animasyon süreleri kısa tutulmalıdır çünkü Swift Edition hız odaklıdır.
Eğer daha yumuşak geçişler isteniyorsa Smooth Edition sürümüne geçiş yapılmalıdır.
Renk değişimlerinde RGB formatı kullanılmalıdır. Örneğin [255,0,0] kırmızı, [0,0,255] mavi.

Sonuç

Katana.js Swift Edition, basit yapısıyla öğrenmesi kolay ama güçlü efektler üretmeye yarayan bir kütüphanedir. Özellikle genç geliştiriciler ve animasyon öğrenmek isteyenler için iyi bir başlangıç noktasıdır. 35 animasyon ile temel hareketlerden kombinasyonlara kadar geniş bir yelpaze sunar. Hızlıdır, performanslıdır ve modern tarayıcıların tamamında sorunsuz çalışır.