Slick UI animasyonları oluşturun

Daha fazla ve sık sık, tasarımcılar ve geliştiriciler, hareket tasarımının içeriğinde önemini kabul ediyorlar. kullanıcı deneyimi . Web'deki animasyon artık kullanıcıyı memnun etmenin ve vayacak bir yolu değil, deneyimleri kolay, eğlenceli ve unutulmaz kılan işlevsel bir araçtır. Ve bir dizi farklı araç ve yaklaşım var, CSS animasyonu Bootstrap veya HTML kullanarak tekniklere.

Kullanıcı arayüzleri bağlamında animasyon hala çok yeni bir alandır. Orada, en iyi uygulamayı öğreten veya takip edebileceğimiz UI animasyon kalıplarını öğreten birçok kaynak yok. Çoğu zaman, deneme ile ilgilidir, Kullanıcı testi ve belki biraz deneme ve hata.

• 15 Duyarlı Web Tasarım Öğreticileri

Öyleyse bu eğitimde, kafa karıştırmayan bir şey yaratacağız, ortak kalıpları takip eden ve şık. Bu, şirket web sitelerinde sık sık gördüğünüz ekip profili bölümü olacaktır. Fikir, her biri gezindiğinde takım / personel üyesi hakkında biraz daha fazla bilgi göstermektir. Öğretici boyunca kodepen kullanacağız, ancak elbette kendi favori editörünüzü ve geliştirme ortamınızı kullanabilirsiniz. Unutmayın, daha karmaşık bir site oluşturmak sizinizi değiştirebilir ağ sağlayıcısı İhtiyaç duyurunuz, sizin için çalışan bir hizmetiniz olduğundan emin olun.

Bir site yapmak için basit bir araç ister misiniz? Parlak kullanın Web Sitesi Oluşturucu .

01. Kurulum

Kodepen açarak ve yeni bir kalem oluşturarak başlayın. Bootstrap 4 ve SASS (.SCSS) kullanacağız, bu yüzden ayarlar dahilinde Bootstrap CSS ve JS eklediğinizden emin olun, kaynak bağlantılarınız olarak CSS'yi ayarlar. Eklemeniz gereken başka bir kaynak bağlantısı, sosyal simgelerimiz için kullanacağımız font harika.

02. Kaplar, Satırlar ve Sütunlar Oluşturun

Konteynerler, Bootstrap'ın temel düzeni öğesi olarak kullandığı ve varsayılan ızgara sistemini kullanırken gereklidir. Kaplarda, üst üste eklemeniz gerekir. Satırlar sütunlar için sarmalayıcılardır ve mümkün olan bir 12'den istediğiniz sütun sayısını ve kesme noktasının ne olacağını belirleyebilirsiniz. Bizim durumumuzda, orta ölçekli bir kesme noktasına sahip bir unsur istiyoruz ve üç sütunu genişlikte dolduruyoruz.

 & lt; div class = "konteyner" & gt;
 & lt; div sınıf = "satır" & gt;
 & lt; div sınıf = "col-md-3" & gt;
 & lt;! - Resim bağlantısı ekle ve buraya renk ekleyin
 & lt; / div & gt;
 & lt; / div & gt;
& lt; / div & gt; 

03. Profil görüntüsü ve rengi ayarlayın

Başlayacağımız birinci profilli UI elemanı, kadın takım üyesi için olacak ve mavi ekibin bir parçası olacak. Renk, mavi adı verilen bir sınıf kullanılarak belirtilecektir ve gerçek renk sonunda daha sonraki bir adımda yapacağımız SASS değişkenleri kullanılarak tanımlanacaktır. Sonra bir fotoğrafa eklememiz ve fotoğraf denilen bir sınıf vermemiz gerekecek.

 & lt; div class = "Takım Blue" & gt;
    & lt; div sınıf = "fotoğraf" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div & gt;
& lt; / div & gt; 

04. Profil Adı ve Başlık ekleyin

