CSS ile animasyon kullanarak menülerinizi güçlendirin

Sep 11, 2025

Nasıl Yapılır

Dünyayı anlamadığımız animasyon yoluyla: kapılar açık salıncak, arabalar onların hedeflerine sürüş, dudaklar gülüşlere kıvrılıyor. Anında hissetmeyen şeyler bile, yatakta kullanırken yüzünüzde bir telefonun çarpması veya bir telefonu bırakarak, zaman içinde olur. Nesnelerin nasıl ilişkili ve işlevini anlamadığımız bu hareketle; Hafif veya ağır, sert veya gevşek, bağlı veya ayrı, yapışkan veya kayganlarsa.

Bununla birlikte, web'de, göz açıp kapayıncaya kadar görünen ve kaybolan şeylere alıştık. Bir linke tıklıyoruz ve her şey değişir. Gözü kapalı, birkaç kez dönen bir odaya yönlendirilmek ve çevrenin içine girmek için gözlerin kaldırılması gibidir. Hangi kapıyı girdiğini bile bilmiyorsun. Bu, çoğu sitenin nasıl inşa edildiği ve büyüktür. Daha iyisini yapabiliriz.

Potansiyelini öğrenirken CSS animasyonu , Hayallerimizin hemen hemen her şey hakkında hiperdrive ve serpin animasyonlara girmesine izin vermek kolay olabilir. Animasyon harika olsa da, dikkatli olmamız ve her zaman kendimize sormamız gerekiyor: Bu animasyon anlamlı mı? Güzel olmaktan başka bir değer ekliyor mu? Ürünümüzü kullanmayı kolaylaştırıyor mu?

Anlamlı animasyon

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — Bu, öğretici için başlangıç noktası - bir animasyonla ortaya çıkacağımız örnek menü

Bu yazıda ortak bir şekilde çalışmaya devam ediyoruz UI tasarımı Öğe: Bir menü geçiş. CSS ile menüyü (ve onunla birlikte gitmek için bir simge) yaratacağız ve animasyonlarla canlı hale getireceğiz. Animasyonların anlamlı olduğundan emin olacağız, aynı zamanda mümkün olduğunca pürüzsüz olduklarından emin olmak için Web Performans En İyi Uygulamalarını da uygulayacağız.

Yapabilirsin Buradaki son sonucu önizleyin . Kullanıcı menü simgesini tıklattığında, ekranı kapatmak için simgenin arka plan plakasını (bir daire) genişleteceğiz ve menü kaplamasını sunacağız.

Yakın bir simgeye sadece flaş yerine, yakın bir simgeyi temsil etmek için üç dikey çizgiyi (menü simgesini oluşturan) bir 'X' haline getireceğiz ve Morph'a gidiyoruz. Başka bir deyişle, menüde simge morph'ları yakın bir düğmeye dönüştürüldüğü için.

İlgili unsurlar

Düşünüyor olabilirsin, bu anlamlı bir animasyon mu? ' İyi, harika bir soru. Kısa cevap: Evet! Daha Uzun Cevap: Animasyonlar, elemanları ekranda bağlama ve birbirleriyle nasıl ilişkili olduklarını gösteriyor.

Menüden arka plan plakasını menü olmak için ölçeklendirirken, ikisinin nasıl bağlı olduğunu gösteriyoruz - iOS veya Android'de basıldığında, uygulamanın başlatıldığını gösteren ekranın üstesinden gelindiğinde, bir uygulama simgesine benzer. Bu çok simge. Menü simgemiz sadece menüyü değiştirmez: Menüdür, sadece çöktü.

Benzer şekilde, sadece IOS'a bastığınızda açık ve kapama durumu arasında bir açma / kapama işleminin nasıl değiştiğini, sitemizin menüsünün görünür veya gizlenip gizlenip gizlenmemesine bağlı olarak bir menü simgesi ve yakın bir simge arasında değişecektir. Bu, iki simgenin benzer şekillerde işlev gördüğü fikrini uygulamaya yardımcı olur: Her ikisi de menüyü kontrol eder.

Bu yüzden sitemizi kullanmak için eğlenceli hale getirirken, aynı zamanda anlaymayı ve iyileştirmeyi kolaylaştırıyoruz. kullanıcı deneyimi hiç bu kadar hafif.

Bunu, yukarıdaki video eğitiminde nasıl yapılır ve aşağıdaki yazılı adımları izleyin.

01. Başlayın

By drawing the menu icon with CSS (and no images), we can easily animate it later — Menü simgesini CSS (ve resim yok) ile çizerek, daha sonra kolayca canlandırabiliriz.

