CSS3 Animasyonuyla Gelişmiş “Seçim Çerçevesi” Oluşturma
Bugün bir göz atacağız “tente” bir kere daha. Aslında, önceki yazımızda kullanmak hakkında konuştuk. -webkit-kayan yazı mal, ama bu sefer biraz daha ileri götüreceğiz.
Bu yayında, bir tane yaratacağız. kayan yazı benzeri CSS3 Animasyonunu kullanarak Bu yolla, sadece elde edilemeyen daha fazla işlevsellik ekleyebileceğiz. -webkit-kayan yazı.
CSS3 Animasyon modülünü zaten bilmiyorsanız, bu dokümantasyona devam etmeden önce aşağıdaki referanslara göz atmanızı öneririz:
- CSS3 Animasyonları - W3School
- CSS Animasyonları - Mozilla Dev. Ağ
Ayrıca, şu anda, CSS3 Animation'ın yalnızca Firefox 8+, Chrome 12+ ve Safari 5.0+ sürümlerinde önceden eklenmiş sürümle çalışabileceğini unutmayın (-moz- ve -webkit-). Bununla birlikte, bu makaleyi gereksiz kodlarla aşmamak için sadece ön eki olmayan W3C'nin resmi sürümünü kullanacağız..
Seçim Çerçevesi Sorunu
Seçim çerçevesindeki sorunlardan biri, metnin sürekli hareket etmesidir. Bu davranış okumaya zararlıdır ve metnin okunması da zordur. Bu kez, kendi seçim çerçevesi sürümünü oluşturmaya ve kullanıcı dostu hale getirmeye çalışacağız. Örneğin; metni sürekli hareket ettirmek yerine, Tamamen görünür olduğunda onu durduracağız, böylece kullanıcı bir an için metni okuyabilir.
Film şeridi (tür)
Bir logo, illüstrasyon veya web sitesi gibi her yaratıcı ve tasarım oluşturma genellikle eskiz ile başlar. Animasyon üretimi alanında bu, bir storyboard ile yapılır. Herhangi bir kodlamaya başlamadan önce, önce bir storyboard türü, animasyonumuzu görselleştirmemize yardımcı olmak için.
Yukarıdaki film şeridinden görebileceğiniz gibi, her ikisi de sırasıyla sağdan sola doğru hareket edecek iki satırlık metin göstermeyi planlıyoruz..
Film şeridimiz gerçek animasyon filmi için bir film şeridi kadar karmaşık değildir, ancak asıl konu şu: seçim çerçevesinin nasıl görüneceğini görselleştirebiliyoruz.
HTML İşaretlemesi
Animasyonumuz basit olacağından, HTML işaretlemesi de aşağıdaki gibi basit olacaktır:
WordPress Eklentileri Olmadan İlgili Yazılar nasıl eklenir
Dropbox Dosyalarınızı Eylemlerle Otomatikleştirin
Temel Stiller
Animasyonun etrafında çalışmaya başlamadan önce bazı temel stilleri ekleyelim. İçin bir arka plan dokusu ekleyerek başlayalım html eleman.
html background: url ('… /images/skewed_print.png'); Daha sonra, seçim çerçevesini tarayıcı penceresinin ortasına yerleştirip, iç gölge, arka plan rengi ve kenarlıklar gibi bazı ayrıntıları ekleyeceğiz..
.kayan yazı genişlik: 500 piksel; yükseklik: 50px; marj: 25 piksel otomatik; taşma: gizli; pozisyon: göreceli; sınır: 1px katı # 000; marj: 25 piksel otomatik; arkaplan rengi: # 222; -webkit-border-radius: 5px; sınır yarıçapı: 5 piksel; -webkit-box-shadow: iç içe 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); kutu-gölge: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Sonra, bu durumda bir paragraf etiketi içine alınmış olan metni kesinlikle konumlandıracağız. kesin pozisyon elemanın çökmesine neden olacak, genişlik elemanını tanımlamamız gerekecek 100% ebeveyninin genişliğini kapsayacak şekilde.
.seçim çerçevesi p pozisyon: mutlak; font ailesi: Tahoma, Arial, sans-serif; genişlik:% 100; yükseklik:% 100; marj: 0; hat yüksekliği: 50px; metin hizalama: orta; renk: #fff; metin-gölge: 1 piksel 1 piksel 0 piksel # 000000; filtre: damla gölgesi (renk = # 000000, offx = 1, offy = 1);
Bir süre sonuçlara bir göz atalım.
Bu noktada ihtiyacımız olan tüm temel stilleri yaptık; daha fazla eklemek veya stilleri kişiselleştirmek için özgürsünüz. Ancak, eğitimin sonuna kadar belirtilen seçim boyutu (yükseklik ve genişlik) ile kalmanızı öneririz.
Animasyon
Kısacası, animasyon hareketli nesnelerin bir sunumudur. Her hareket bir zaman çerçevesi içinde tanımlanır. Bu yüzden, animasyon üzerinde çalışırken, çoğunlukla zaman. Aşağıdakileri dikkate alırız:
- Nesne ne zaman hareket etmeye başlar??
- Nesnenin bir noktadan diğerine hareket etmesi ne kadar sürer??
- Nesne ne zaman ve ne kadar süreyle belirli bir noktada kalmalı?
CSS3 Animasyonunda zaman ile tanımlanabilir @keyframe sözdizimi. Ancak, bu bölüme geçmeden önce, ilk seçim çerçevesi metninin başlangıç konumunu belirtelim..
Metnin sağdan başlayıp sonra sağa doğru hareket etmesini planladık. Böylece, ilk önce CSS3 Transformation özelliğini kullanarak sağa yerleştireceğiz.
.seçim çerçevesi p dönüşümü: translateX (% 100);
Hatırla, 100% paragraf elemanımız için tanımladığımızın ebeveyne eşit olduğunu Genişlik. Yani, aynı şey burada da uygulanacak; paragraf elemanı tercüme için sağa 100% bu örnekte hangi 500px.
Ana kareler
@keyframe sözdizimi bazı insanlar için biraz kafa karıştırıcı olabilir, bu yüzden burada neler olup bittiğini kolayca anlamanıza yardımcı olacak basit bir görsel rehber hazırladık. @keyframe sözdizimi.
Büyük halini görmek için buraya tıklayın.
Tüm animasyon hakkında sürecek 20 saniye ve süren iki diziye ayrılır 10 saniye her.
İlk sırada, ilk metin anında sağdan içeri kayar ve kullanıcının metni okumasına izin vermek için anlık olarak görünür durumda kalır, ikinci metin ise gizli kalır. İkinci sırada, ilk kayan yazı metni sola kayar ve ikinci metin hemen sağdan kayar.
Ve işte animasyonu çalıştırmak için uygulamamız gereken tüm ana kare kodları..
@keyframes-left bir% dönüşümü: translateX (% 100); % 10 dönüşümü: translateX (0); % 40 dönüşümü: translateX (0); % 50 dönüşümü: translateX (-100%); % 100 dönüşümü: translateX (-100%); @keyframes sol-iki 0% transform: translateX (100%); % 50 dönüşümü: translateX (% 100); % 60 dönüşümü: translateX (0); % 90 dönüşümü: translateX (0); % 100 dönüşümü: translateX (-100%);
Sol biri Anahtar kareler, animasyonun ilk sırasını tanımlarken sol-iki anahtar kareler ikinci sırayı tanımlar.
Öğelere Animasyon Uygulama
Animasyonun çalışması için, animasyonu öğeye uygulamayı unutmayın. İlk sıra ilk metin için veya bu durumda ilk paragrafa uygulanır ve ikinci sıra ikinci paragraf için de uygulanır.
.kayan yazı p: nth-çocuk (1) animasyon: sol 20'li bir kişi sonsuz; .marquee p: nth-child (2) animasyon: sol iki 20s sonsuz kolaylığı;
Hepimiz animasyonumuzla işimiz bitti; tarayıcıdaki sonuçları görelim.
- gösteri
- Kaynak İndir
Bonus
Seçim çerçevesini, önceki yazımızda yaptığımız gibi, yukarıdan aşağıya veya tam tersine taşımak için de tanımlayabiliriz. İşte nasıl yapılacağı; Yukarıdaki Animasyon kodlarımızı aşağıdakilerle değiştirin metni aşağı doğru kaydır:
.seçim çerçevesi p dönüşüm: translateY (-100%); @keyframes aşağı bir % 0 transform: translateY (-100%); % 10 dönüşümü: translateY (0); % 40 dönüşümü: translateY (0); % 50 dönüşümü: translateY (% 100); 100% dönüşüm: translateY (% 100); @keyframes aşağı-iki 0% transform: translateY (-100%); % 50 dönüşümü: translateY (% -100); % 60 dönüşümü: translateY (0); % 90 dönüşümü: translateY (0); 100% dönüşüm: translateY (% 100);
Biz değişti dikkat edin X koordinatı için Y-ekseni ve hepsini çevir çeviri Olumluya negatif değer, tersi.
Ayrıca buna sahibiz Animasyonu yeniden adlandırdı için Aşağı-one ve Aşağı-ikisinin, bu yüzden Animasyon adını paragraf öğesinde de yeniden uygulamamız gerekiyor..
.kayan yazı p: nth-çocuk (1) animasyon: aşağı bir 20s sonsuz kolaylığı; .marquee p: nth-child (2) animasyon: aşağı iki 20s sonsuz kolaylığı;
Ya da tam tersi yapmak istiyorsanız; alttan üste. İşte uygulamanız gereken tüm kodlar:
.marquee.up p dönüşümü: translateY (100%); .marquee.up p: nth-child (1) animasyon: yukarı 20'ler sonsuz; .marquee.up p: nth-child (2) animasyon: yukarı iki 20, sonsuzluğu kolaylaştırır; @keyframe up one one 0% transform: translateY (100%); % 10 dönüşümü: translateY (0); % 40 dönüşümü: translateY (0); % 50 dönüşümü: translateY (% -100); 100% dönüşüm: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); % 50 dönüşümü: translateY (% 100); % 60 dönüşümü: translateY (0); % 90 dönüşümü: translateY (0); 100% dönüşüm: translateY (-100%);
- gösteri
- Kaynak İndir
Sonuç
Mevcut tarayıcı desteğinin olmamasına rağmen, CSS3 Animation, doğru yapıldığında, bu örnekte yaptığımız gibi, gelecekte pek çok kullanılabilirlik sorununu şüphesiz çözecektir. Modern tarayıcılar için yalnızca kısa bir animasyona ihtiyacımız olursa, CSS3 Animasyonu kullanmak muhtemelen bir jQuery betiği yüklemek zorunda kalmaktan iyidir..
Son olarak, bu makalenin bazı insanlar için biraz ezici olabileceğinin farkındayız, bu nedenle, bu makale ile ilgili herhangi bir sorunuz varsa, aşağıdaki yorumlar bölümünde yayınlamaktan çekinmeyin.
