Sitenize UI animasyonları ekleyin

Sep 11, 2025

Nasıl Yapılır

Çoğu insan, bir mobil uygulamanın içinde mi yoksa bir web sitesinde olsun, kullanıcı arayüzlerini günlük olarak görür, bu yüzden onları oluştururken doğru almak önemlidir (a) Web Sitesi Oluşturucu Bunu sizin için basitleştirecek), ve eğer onları biraz ile büyütebilirseniz CSS animasyonu , çok daha iyi.

CSS animasyonunun yeni sınırını keşfedin

Web için bina, özellikle animasyon söz konusu olduğunda, tarayıcı desteği ve performans gibi şeyleri düşünmeniz gerekir (iyi ağ sağlayıcısı burada yardımcı olacak). Bu eğitimde, UI animasyonları ve geçişler oluşturmak için en iyi çözümlerden ikiye geçeceğiz.

CSS'nin bir kombinasyonunu kullanacağız ve Greensock (GSAP). Hepimiz CSS'nin farkındayız ama bazılarınız GreenSock platformunun farkında olmayabilir. GreenSock, sadece birkaç kod satırı kullanarak HTML elemanları ile kolayca çarpıcı animasyonlar oluşturmanıza olanak sağlayan bir JavaScript çerçevesidir.

Görüntüler ve logolar özellikle son birkaç yılda çok daha fazla göze çarpıyor. Metin yerine emojileri ne sıklıkla kullanıyoruz? Mobil gezinmeler, metnin yerine simgeleri kullanıyor gibi görünüyor ve zamanla kullanıcılar her birinin bizi nerede alacağını biliyorlar. Sadece logoları kullanan bir animasyonlu navigasyon çubuğu oluşturarak başlayacağız. Her birinin üzerine geldiğinizde, bu ekran görüntüsüne benzer görünecek olan son hali canlandıracak. Eklemek için çok fazla medya var mı? Yedeklemek Bulut depolama .

UI animations: icons — Altı navigasyon simgesine sahibiz ve bunlardan biri, animasyon tamamlandıktan sonra vurgulu durumunun nasıl görüneceğini gösterir.

Navigasyonu inşa etmek

Her şeyden önce, yeni bir index.html dosyası oluşturacağız ve navigasyon alanımızı altı bağlantı ile birlikte ayarlayacağız. Her bağlantı, iyonikonlardan alınan bir simgeden oluşacaktır. Her birine sınıf atmamız gerekecek.

 & LT; DIV sınıfı = "Gezinme çubuğu" & gt;
& lt; a href = "#" sınıf = "navlogo ion-ios-star-anahat" & gt; / a & gt;
& lt; a href = "#" sınıf = "navlogo ion-ios listesi-anahat" & gt; / a & gt;
& lt; a href = "#" sınıf = "navlogo ion-ios-chatboxes-anahat" & gt; & lt; / a & gt;
& lt; a href = "#" sınıf = "NAVLOGO ION-IOS-HOME-OUTLINE" & GT; / A & GT;
& lt; a href = "#" sınıf = "navlogo ion-ios-pasta-anahat" & gt; / a & gt;
& lt; a href = "#" sınıf = "NAVLOGO ION-IOS-DİŞLİ OUTLINE" & GT; / A & GT;
& lt; / div & gt;

Tam HTML veya CSS belgesini ayrıntılı olarak kapsamayacağız, ancak GitHub'dan tam kod listesini alın .