Proje dosyalarını indirin . Açmak index.html Bir tarayıcıda ve beyaz bir arka plana karşı üç büyük bağlantıyı görmelisiniz. Bu, ortaya çıkacağımız menü kaplaması.

Her şeyden önce saklamamız gerekiyor. İçinde stilleri.css , bu stilleri ekleyin .Menu-Overlay :

 Opaklık: 0;
Görünürlük: Gizli;

Kaplama Gitti ile sol üst köşede bir düğme görünmelidir. Menü simgemizi buraya çizelim, bu yüzden yerleşimi göstermek için tıklayacak bir şey var. Canlandırmayı kolaylaştırmak için, sadece HTML ve CSS kullanarak çizeceğiz; bitmap veya vektör yok. Biz zaten bazı HTML var index.html Menü için: bir konteyner ( .Menü ), arka plan ( .Menu-daire ), bir bağlantı ( .Menu-link ) ve simge ( .Menu-icon ) Her satır için bir açıklıkta.

Ayrı olmak div Arka plan için biraz geleneksel olmayan bir yaklaşımdır. Bu çevreye animasyon eklemek için değilsek, ayrı birine ihtiyaç duymazız. div ; Sadece ekleyebiliriz sınır yarıçapı ve arka plan rengi menü bağlantısı .

Ancak, kullanmak için özgür olmak istiyoruz. dönüştürmek Dairede mülkiyet, bu yüzden simgeyi etkilemeden ölçeklendirebiliriz, bu yüzden arka planı simgesinden ayırmamız gerekiyor.

Simgeyi oluşturan satırları çizmeye başlayalım. Hepsinde ortak olan ne var? Onlar eşit derecede geniş, yuvarlatılmış köşeleri var, kesinlikle konumlandırılmış ve arka plan rengi var. Tüm çizgiler paylaştığı için menü satırı Sınıf, bu paylaşılan özellikleri ayarlamak için kullanalım:

 .Menu-line {
 Arka plan rengi: # 333;
 Yükseklik: 2px;
 Genişlik:% 100;
 Sınır-yarıçap: 2px;
 Konum: Mutlak;
 Sol: 0;
}

Sonra dikey konumu ayarlamak için satırların benzersiz sınıflarını kullanabiliriz:

 .Menu-line-1 {Üst: 0; }

.Menu-line-2 {
 Üst: 0;
 Alt: 0;
 Marj: Otomatik;
}

.Menu-line-3 {alt: 0; }

02. Hover efekti ekleyin

To make the menu appear clickable, we inflate the background plate on hover — Menünün tıklanabilir görünmesini sağlamak için, arka plan plakasını vurgulu olarak şişiriz.

İkonunu bir vurgulu etkisi ekleyerek açıkça tıklayabilir. İçinde stilleri.css , yeni bir seçici oluştur menü-daire Menü üzerine geldiğinizde ölçeklendirmek için:

 .Menu: Hover .Menu-daire {Dönüştür: Ölçek (1.4); }

Şimdi ilk animasyonumuzu ekleyebiliriz. Ekle "Geçiş: tümü 0,2'ler kolaylıkla" için .Menu-Circle {} (Hover eyaletine değil). Tarayıcıya, değişebilecek tüm özellikleri canlandırmasını söylüyoruz. .Menu-daire . Böylece, vurgulu olarak ölçeklendirirken, zamanlama fonksiyonu ile 0,2 saniyelik kursu yeni durumuna geçer. kolaylık .

Hangi zamanlama işlevini seçeceğinizi nasıl bilebilirsiniz? Her şeyden önce, doğrusal bir zamanlama işlevi kullanmaktan kaçının. Gerçek dünyadaki birkaç şey mükemmel bir şekilde sabit bir hızda hareket eder, bu nedenle doğrusal bir zamanlama fonksiyonu ile animasyonlu nesneler doğal ve sert görünme eğilimindedir (Einstein, "Tanrı, doğrusal bir zamanlama işlevi ile zar oynamaz").

Kural olarak, kolaylaştırmak yeni nesneler sunmak için harika çalışır ve kolaylık Nesneleri çıkarmak için harika çalışır. Ve ne zaman şüpheli, kolaylık Varsayılan olarak sağlam bir zamanlama işlevidir: Yavaş bir başlangıç ve yavaş bir sonu vardır ve yumuşak ve akıcı bir animasyon oluşturur.

03. menüyü göster ve gizle

