Sayfaları CSS ile hareketlendir
CSS ile Animasyon ve Geçişler Eğitimi, arayüzlere akıcı ve performanslı hareket katmayı öğretir. Program transition özellikleri ve zamanlama eğrileri, cubic-bezier ve steps, 2B ve 3B transform, perspektif, @keyframes ile çok adımlı animasyon, animation özelli…
Geçişlerden keyframe'lere, transform'dan performans ve scroll animasyonlarına
CSS ile Animasyon ve Geçişler Eğitimi, arayüzlere akıcı ve amaca hizmet eden hareket katmayı öğretir. Katılımcılar önce transition ile durum değişimlerini yumuşatır, zamanlama ve cubic-bezier eğrilerini uygular. Ardından transform ile 2B ve 3B dönüşümleri, @keyframes ile çok adımlı animasyonları kurar. Program animasyonun hangi özelliklerinin performanslı olduğunu, GPU hızlandırmasını, will-change kullanımını ve kaydırmaya bağlı modern animasyonları kapsar.
3 Gün. Her gün dört modül; her teknik küçük bir bileşen üzerinde uygulanır ve geliştirici araçlarının animasyon paneliyle kare kare incelenir.
Orta Seviye — transition, transform ve keyframe animasyonlarıyla akıcı ve performanslı CSS hareketini öğreten program
Buton, kart ve menü gibi bileşenler sırayla canlandırılır; her animasyonun performansı tarayıcıda ölçülerek iyileştirilir.
Durum değişimlerini yumuşak geçişlerle destekleyerek kullanıcıya daha kaliteli ve anlaşılır bir deneyim sunarsınız.
Yalnızca transform ve opacity gibi ucuz özellikleri canlandırarak takılmayan, 60 fps akan animasyonlar üretirsiniz.
Keyframe'ler, gecikme ve zincirleme ile çok adımlı ve senkronize animasyon sahnelerini JavaScript'siz kurarsınız.
Eğitime başlamadan önce faydalı olacak bilgi ve hazırlık
Seçiciler, kutu modeli ve temel yerleşim bilgisi animasyon konularına odaklanmayı kolaylaştırır.
hover ve focus gibi sözde sınıfları bilmek, geçişlerin hangi durumda tetiklendiğini anlamayı sağlar.
Chrome veya Firefox geliştirici araçlarını açıp öğeleri inceleyebilmek animasyonları gözlemlemek için gereklidir.
Bir metin editörü ve güncel bir tarayıcı ile basit sayfaları açıp kaydedebilmek yeterlidir.
Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.
Program sonunda katılımcılar:
transition özellikleri ve gecikmelerle durum değişimlerini yumuşatarak akıcı hover ve focus etkileri üretirsiniz.
cubic-bezier ve steps ile hareketin hız hissini şekillendirir, doğal ve amaca uygun eğriler seçersiniz.
translate, scale, rotate ve 3B dönüşümlerle öğeleri akışı bozmadan taşır, döndürür ve çevirirsiniz.
@keyframes ile çok adımlı animasyonlar tanımlar, yineleme, yön ve doldurma modunu güvenle denetlersiniz.
Gecikme ve zincirleme ile kademeli giriş ve senkronize animasyon sahnelerini JavaScript olmadan kurarsınız.
transform ve opacity odaklı yaklaşımla reflow'dan kaçınır, 60 fps akan takılmasız animasyonlar üretirsiniz.
scroll-snap, smooth kaydırma ve scroll tabanlı modern tekniklerle kaydırmaya bağlı etkiler tasarlarsınız.
prefers-reduced-motion ve ölçülü hareketle tüm kullanıcılar için güvenli ve rahatsız etmeyen animasyon kurarsınız.
Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.
Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.
Utility-first yaklaşımıyla Tailwind CSS kullanarak responsive, dark mode destekli ve optimize arayüzler kurmayı öğreten uygulamalı eğitim.
Detayları Gör →
HTML, CSS ve JavaScript ile sıfırdan etkileşimli web sayfası geliştirmeyi öğreten, mini proje ile tamamlanan temel seviye web programlama eğitimi.
Detayları Gör →
Python tabanlı web2py ve hazır Bootstrap şablonlarıyla MVC, SQLFORM ve kimlik doğrulamalı web uygulaması geliştirmeyi öğreten uygulamalı eğitim.
Detayları Gör →
Semantik HTML, CSS kutu modeli, Flexbox, Grid ve responsive ile sıfırdan statik web sitesi geliştirmeyi öğreten temel seviye web geliştirme eğitimi.
Detayları Gör →
Semantik HTML, Flexbox, Grid, responsive tasarım, DOM, olaylar ve fetch ile uçtan uca web geliştirme ve ön yüz eğitimi.
Detayları Gör →
Web'in nasıl çalıştığını ve HTML ile sayfa oluşturmayı sıfırdan öğreten temel web geliştirme eğitimi; formlar, tablolar, erişilebilirlik ve yayın.
Detayları Gör →