Daha sonra, Style.css adlı bir CSS dosyası oluşturmamız ve ardından Ionicons'u almak için aşağıdaki kod satırını eklememiz gerekir:

 @IMPort URL (https://code.ionicframework.com/sionicons/2.0.1/css/ionicons.min.css);

Şimdi sınıfı kuracağız navlogo Stil sayfasının içindeki navigasyon görüntülerimiz için. İşte pozisyon, yükseklik, yazı tipi boyutu vb.

 .navlogo {
  Konum: Göreceli;
  Yazı tipi boyutu: 40px;
  Genişlik: 75px;
  Marj: 40px;
  Yükseklik: 75px;
  Hat yüksekliği: 75px;
  Ekran: satır içi blok;
  Renk: #FFF;
}

.navlogo: Sonra {
  Konum: Mutlak;
  Üst: 0;
  Alt: 0;
  Sol: 0;
  Sağ: 0;
  Sınır: 2px katı # E6E6E6;
  İçerik: '';
  Z-index: -1;
  Sınır yarıçapı:% 50;
}

Sonra, animasyonunu bizim için ayarlamamız gerekiyor. .navlogo eleman. Burada, dönme ve geçiş efektlerini oluşturur ve eleman rengini vurgulayacağız.

 .Navlogo: Daha önce,
.navlogo: Sonra {
  -WebKit-Geçiş: Tüm 0.45'lerin kolaylığı;
  Geçiş: Tüm 0.45'lerin kolaylığı;
}
.navlogo: Hover,
.Navlogo: Aktif,
.navlogo.hover {
  Renk: # C0392B;
}
.navlogo: Hover: Sonra,
.navlogo: Aktif: Sonra,
.navlogo.Hover: Sonra {
  Sınır rengi: şeffaf # C0392B;
  -Webkit-Transform: Döndür (360deg);
  Dönüştür: Döndür (360DEG);
}

Son olarak, fare artık logolarımız üzerinden gelmediğinde, vurgulu sınıfı kaldıran bir olay eklememiz gerekecektir. Bu, logomuzun animasyonundan çıktığından emin olmak içindir. Main.js adlı yeni bir JavaScript dosyası oluşturun ve ardından aşağıdaki kodu girin:

 $ (". Hover"). Mouseleave (
  işlevi () {
    $ (bu) .removeclass ("Hover");
  }
);

Navigasyonumuz şimdi bazı köprüler eklemekten ayrı olarak gitmeye hazır. Bunu sadece CSS3 kullanarak başarmayı başardık.

Yükdeki düğmeleri oluşturun ve anlatın

UI animations: animated buttons — Düğmeler arasında birer birer birer birer birer olarak görünecektir. GreenSock bunu herhangi bir HTML öğesi ile yapmanızı sağlar

Artık sayfamıza dört düğme ekleyeceğiz ve her bir düğmeyi yavaşça getirmek için GreenSock kütüphanesini bir saniye gecikmeli olarak yavaşça getirmek için kullanın. Bu güzel bir geçiş etkisi yaratacaktır.

İlk olarak, index.html dosyasını yeniden açmamız ve aşağıdaki kodu kullanarak düğmemiz bölümümüzü oluşturmamız gerekecektir:

 & lt; div id = "BICKAREA" & GT;
& lt; button class = "anibutton" & gt; arka plan rengini değiştirin ve GT;
& lt; düğme sınıfı = "anibutton" & gt; seçenek 1

Daha sonra GreenSock kütüphanesine bir referans oluşturmamız gerekiyor. Head & gt; Bölüm.

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt;

Son olarak, animasyonumuzu ayarlamamız gerekiyor. Bu sadece bir kod satırını alacaktır. Staggerfrom elemanımızın başlangıç zamanını şaşırtacak bir fonksiyondur. Parantezimizde, elemanın adını belirtiriz. Bu durumda olurdu .anibutton . Ayrıca bir süre ayarlamamız gerekiyor ve bu durumda her biri arasında bir saniye olarak ayarlanmıştır. anibutton eleman.

 Tweenmax.Stargedrom ('. Anibutton', 1, {Opaklık: 0}, 1);

Arka plan ve öğe renk geçişi

UI animations: colour transition — UI, bir renkten diğerine arka plan ve düğme geçişine nasıl bakacağı budur.

Bakacağımız bir sonraki şey, web sitesi arka planını ve düğmelerini bir renkten diğerine geçiyor. Bu özelliğin web sitelerinde sık sık karşılaşmıyoruz, ancak, kullanıcı kendi renk şemasını ayarlamak isteyebileceğinde, erişilebilirlik veya web uygulaması tercihleri için kesinlikle ilginç olmasa da, kesinlikle ilginç olmasa da.

Style.css dosyasındaki sayfanız için bir arka plan renginiz ve bir kenarlık ve metin renginiz olduğundan emin olun.

 .anibutton {
Sınır: 2px katı # 000;
Renk: # 000;
}

Daha sonra, çeşitli GreenSock renk geçişlerimizi ayarlamak için bir JavaScript işlevi yaratacağız.

 İşlev ChangeBackground ()
{
   Tweenmax.to ("Vücut", 3, {BackgroundImage: "Doğrusal gradyan (sola, # 646580, # 212121)"});
   Tweenmax.to (". Anibutton", 3, {Renk: "# fff"});
   Tweenmax.to (". Anibutton", 3, {Sınır: "2px katı #fff"});
}

Biz burada daha fazla karanlık bir mod için gidiyoruz, bu yüzden arka plan karanlık olacak, ancak düğmeler ışık görünecektir. İlk kod satırı, arka plan rengini üç saniyelik bir süre boyunca daha koyu bir varyasyona değiştirecektir. İkinci ve üçüncü satır, metnin rengini ve sınırını üç saniyelik bir süre boyunca beyaz olarak değiştirecektir.

Sonunda, aramamız gerekecek arka planı değiştir() index.html dosyasında bulunan düğmelerimizden birinden işlev görür.

 & lt; button class = "anibutton" onclick = "ChangeBackGround ()" & gt; Arka planı değiştir & lt;

Proje şimdi çalışmaya hazır. Tabii ki, yeni öğeler ekleyerek ve bunlar için renk stilini değiştirerek çok daha fazla gidebilirsiniz.

Bu makale başlangıçta 309'da yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 309 burada satın al veya abone olun .

İlgili Makaleler:

CSS ile başlıkları canlandırın ve anlayın
Süper hızlı CSS için 5 ipucu
CSS Özel Özelliklerine Giriş

Sitenize UI animasyonları ekleyin

Navigasyonu inşa etmek

Yükdeki düğmeleri oluşturun ve anlatın

Arka plan ve öğe renk geçişi

Nasıl Yapılır - En Popüler Makaleler

Maya'da karışım şekli oluşturma nasıl basitleştirilir

Uygulamanızı servis çalışanları ile çevrimdışı yapın

Bir AR uygulaması nasıl oluşturulur

2D illüstrasyonları 3B sanatın içine çevirin

Adobe XD ile bir mobil uygulama prototip nasıl

Suluboya Usta Negatif Boyama

Zbrush'ta bir karikatür kafası nasıl şekillendirilir ve pozlanır

GIF'lerden daha fazla nasıl elde edilir

Kategoriler