Google Web Designer'da animasyonları, animasyon karelerini kullanarak oluşturursunuz. Animasyon kareleri, animasyonun başlangıç ve bitiş noktalarını tanımlar. Her bir animasyon karesinde animasyonlu öğenin özelliklerini siz ayarlarsınız. Animasyon kareleri arasındaki değeri veya geçişi, Web Designer işler.
Örneğin:
- İlk animasyon karesinde, sayfanın sol tarafında kırmızı bir dikdörtgen bulunur.
- İkinci animasyon karesinde (2 saniye sonra), dikdörtgenin rengini mavi ve konum özelliklerini sayfanın sağ tarafında olacak şekilde değiştirirsiniz.
Web Designer, mor tonlarında kademeli renk değişimine sahip, sayfa boyunca hareket eden bir animasyon oluşturur.
CSS, mevcut HTML öğelerinin animasyonunu yapabilir ancak öğe ekleyemez veya kaldıramaz. Bunun yerine, öğenin visibility özelliğini animasyonla değiştirerek öğeleri görünür yapabilir ve gizleyebilirsiniz.
Animasyonlar CSS kullanılarak oluşturulduğundan, duyarlı tasarım araçlarını kullanırken farklı boyutlu görünümler için farklı animasyon sıraları oluşturabilirsiniz.
Animasyon oluşturma modları
İki animasyon modu arasından seçim yapın: Hızlı mod ve Gelişmiş mod. Dilediğiniz zaman modlar arasında geçiş yapabilirsiniz.
Hızlı modTüm sayfanın yeni bir görünümünü ekleyerek ve canlandırmak istediğiniz tüm öğeleri değiştirerek, animasyonunuzu sahne sahne oluşturursunuz. Zaman çizelgesi, her sahnenin küçük resimlerini bir resimli taslak gibi sırayla gösterir. Daha fazla bilgi. |
Gelişmiş modDaha karmaşık animasyonlar için öğeleri tek tek canlandırabilirsiniz. Her öğenin zaman çizelgesinde kendi katmanı vardır ve animasyon karesi işaretçileri, bunların zamanlamasına göre zaman çizelgesi boyunca yerleştirilmiştir. Daha fazla bilgi. |
AMPHTML reklamların sınırlamaları
Yalnızca aşağıdaki CSS özellikleri AMPHTML reklamlarında canlandırılabilir:
transform(öğeleri taşımanıza, döndürmenize, ölçeklendirmenize ve eğmenize izin verir)opaklıkgörünürlük