Web Tasarımında Hover Animasyonu Nasıl Kullanılır
Üzerine gelindiğinde renk
Öğe Rengini Vurgulu Olarak Ayarlamak, ziyaretçilerin dikkatini bir Öğeye odaklamaya yardımcı olur ve anlamı hakkında istenen fikir hakkında bir izlenim ve kavram verir. Hover'da Öğenin Rengini değiştirebilirsiniz. Bunun için bir Öğe seçin ve Özellik Panelinde Animasyon Açık bölümüne gidin, Fareyle üzerine gelin bağlantısını ve ardından Fareyle üzerine gelin onay kutusunu tıklayın. Üzerine gelindiğinde uygulanacak Rengi değiştirin.
Hover'da Kenarlık
Element Border, Elements'ın etkileşimini geliştirmek ve ziyaretçilerin dikkatini çekmek için de önemlidir. Simge, Resim, Şekil, Grup, Izgara vb. Öğeler için Vurgulu Kenarlığı değiştirebilirsiniz. Özellik Panelinin Vurgulu bölümünde, Vurgulu onay kutusunu işaretleyin. Bir Öğenin üzerine gelindiğinde gösterilecek Kenarlığı değiştirin.
Hover Üzerindeki Yarıçap
Görüntüler ve Şekiller, Gruplar ve Izgara Hücreleri için Hover'da Yarıçapı değiştirebilirsiniz. Öğeler bu özellik ile çekici hale gelir, harekete geçer (Şimdi Satın Al, Daha Fazla Oku butonları vb.) ve tasarımınızı benzersiz kılar. Özellik Panelinin Vurgulu bölümünde, Vurgulu Modunu etkinleştirin. Hover On değerini ayarlamak için Yarıçap kaydırıcısını sürükleyin.
Hover Üzerindeki Gölge
Metinler ve diğer Öğeler için Hover'da Gölge özelliğini değiştirebilirsiniz. Hover'da Gölge'yi ayarlamak için bir Öğe ekleyin veya seçin. Ardından, Özellik Panelinin Hover bağlantısını tıklayın, Hover onay kutusunu işaretleyin, Hover'a uygulanacak Gölgeyi değiştirin. Gölge Ön Ayarlarından biriyle başlayabilir ve gerekirse özelleştirebilirsiniz.
Hover'da Şeffaflık
Web sitesi tasarımına etkileşim ve çekicilik eklemek için Hover'da Öğe Şeffaflığını değiştirebilirsiniz. Özellik Panelinde, Hover bağlantısını tıklayın ve Hover onay kutusunu işaretleyin. Hover'da uygulanacak Şeffaflığı ayarlayın. Elemanın seçimini kaldırmak için Blokta bir yere tıklayın. Şeffaflık Değişikliğini test etmek için Öğenin üzerine gelin.
Hover'da Hareket Et
Modern web sitelerinde kullanılan Hover Animasyon Efektleri daha karmaşık hale geldi. Efekt örneklerinden biri, Hover'da Öğe Taşı'dır. Hover'da bir Elementin hareketini ekleyebilirsiniz. Bir Öğe ekleyin veya seçin ve Özellik Paneline gidin. Hover bağlantısını tıklayın ve ardından Hover onay kutusunu işaretleyin. Move X, Y özelliği için değerleri ayarlayın.
Hover'da Döndürme
Hover'daki Döndürme, bir sonraki önemli ve karmaşık etkidir. Bir Elemanı Hover üzerinde döndürmek için bir Eleman ekleyin veya seçin ve Özellik Paneline gidin. Animation On bölümündeki Hover bağlantısına gidin ve tıklayın ve ardından Hover onay kutusunu işaretleyin. Döndürme Açısını ayarlamak için Kaydırıcıyı kullanın veya değeri giriş alanına girin. Döndürme Açısı için desteklenen değerler 0 ile 359 arasındadır.
Hover'da Ölçeklendir
Ölçekleme, imlecinizdeki en doğal tepki gibi görünebilir. Bu nedenle, çok popüler olabilir. Hover Üzerine Ölçek'i web sitenize kolayca ekleyebilirsiniz. Bunun için bir Öğe ekleyin veya seçin ve ardından Özellik Paneline gidin. Animasyon Açık bölümünün Hover bağlantısını tıklayın ve Hover onay kutusunu işaretleyin. Ölçek, Döndür ve Taşı özelliklerine ilerleyin. Gerçek boyut 100'e eşittir.
Gezinme Süresi
Fareyle üzerine gelme animasyonunu Süresini ayarlayarak yönetebilirsiniz. Vurgulu Olarak Animasyon Süresini Ayarlayın Bir Öğe ekleyin veya seçin ve Özellik Paneline gidin. Animasyon Açık bölümünün Hover bağlantısını seçin ve Hover onay kutusunu seçin. Kaydırıcı için desteklenen değerler 10 ile 200 arasındadır ve gerekirse bu alana daha büyük bir sayı girebilirsiniz.
Vurgulu Üzerinde Degradeye Arka Plan Rengi
Arka planı olan bir Şekle Vurgulu Animasyon ekleyerek, düz dolguyu Gradyan gibi çekici bir şeyle değiştirmek isteyebilirsiniz. Bunun için bir Şekil seçin ve Özellik Paneli Vurgulu Bağlantı'ya gidin. Animasyon Açık -> Hover bağlantısını tıklayın ve Hover onay kutusunu işaretleyin. Arka Plan için Gradyan Tipini seçin ve Gradyan'ı ayarlayın.
Vurgulu Görüntüye Arka Plan Görüntüsü
Ayrıca, Görüntüleri Doldur'u değiştirebilir ve hatta gezinirken bir Arka Plan Görüntüsünü diğerine değiştirebilirsiniz, bu da ziyaretçilerinizi çok eğlendirebilir. Bir Şekil seçin ve arka plan için bir resim ekleyin. Özellik Panelinin Animasyon Açık bölümüne gidin ve üzerine tıklayın. Hover efektini etkinleştirin ve Arka Plan Türü olarak Görüntüyü seçin. Vurgulu Görüntüyü seçin. Ölçek.