digtools
✨
view transition,

CSS View Transition Oluşturucu

'View Transition API' animasyonlarını ve CSS(::view-transition-old/new) doğrudan tarayıcınızda simüle edin.

🪄
View Transition API
Otomatik Kod Üretimi
⚙️
Old/New Animations
Tamamen Özelleştirilebilir
⚡
SPA & MPA
HTML/CSS/JS Çıktısı

Bir Ön Ayar Seçin

Önizleme

Oluşturucu Ayarları

0.5s
0s

※ ::view-transition-old (çıkan durum) için Bitiş Noktası (To)

0
1
0%
0%
0°

※ ::view-transition-new (giren durum) için Başlangıç Noktası (From)

0
1
0%
0%
0° 
 
 
 
 
  
 
  
Bunu da beğenebilirsiniz
🎨
Renk Dönüştürücü
🎨
Görüntü Renk Seçici
↔️
CSS Clamp Oluşturucu
 
  
  
 
 about, 
  CSS View Transition Oluşturucuya Genel Bakış 
 
  
Tarayıcınızda görsel olarak kusursuz sayfa geçiş animasyonları oluşturmanızı ve önizlemenizi sağlayan tamamen ücretsiz bir geliştirici aracıdır.
 
Önceden SPA'larda karmaşık JS kütüphaneleri gerektiren bu işlemler artık yerleşik tarayıcı özellikleriyle kolayca yapılabiliyor. Giren ve çıkan elemanlar için animasyonları ince ayarlayın ve kodu kopyalayın.
 
Tüm işlemler tarayıcınızda gerçekleşir. Verileriniz asla harici sunuculara gönderilmez.
  
 
 
 
 
 how to, 
  Geçiş Animasyonları Nasıl Oluşturulur 
 
  
 
 STEP 1 
Bir Hazır Ayar Seçin
 
Üst kısımdan 'Fade' veya 'Slide Left' gibi bir ön ayar seçin veya bir 'view-transition-name' girin.
 
 
 STEP 2 
Animasyonları Önizleyin ve Ayarlayın
 
Gerçek geçişi görmek için 'Oynat / Durumu Değiştir' düğmesine tıklayın. 'Old' ve 'New' sekmelerinde parametreleri ayarlayın.
 
 
 STEP 3 
Kodu Kopyalayın ve Uygulayın
 
Oluşturulan CSS, JavaScript ve HTML kodlarını projenize kopyalayın.
 
 
  
 
 
 
 
 glossary, 
  View Transition Sözlüğü 
 
  
 
 
View Transition API
 
Tarayıcının bir değişiklikten önce ve sonra DOM ekran görüntülerini otomatik olarak alıp aralarında animasyon yaptığı mekanizma.
 
 
 
view-transition-name
 
Canlandırılacak öğeleri belirlemek için CSS özelliği. Aynı isme sahip öğeler birbirine bağlanır.
 
 
 
::view-transition-old / new
 
`old`, geçiş öncesi durumu temsil eden sözde öğedir. `new`, yeni durumu temsil eder.
 
 
 
Cross-document View Transitions
 
MPA sayfaları arasındaki geçişlerin de animasyonlu olmasını sağlayan meta etiket tabanlı uzantıdır.
 
 
  
 
 
 
 
 faq, 
  Sıkça Sorulan Sorular (SSS) 
 
  
 
 
Q.Verilerim bir sunucuya gönderiliyor mu?
 
Hayır, bu araç tamamen tarayıcınızın içinde çalışır. Hiçbir veri veya ayar harici sunuculara gönderilmez.
 
 
Q.Animasyon tüm tarayıcılarda çalışacak mı?
 
Chrome 111+, Edge 111+, Safari 18+ vb. tarafından desteklenir. Desteklenmeyen tarayıcılarda (ör. Firefox) sitenizi bozmadan anında sayfa geçişine geri döner.
 
 
Q.MPA (Çok Sayfalı Uygulamalar) için de kullanabilir miyim?
 
Evet, aynı orijindeki MPA'lar için HTML `<head>` kısmına `<meta name="view-transition" content="same-origin" />` ekleyerek JavaScript yazmadan kullanabilirsiniz.
 
 
Q.view-transition-name için ne kullanmalıyım?
 