Eklenecek son HTML biti, son adımda eklediğimiz son div etiketinin altına eklenecek isim, başlık ve sosyal simgeler için olacak. Sosyal simgeler için, Font Awesome'u kullanacağız ve bunlar sırasız bir listeye yerleştirilecektir.

 & lt; div class = "profil-txt" & gt;
      & lt; h1 sınıfı = "başlık" & gt; libby & lt; / h1 & gt;
      & lt; span sınıfı = "pozisyon" & gt; web tasarımcısı & lt; / span & gt;
   & lt; / div & gt;
          & lt; ul sınıfı = "sosyal-simgeler" & gt;
       & l li ve gt; a href = "" sınıf = "FA FA-Facebook" & GT; / A & GT; & lt; / li & gt;
       & l li & gt; a href = "" Class = "FA FA-Twitter" & GT; & LT; / A & GT;
       & l li ve gt; a href = "" sınıf = "FA FA-LinkedIn" & gt; / A & Gt; & lt; / li & gt;
       & l li & gt; a href = "" sınıf = "FA FA-Dribbble" & GT; & lt; / li & gt;
    & lt; / ul & gt;
 & lt; / div & gt;
& lt; / div & gt; 

05. Süs değişkenlerini ayarla

CODEPEN'i kullanarak takip ediyorsanız, daha sonra zaten SASS yüklü ve gitmeye hazır olacaksınız. Sadece Kalem Ayarları simgesine / düğmesine tıklamanız yeterlidir ve CSS ön işlemciniz olarak SCS'leri seçin. O zaman devam edebilir ve tüm renklerimizi saklayacak bazı değişkenler ekleyebiliriz. RGBA, tüm renklerin opaklığının daha anlamlı bir şekilde kontrolünü sağlamak için renk değerleri olarak kullandık.

 $ BlueGradient: RGBA (103, 188, 223, .8);
$ LayGreen: RGBA (188, 219, 183, .5);
$ yeşil: RGBA (119, 180, 109, 0.5);
$ yeşil sınır: RGBA (171, 221, 164, 0.5);
$ Mavi: RGBA (80, 205, 227, 1);
$ Mavi Sınır: RGBA (147, 223, 236, 1); 

06. Bir arka plan resmi yükleyin

İşlerin daha çekici görünmesini sağlamak için vücudun üzerinde güzel bir arka plan görüntüsü yerleştireceğiz. Burada ilk değişken setimizi kullanabilir ve arka plan görüntüsünü, açık yeşilden maviden gelen hoş bir gradyan kaplaması. Ardından arka plan görüntüsünü tamamen duyarlı hale getirmek için, görünüm yüksekliğini 100VH'ye ayarlayacağız.

 vücut {
 Arka plan: Doğrusal gradyan (sağa, $ LightGreen, $ BlueGradient), URL ('https://image.ibb.co/countryside_158827.jpg') Merkezi NO-REPEAT;
 Arka plan boyutu: Kapak;
 Konum: Göreceli;
 Yükseklik: 100vh;
 } 

07. Profil arka planı ve resmi seçin

Her takım profili aynı stillere verilecek ve sınıf ekibi bunun için kullanılacaktır. Arka plan beyaz olacak, tüm içerik merkezlendi ve pozisyonun akraba olarak ayarlandığından emin olmalıyız. Sonra profil görüntüsü için CSS'yi ekleyebiliriz. En iyi sonuçlar için, kullandığınız orijinal görüntünün boyutları 200px kareden daha büyük olmadığından emin olun. Ancak, Bunların yüksekliğini ve genişliğini fotoğraf CSS kuralında değiştireceğiz.

 .Team {
 Dolgu: 30px 0 40px;
 Marj-Top: 60px;
 arka plan: #fff;
 Metin Hizası: Merkez;
 Taşma: Gizli;
 Konum: Göreceli;
 İmleç: İşaretçi;
 Kutu gölgesi: 0 0 25px 1px RGBA (0,0,0,0.3);
 .Fotoğraf {
 Ekran: satır içi blok;
 Genişlik: 130px;
 Yükseklik: 130px;
 Marj-alt: 50px;
 Konum: Göreceli;
 z-index: 1;
 }
 } 