Yeni oluşturulan yerleşimizi göstermek ve gizlemek için jquery kullanalım. İçinde script.js , sınıfını değiştirmek açık açık .Menu-Overlay mevcut tıklama işleyicisinin içinde:


    $ (". Menü-Overlay"). ToggLeClass ("açık");

Ardından bir açık sınıfı olduğunda kaplamayı gösterin:

 .Menu-overlay.open {
 Opaklık: 1;
 Görünürlük: Görünür;
}

04. Menü simgesini bağlayın

Daha önce eklediğimiz geçiş, kaplamayı gösterip gizledikçe, zaten düzgün bir solma etkisine sahip olduğumuz anlamına gelir. Ancak, menü simgesi arka plan menü kaplaması olur gibi görünebilir ve ikisini görsel olarak bağlayabiliriz.

Bu etkinin elde edilmesi göründüğünden daha kolaydır: Yapmamız gereken tek şey, tıklandığında menü dairesini hızlı bir şekilde büyütmek. Yerleşim, aynı anda solacak, menü simgesinin kaplamaya dönüştüğü yanılsamayı yaratacaktır.

Menü tıkladığında menüdeki daireyi stillendirebilmemiz gerekir. Açmak script.js ve mevcut Tıklama işlevimizin içinde sınıfı açık olarak açın .Menü :

$ (". Menü"). ToggLeClass ("açık");

Şimdi bu sınıfı CSS ile hedefleyebilir ve menü açıldığında daireyi genişletebiliriz. Altında style.csss , Genişletin .Menu-daire ne zaman .Menü ayrıca bir sınıfı var .açık :

 .Menu.Open .Menu-Circle {Dönüştür: Ölçek (60);
}

05. Simgeyi dönüştürün

The white circle expands to become the menu background, and the icon morphs into an 'X' — Beyaz daire menü arka planı olmak için genişler ve simge morph'ları 'x' içine

Bizim menümüz için güzel bir açıklık var, ama menü simgesini yakın bir simgeye nasıl dönüştürürüz? Nasıl bildiğiniz bir zamanlar şaşırtıcı derecede kolaydır - sadece üç CSS özelliğini ayarlamamız gerekir. Öncelikle, menü gösterildiğinde orta çizgiyi gizlememiz gerekir:

 .Menu.Open .Menu-line-2 {Opaklık: 0; }

Sonra tek yapmamız gereken diğer iki satırı ters yönde 45 derece çevirmektir (çizgilerin 'x' oluşturmak için farklı yönergeleri işaret etmesi gerekir, bu nedenle çizgilerin ne kadarının 45 derecelik bir döndürme olduğunu unutmayın):

 .Menu.Open .Menu-line-1 {
 dönüşüm: döndürme (-45deg);
}

.Menu.Open .Menu-line-3 {
 dönüşüm: döndürme (45deg);
}

İyi sıralama. Ayrıca bu iki satırı dikey olarak merkezlememiz gerekir. Bu noktada, kolay bir şekilde düşünebilirsiniz! Sadece değiştirmemiz gerekiyor üst ve alt onları merkezlemek için pozisyon '. Ve haklı olursun - eğer bu simgeyi canlandırmıyorsak.

Çünkü kendimizi canlandırmaya sınırlayarak sadece donanım hızlandırılmış animasyonları elde edebiliriz. dönüştürmek ve opaklık Özellikler, çizgileri dönüşümlerle merkezlemek için başvurmak zorunda kalacağız.

 .Menu.Open .Menu-line-1 {
 Dönüştür: Translatey (7px) Translatul (-50%) Döndür (-45deg);
}

.Menu.Open .Menu-line-3 {
 Dönüştür: Translatey (-7px) Translatul (% 50) Döndür (45deg);
}

Bu dönüşümler iki satırı hareket ettirir, böylece simge kabın içinde dikey olarak ortalanırlar ve daha sonra haç oluşturmak için onları döndürürler.

Hadi kıralım. Eşzamanlı olarak iki çevirimiz var: Translatey (7px) ve Translatey (-50%) . İlk dönüşüm, Translatey (7px) , çizginin üst kenarını tuvalin dikey merkezine taşımak için kullanılır. Buradaki matematik basittir: 14, ikonumuzun yüksekliği, iki kişiden ayrılarak orta noktayı alırız: 7.

İkinci dönüşüm, Translatey (-50%) , çizgiyi hareket ettirmek için kullanılır, böylece satırın dikey orta, üst kenarı değil, tuvalin dikey orta noktasında bulunur.

