HTML5 Animasyon
Web siteleri için HTML animasyon hazırlıyoruz. Hareketi video gibi kare kare kaydetmiyor, tarayıcının kendisinin oynattığı kodla hazırlıyoruz. Bu yüzden yazı ve şekillerden oluşan animasyonlar birkaç KB tutuyor, her cihazda keskin görünüyor ve web sitenizi yavaşlatmıyor.
Animasyonlu Web Sitesi için Hizmetlerimiz
Hareketli Tasarım ve Geçişler
Kayma, büyüme, dönme, solma ve yaylanma gibi hareketleri After Effects'te ayarladığımız yumuşatmayla tasarlıyoruz. Başlıklar sırayla geliyor, kartlar yaylanarak yerini alıyor, ziyaretçileriniz de sayfada neye bakacaklarını hareketin sırasından anlıyor.
Yazılar Gerçek Yazı Olarak Kalıyor
HTML animasyondaki başlıklar ve metinler resim değil, sayfanın kendi yazıları. Google bu yazıları okuyor, bir kelimeyi değiştirmek için animasyonu baştan hazırlamamız gerekmiyor, metinleri başka dile çevirmek de kolaylaşıyor.
HTML5 Animasyon ve Hareketli Grafikler
HTML5 animasyon, Flash animasyonların mobil cihazlarda görüntülenememesi sonrası ortaya çıkan bir formattır. Web sitenizde küçük küçük animasyonların olması ziyaretçilerinizin daha çok ilgisini çekerek sayfanızda daha fazla vakit geçirmelerini sağlar.
Mobil Uyumludur
HTML5 animasyonlar telefonda ve tablette de oynuyor, ekranın boyutuna kendini uyduruyor. Böylece web sitenize hangi cihazdan bakılırsa bakılsın animasyonlarınız en uygun boyutta görünüyor.
Aynı animasyon masaüstünde yatay, telefonda dikey yerleşime geçtiği için masaüstü ve mobil için iki ayrı video hazırlatmanız gerekmiyor.
Her Çözünürlükte Keskin Görüntü
Video büyütülünce bulanıklaşırken HTML animasyonu tarayıcı her seferinde yeniden çizdiği için 4K monitörlerde de telefonda da keskin kalıyor.
Etkileşimli Animasyon
Animasyonu ziyaretçilerinizin hareketine bağlayabiliyoruz. Fareyle üstüne gelince açılan kartlar, tıklayınca dönen ürün kutuları, sayfa kaydırıldıkça beliren grafikler gibi etkileşimleri video sunamıyor, bunları HTML animasyonla hazırlıyoruz.
SVG Logo ve İkon Animasyonu
Logonuzu ve ikonlarınızı SVG olarak hareketlendiriyoruz. Logodaki çizgiler sırayla beliriyor, ikonlar bir şekilden ötekine dönüşüyor, logonuz web sitesi açılırken birkaç saniyelik bir girişle ziyaretçilerinizi karşılıyor.
After Effects Animasyonlarını Web Sitesine Aktarma
After Effects'te hazırladığımız animasyonları Lottie biçiminde web sitenize aktarıyoruz. Şekil ve yazı katmanlarından oluşan bir animasyon genelde 50-300 KB tutuyor, video dosyası olmadan keskin oynuyor. Animasyonu WordPress ve Elementor sayfalarınıza da entegre ediyoruz.
Reklam Mecraları için
Google Ads için hazırlayacağımız çalışmaları Google Web Designer ile hazırlamaktayız. Flash reklamlara alternatif olarak geliştirilen bu yazılım ile hareketli, güzel ve amacınıza uygun reklamlarınızı tasarlıyor, anime ediyor, dilerseniz sizin yerinize canlıya alıyoruz.
HTML Animasyon mu, Video mu?
Hazırladığımız MP4 formatında bir tanıtım animasyonu 1 dakika 40 saniye sürüyor ve toplamda 152 MB tutuyor. Aynı animasyonun yazı ve şekillerden oluşan bir sahnesini HTML animasyon olarak hazırladığımızda dosya 5-6 KB tutuyor, sayfanıza yük getirmiyor.
3D render, gerçek video görüntüsü ve bulanıklık, parçacık, ışık patlaması gibi ağır efektler HTML animasyona uygun değil. Bu sahneleri video animasyon olarak hazırlıyor, gerekirse HTML animasyonun içine yerleştiriyoruz. YouTube ve Instagram HTML kabul etmediği için oralara giden animasyonları da video olarak teslim ediyoruz.
HTML Animasyon Hakkında Sıkça Sorulan Sorular
HTML animasyon web sitemi yavaşlatır mı?
Yazı ve şekillerden oluşan HTML animasyonlar birkaç KB tuttuğu için sayfanın açılma süresini değiştirmiyor. Çok katmanlı ağır animasyonlar ise eski telefonlarda takılabiliyor, bu yüzden hareketi sayfanın amacına yetecek ölçüde tutuyoruz.
Mevcut web siteme animasyon eklenebilir mi?
Ekleyebiliyoruz. WordPress ve Elementor sayfalarında başlıklara, kartlara, logoya ve ikonlara animasyonu web sitenizin yapısını değiştirmeden entegre ediyoruz.
Animasyonlu web sitesi Google için sorun olur mu?
Doğru hazırlandığında olmuyor, yazılar gerçek yazı olarak kaldığı için Google onları okuyabiliyor. Metni görselin ya da videonun içine gömerseniz Google o yazıyı okuyamıyor.
Lottie animasyon nedir?
Lottie, After Effects'te hazırlanan animasyonları web sitelerinde ve uygulamalarda oynatmaya yarayan bir dosya biçimi. Dosya videonun yerine hareketin tarifini taşıdığı için birkaç yüz KB tutuyor, tarayıcı da animasyonu her boyutta keskin çiziyor.
HTML ve CSS animasyon kodlarıyla kendim yapabilir miyim?
Bir kutuyu kaydırmak ya da soldurmak için internetteki hazır CSS animasyon kodları yetebiliyor. Bir tanıtımın sahnelerini zamanlamasıyla, sırasıyla ve mobil yerleşimiyle hazırlamak ise tasarım ve animasyon bilgisi istiyor, biz de animasyonu tasarımla birlikte hazırlıyoruz.
HTML animasyon hangi tarayıcılarda çalışıyor?
Chrome, Safari, Edge ve Firefox'un güncel sürümlerinde, telefonda da bilgisayarda da çalışıyor. Teslim etmeden önce animasyonu bu tarayıcılarda ve farklı genişliklerde deniyoruz.
HTML animasyonu web sitemin neresinde kullanabilirim?
Web sitenizin girişindeki büyük görsel alanda, hizmet sayfalarındaki "nasıl çalışır" anlatımlarında, ürün tanıtımlarında ve Google Ads reklamlarında kullanabilirsiniz.
Profesyonel Tasarım
Hizmetine mi İhtiyacınız Var?