08. Animasyonları ekleyin

Ekleyeceğimiz ilk animasyon parçası profil elemanımızın tepesinde olacak. Fikir, tüm elemanın üzerinde durduğumuzda, mavi dairesel bir şekli canlandıracak. Bunun pozisyonunu belirterek ne kadarını görebileceğimizin bir yüzdesine sahip olmasını kontrol edebiliriz. Öyleyse bu yüzde oynayın ve bunun nasıl çalıştığına dair daha iyi bir fikir edinirsiniz. Asla bilemezsin: daha iyi bir etkiyi bile keşfedebilirsin!

 .Blue .Photo: önce {
 İçerik: "";
 Genişlik:% 100;
 Yükseklik: 0px;
 Sınır yarıçapı:% 50;
 Arka plan: $ mavi;
 Konum: Mutlak;
 Alt:% 130;
 Sağ: 0;
 Sol: 0;
 dönüşüm: ölçek (3);
 Geçiş: tüm .3s lineer 0s;
}
.team: Hover .Photo: önce {
 Yükseklik:% 100;
} 

09. Takım fotoğrafını canlandırın

Takım fotoğrafı bu UI'deki odak noktamızdır ve muhtemelen bazı şekillerde veya formda canlandırmayı bekleyeceğiniz en belirgin unsurdur. Bu adıma ekleyeceğimiz CSS, önce fotoğrafı daha küçük bir daireye çevirir, daha sonra üzerine geldiğinde açık mavi bir sınır olacak ve fotoğrafın kenarlık ile birlikte ölçeklenecektir. Eklenen geçişler ile güzel bir sıvı animasyonu alıyoruz.

 .Blue .pic: Sondan sonra {
 İçerik: "";
 Genişlik:% 100;
 Yükseklik:% 100;
 Sınır yarıçapı:% 50;
 Arka plan: $ mavi;
 Konum: Mutlak;
 Üst: 0;
 Sol: 0;
 z-index: 1;
}
.Team .Photo img {
 Genişlik:% 100;
 Yükseklik: Otomatik;
 Sınır yarıçapı:% 50;
 dönüşüm: ölçek (1);
 Geçiş: Tüm 0.9'ların tümü 0S;
}
.Blue: Hover .Photo img {
 Kutu-Gölge: 0 0 0 14PX $ Mavi Sınır;
 dönüşüm: ölçek (0.6);
 }

10. Profil adını ve pozisyonunu tweak

Profil adı ve konumu biraz toparlanmaya ihtiyaç duyar. Bunlar canlandırılmayacak, ancak isterseniz bunlara kendi animasyonunuzu eklemenizi engellememelidir. Belki de, fotoğrafın yeniden boyutlandırılması nedeniyle yeterli alana sahip olacağınız için onları hafifçe vurgulayın.

 .profile-txt {
 Marj-alt: 30px;
 .Başlık {
 Yazı tipi boyutu: 2rem;
 Yazı Tipi Ağırlığı: 700;
 Renk: # 333;
 Mektup boşluğu: 1.5px;
 Metin dönüşümü: büyük harf;
 Marj-alt: 6px;
 }
 .durum{
 Ekran bloğu;
 Yazı tipi boyutu: 1rem;
 Renk: # 555;
 }
} 

11. Sosyal simgeler ekleyin

Sosyal simgeler önce sayfanın altından -100px'e kadar konumlandırılacaktır. Sonra üst üste geldiğimizde, alt pozisyon sıfıra ayarlanacak ve eklenen bir geçişle, bu bize görüntülemeye geri döndüğü için bize güzel bir şekilde pürüzsüz bir animasyon verecektir. Simgeler kendi Hover durumlarına verilecek, arka planlarını beyaza ve simgesine mavi olarak ayarlayacaktır.

 .Blue .Social-simgeler {
 Genişlik:% 100;
 Liste tarzı: Yok;
 Dolgu: 0;
 Marj: 0;
 Arka plan: $ mavi;
 Konum: Mutlak;
 alt: -100px;
 Sol: 0;
 Geçiş: Tüm 0.6'ların kolaylığı;
 li {
 Ekran: satır içi blok;
 
 a {
 Ekran bloğu;
 Dolgu: 8px;
 Yazı tipi boyutu: 1rem;
 Renk: #FFF;
 Metin Dekorasyonu: Yok;
 Geçiş: Tüm 0.5'lerin kolaylığı;
 & amp;: hover {
 Renk: $ mavi;
 arka plan: #fff;
 }
 }
 }
}
.team: Hover .Social-simgeler {
 Alt: 0px;
} 