Sayfa içinde tamamen benzersiz olan herhangi bir dize belirtin. Aynı isim aynı anda birden fazla elemanda varsa animasyon başarısız olur.
 
 
  
 
 
 
 
 use cases, 
  Kullanım Durumları 
 
  
İşte View Transition API kullanılarak yapılan tipik uygulama örnekleri.
 
 
 🛒 
E-Ticaret Ürün Detayları
 
Küçük resme tıklandığında görüntünün ürün detaylarına kusursuz şekilde genişlemesi.
 
 
 📱 
Yerel Uygulama Benzeri UI Akışları
 
Tarayıcıda yana kayan ekranlar gibi yerel uygulama tarzı animasyonlar. PWA'lar için mükemmel.
 
 
 🌗 
Karanlık Mod Geçişi
 
Ekranın aniden kararması yerine genişleyen bir renk çemberi animasyonu ekleyin.
 
 
 📋 
Liste Sıralama ve Filtreleme
 
Filtreleme yaparken silinen öğeler kaybolur, kalan öğeler yeni konumlarına sorunsuzca kayar.
 
 
  
 
 
 
 
 
 
  İlgili Araçlar 
  CSS OluşturucularTümünü gör   
 
   
 🎨 
 
 
 Renk Dönüştürücü 
 
 HEX/RGB/HSL/CMYK kodlarını dönüştürün ve renk paletleri oluşturun. 
 
 
  
   
 🎨 
 
 
 Görüntü Renk Seçici 
 
 Görüntülerden renkleri çıkarın ve renk kodlarını alın (HEX/RGB) 
 
 
  
   
 ↔️ 
 
 
 CSS Clamp Oluşturucu 
 
 Duyarlı tasarım için akıcı clamp() işlev değerlerini otomatik olarak hesaplar. 
 
 
  
   
 ✂️ 
 
 
 CSS clip-path Oluşturucu 
 
 Sürükle bırak işlemleriyle kolayca CSS clip-path şekilleri oluşturun ve kod üretin. 
 
 
  
   
 📦 
 
 
 CSS Container Query Oluşturucu 
 
 Canlı önizleme ve dönüşüm ile görsel olarak container sorguları oluşturun. 
 
 
  
   
 🖼️ 
 
 
 CSS Filtre ve Karışım Oluşturucu 
 
 Filtreleri görsel olarak birleştirin, kod oluşturun ve görüntüleri kaydedin. 
 
 
  
   
 🎨 
 
 
 CSS Degrade Oluşturucu 
 
 Doğrusal, radyal, konik degradeleri ve desenleri sezgisel olarak oluşturun. 
 
 
  
   
 📐 
 
 
 Flexbox/Grid Düzen Oluşturucu 
 
 Görsel GUI ile düzen kodu oluştur 
 
 
  
   
 ☁️ 
 
 
 Box-Shadow Oluşturucu 
 
 Sezgisel şekilde güzel çok katmanlı gölgeler oluştur 
 
 
  
  
 
 
 
  Tüm Kategoriler 
 
  Web & Geliştirici Araçları  CSS Oluşturucular  Görüntü ve Fotoğraf Araçları  Video ve Ses Araçları  SEO & Pazarlama  Ağ & Altyapı  Metin Analizi ve İşleme  Finans ve Maaş Araçları  Tarih ve Takvim Araçları  Belge ve İş Araçları  Oyunlar ve Etkinlikler  Yaşam ve Sağlık   Ana Sayfa  
 
 
 
  
 
 
  Geri Bildirim Gönder 
 
Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.
 
       
   
 
     
 
 
  
  
 
  
 
 
    
  
   
 
 
 
  Sorumluluk Reddi 
 
 Bu sitede sunulan araçların tamamı ücretsiz kullanılabilir; ancak kendi sorumluluğunuzda kullanınız. Herhangi bir hesaplama sonucu, dönüşüm sonucu veya oluşturulan verinin doğruluğu, eksiksizliği ya da güvenliği konusunda hiçbir garanti vermiyoruz. Bu araçların kullanımından kaynaklanabilecek zarar veya sorunlar için işletmecinin herhangi bir sorumluluk kabul etmediğini lütfen bilin. Araçların çoğu dosyaları ve hesaplamaları tarayıcınızda yerel olarak işler; bu, girdiğiniz verilerin sunucularımıza gönderilmediği veya depolanmadığı anlamına gelir.