Genellikle kullanırken % Bir öğenin ebeveynine başvurduğunuz CSS (ayar) Genişlik: 100% elemanın genişliğini ebeveynin içinden eşleştirir), ancak ebeveyni değil elemanın kendisine atıfta bulunduğunuz mülkle yüzdeleri kullanırsanız, ebeveyni değil. Yani, bir satırın boyunu bulmamız ve bunun yarısı kadar yukarı doğru hareket ettirmemiz için, tek ihtiyacımız olan tek şey Translatey (-50%) .

06. Simgeler arasında morph

Sadece menü simgesini kapanma simgesiyle değiştirmek yerine, iki durum arasında morph yapalım.

Bir geçiş ekleyerek başlayın .Menu-line içinde style.csss :

 Geçiş: Tüm 0.25'lerin kolaylığı;

Ta-da! Bir morphing menü simgesi. Animasyon olsa biraz sıkıcı. Bunu düzeltelim. Çizgilerin daha canlı görünmesini sağlamak için, bunları her iki 90 derece de döndürebiliriz. Simge sonunda aynı görünecek, ancak çizgiler aynı süre boyunca daha fazla seyahat edecektir. Dönüşleri değiştirmek Döndür (-135DEG) ve Döndür (135deg) .

Bir kural olarak, animasyonunuza daha iyi uyarlanmış özel bir Bézier eğrisi kullanarak her zaman bir animasyonu geliştirebilirsiniz. Şu anda kullanıyoruz kolaylık - Bu, animasyonun ortada daha hızlı bir tempoya sahip, yavaş bir başlangıç ve bitmediği anlamına gelir.

Bence daha bahar benzeri bir etkisi simgemiz için uygun olduğunu düşünüyorum. Hızlı bir şekilde döndürelim, sonuna kadar küçük bir sıçrama etkisi ile. İçin .Menu-line , değiştir " kolaylıkla " Özel bir Bézier eğrisi ile:

 Geçiş: Tüm 0.25S Kübik-Bezier (0.175, 0.885, 0.32, 1.275);

Bütün bu sayılar neler? Endişelenme: Bézier eğrileri nadiren elle yazılmıştır. Kullan kübik-bezier () Zaman içinde bir animasyonun hızını tanımlamak için, kendi başınıza yazmak yerine, referans sitesi kullanmanızı öneririm. Bu, Easings.net'ten geliyor. Animasyonun sonunda geriler ve ince bir sıçrama etkisi yaratır.

Biz bize giderken kolaylıklar.net ve için kodu alın Easeoutexpo . Arka plan animasyonu için daha rafine bir etki yaratmak için bunu kullanacağız. Geçişini güncelle .Menu-daire Bu özel Bézier eğrisini kullanmak ve animasyonu biraz daha uzun yap (0,5s):

 Geçiş: tümü 0.5S kübik-bezier (0.19, 1, 0.22, 1);

Tebrikler, anlamlı olan bir dizi animasyon yarattınız: gezinirken sitede neler olduğunu anlamanıza yardımcı olurlar, mekansal bir farkındalık duygusu yaratırlar. Bunun üzerine, animasyonlar sorunsuz çalışıyor.

Sadece dönüşüm ve opaklık özelliklerini canlandırarak, tarayıcının donanım hızlandırma desteğinin tekme girebildiğinden ve gereksiz gecikmeyi önleyebildiğinden emin olabiliriz. Animasyonlarla oynarken, bu iki kutuyu işaretlediğinizden emin olun: onları anlamlı ve güzel yapın.

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 281. Net'e abone olun .

İlgili Makaleler:

10 CSS3 animasyonunun etkileyici örnekleri
28 SPS ÖZEL ÖRNEKLERİ
Web erişilebilirliği ile başlayın

CSS ile animasyon kullanarak menülerinizi güçlendirin

Anlamlı animasyon

İlgili unsurlar

01. Başlayın

02. Hover efekti ekleyin

03. menüyü göster ve gizle

04. Menü simgesini bağlayın

05. Simgeyi dönüştürün

06. Simgeler arasında morph

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

En iyi iPad kısayolları ve ipados 2020 için jestlerin 44'ü

Photoshop'ta bir meme nasıl yapılır

Chiaroscuro Art: Adım Adım Kılavuzu

Daha iyi 3D Dünya Ortamları oluşturmanın 10 yolu

Boyama için Mahlstick nasıl yapılır ve kullanabilirsiniz

Nasıl tüyler çizilir

CSS özel özelliklerine bir giriş

3DS Max'teki büyük ölçekli ortamlar

Kategoriler