12. Yeşil takım üyesini yapın

İşleri biraz karıştırmak için ekibimize daha fazla üye eklemeye başlayabiliriz. Bunun için kullanacağımız renk yeşil olacak. Ancak önce HTML bölümüne / dosyasına geri dönün ve yapmamız gereken tek şey Col-MD-3 sınıfını kopyalamaktır - satır - Sosyal simgeler altındaki son DIV etiketine indirin ve yapıştırın.

 & lt; div class = "Takım Green" & gt;
 & lt; div sınıf = "fotoğraf" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt; 

Mavi sınıfı yeşil olarak değiştirdikten sonra, nihayet bize aynı animasyonu verecek tüm CSS'leri ekleyebiliriz.

 .Green: Hover .Photo img {
 Kutu gölge: 0 0 0 14PX $ yeşil kenarlık;
 dönüşüm: ölçek (0.6);
 }
.Green .Photo: Önce {
 İçerik: "";
 Genişlik:% 100;
 Yükseklik: 0px;
 Sınır yarıçapı:% 50;
 Arka plan: $ yeşil;
 Konum: Mutlak;
 Alt:% 135;
 Sağ: 0;
 Sol: 0;
 dönüşüm: ölçek (3);
 Geçiş: tüm .3s lineer 0s;
}
.Green .Social-simgeler {
 Genişlik:% 100;
 Liste tarzı: Yok;
 Dolgu: 0;
 Marj: 0;
 Arka plan: $ yeşil;
 Konum: Mutlak;
 alt: -100px;
 Sol: 0;
 Geçiş: Tüm 0.6'ların kolaylığı;
 li {
 Ekran: satır içi blok;
 a {
 Ekran bloğu;
 Dolgu: 8px;
 Yazı tipi boyutu: 1rem;
 Renk: #FFF;
 Metin Dekorasyonu: Yok;
 Geçiş: Tüm 0.5'lerin kolaylığı;
 & amp;: hover {
 Renk: $ yeşil;
 arka plan: #fff;
 }
 }
 }
} 

Ve bu yaklaşımın güzelliği, birçok farklı renk sınıfı için gereken şekilde tekrarlayabilmeniz, UI animasyonlarınızı gerektiği gibi esnek bir şekilde temas etmenizi sağlar.

Takımla bir site inşa ediyorsanız, güvenilir olduğunuzdan emin olun, güvenli Bulut depolama işleri yapıştırmak için tutmak için.

Bu makale aslen 307'de yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 307 Satın Alın veya Net'e abone olun .

UI animasyonunun ins ve çıkışları hakkında daha fazla bilgi edinmek ister misiniz?

Sitelerinizi Nasıl Yapabilirsiniz hakkında daha fazla bilgi edinmekle ilgileniyorsanız, Sleek UI Animasyonunu kullanarak POP ve ışıltı, biletinizi aldığınızdan emin olun. Londra'yı oluştur .

Asemblr.com için Yaratıcı Geliştirici olarak çalışan bir ön uç tasarımcı ve geliştirici, Steven Roberts, Talk - CSS animasyonunu sunacaklar: Web, sadece CSS ile canlandırma olanaklarını ve sınırlamalarını keşfederken sunmak zorundadır.

19-21 Eylül 2018 tarihleri ​​arasında Londra'yı oluşturur. Şimdi biletini al .

İlgili Makaleler:

• Mobil Uygulamalarda Animasyon Nasıl Kullanılır?
• Pro'nun UI Tasarımına Kılavuzu
• Arayüz animasyonları tasarlamak için bir acemi rehberi