19 Havalı CSS animasyon örneği

08. Glitch text

Glitchy efektleri bir web sitesine anarşik veya sıkıntılı bir görünüm vermek için idealdir. Bu tür bir animasyon oluşturmak için CSS ana karelerini kullanabilirsiniz. İşlem, animasyon yazılımı ile çalışmaya benzer, ancak CSS’deki ana karelerin koddaki animasyonun zaman çizelgesi için yüzde olarak yazılması dışındadır. Bu aksaklık metninin tam öğrenilmesi için tasarımcı ve geliştirici Mark Shufflebottom un Tutoriallarını kullanabilirsiniz. Öğeleri ekranda konumlandırmak için CSS Izgarasını da kullanacaksınız.

09. Yağan kar

• USA Today
• Kodu görüntüleyin

Kar, bir SVG kullanılarak yaratılır ve teknik, baloncukları daha önce yaratma şeklimize çok benzer. Başlamak için, bir SVG içinde iki daire katmanı oluşturduk, sonra Y değerini bir anahtar kare animasyonu ile çevirerek bu iki katmanı canlandırıyoruz.

Animasyonu tek tek öğeler yerine her katmana uygularız ve aynı animasyonu her iki katman için de yeniden kullanırız. Onlara sadece farklı süreler vererek sahnemize bir miktar derinlik katabiliriz.

10. Hareketli arka plan

• A Violent Act
• Kodu görüntüleyin

A violent Act web sitesi, kullanıcının dikkatini çekmek için maskeleme ve ince hareketler kullanır. Buradaki çalışmaların çoğu, kurulum ve SVG oluşturma aşamasındadır.

11. Renkli geçişler

• DaInk
• Kodu görüntüleyin

DaInk web sitesi, sayfalar arasında geçiş yapmak için gerçekten etkili bir teknik kullanır. Geçiş basittir ve üst üste yerleştirilmiş farklı renklerde farklı boyutta dikdörtgenler içeren bir SVG’den oluşur.

Animasyon, X konumunu SVG’nin genişliğine göre dönüştürmekten oluşur. Daha sonra, nth-of-type kullanarak, yumuşak bir geçiş oluşturmak için her birini en son 75 ms kaynarak gecikmeler uygularız.

12. Rastgele görünen harfler

• Nuclear Dissent

Jam3, Nuclear Dissent sitesinde tam ekran video arka planı üzerine, animasyonlu bir içerik yerleşimi oluşturmak için JavaScript ve CSS kullandı.

Bu CSS animasyonunu kopyalamak için ilk adım, HTML belgesinin yapısından başlatmaktır. Bu, kafa ve gövde bölümlerini saklayan belge kabından oluşur. Baş bölümü harici CSS ve JavaScript kaynaklarını yüklemek için kullanılırken, gövde bir sonraki adımda oluşturulan görünür sayfa içeriğini gösterecektir.

Ön plan sayfası içeriği, içerik akışının kolay kontrol avantajını sağlamak için ana kabın içine yerleştirilir. Metin öğesi, bindirme sınıfına (overlay class) sahiptir, böylece metin animasyonunu uygulamak için JavaScript ve CSS tarafından referans alınabilir. Birden fazla öğe, bindirme sınıfını kullanarak uygulanan animasyona sahip olabilir.

  This is a story all about how...

HTML’nin son kısmı arka plan video öğesini tanımlamaktır. Tüm tarayıcılar her video standardını destekleyememektedir, bu nedenle farklı kaynaklar belirlemeniz gerekir. Tarayıcı, destekleyebildiği ilk kaynağı gösterecektir. Video öğesinin otomatik olarak oynatılmasını ve ses olmadan tekrar etmesini sağlayacak şekilde otomatik yürütme , sessiz ve döngü özelliklerinin nasıl uygulandığını not edin.

Styles.css adlı yeni bir dosya oluşturun. Bu dosyadaki ilk adım, ana içerik kabının özelliklerini tanımlamaktır. Yazı tipi ve renk için varsayılan ayarlar, alt içeriğin miras alması için uygulanır. Otomatik değerler yan kenarlara uygulanır, böylece child içeriği merkezi olarak hizalanır.

main {
	font-family: Helvetica, sans-serif;
	color: #fff;
	padding: 2em;
	width: 75%;
	min-height: 100vh;
	margin: 0 auto 0 auto; }

Arkaplan öğesi, efektin çalışması için özel stil gerektirir. İlk olarak, kullanıcı sayfayı kaydırırsa sabit konumlandırma aynı konumda kalmasını garanti etmek için önemlidir. İkincisi, ana sayfa içeriğinin altındaki konumunu garanti edecek negatif bir z indeksi kullanması gerekir. Dönüşüm ve boyut , tam sayfa penceresini kapatacak şekilde öğenin boyutunu ve konumunu ayarlamak için de kullanılır.

video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	z-index: -9999;
	transform: translateX(-50%) 
translateY(-50%);
	background: #000; }

Yerleşim öğesi, metin içeriğinin her harfini bir yayılma etiketiyle sarılacak şekilde bölmek için JavaScript tarafından işlenir. Bu, tek tek harflerin CSS aracılığıyla canlandırılmasını sağlar. İlk olarak, yayılma harflerinin varsayılan ayarları göreceli konumlandırma, görünmez opaklık ve uygulamalı bir animateOverlay animasyonu için tanımlanmıştır. İkincisi, child ‘ların konumlarına göre animasyonlarında gecikme olur.

.overlay span{
	position: relative;
	opacity: 0;
	top: 1em;
	animation: animateOverlay 1s ease-in-
out forwards;
}
.overlay span:nth-child(4n) { animation-delay: 
0s; }
.overlay span:nth-child(4n+1) { animation-
delay: 1s; }
.overlay span:nth-child(4n+3) { animation-
delay: 2s; }
.overlay span:nth-child(4n+2) { animation-
delay: 3s; }

Her yayılma öğesine uygulanan animasyon, öğelerin yöneleceği tek kareden oluşur. Bu, opaklıklarının tamamen görünür hale gelmesini ve dikey metin konumlarının varsayılan metin akış konumlarına doğru hareket etmelerini sağlar. 6. adımın her yayılma elemanını 1em aşağı itilecek şekilde nasıl ayarladığını not alın.

@keyframes animateOverlay {
  to {
opacity: 1;
top: 0;
} }

Code.js adlı yeni bir dosya oluşturun. Bu ilk adım, daha sonra kodu uygulamak için bir for döngüsünün kullanıldığı bindirme sınıfını kullanan tüm öğeleri arayacaktır. Bu öğeler, sayfa yükleninceye kadar kullanılamaz, bu yüzden tarayıcı penceresinde yük tamamlandıktan sonra tetiklenen bir olay dinleyicisine yerleştirilmeleri gerekir.

indow.addEventListener("load", function(){
	var nodes = document.
querySelectorAll(".overlay");
	for(var i=0; i



Burada bulunan her öğenin, HTML içeriğinin yeniden tanımlanması gerekir, böylece her harf bir yayılma öğesinin içindedir. Bu, düz metni innerText kullanarak okuduktan ve sonra her bir harfi HTML'nin yeni sürümüne ayrı ayrı eklemek için loop için bir saniye kullanarak, span etiketi içinde tamamlanır. Her harf okunduktan sonra, ana düğümün innerHTML'si yeni HTML ile güncellenir.



var words = nodes[i].innerText;
var html = "";
for(var i2=0; i2"
}
nodes[i].innerHTML = html;




13. Darbeli halkalar




PeekaBeat



Kodu görüntüleyin




Peek-a-Beat web sitesinde kullanılan darbe animasyonu basit ancak etkili ve kopyalanması zor değil. Bir SVG içindeki üç daireden oluşur. Ölçeklerini ve opaklıklarını basitleştirebilirsiniz.



14. Genişleyen vurgulama




Heartbeat



Kodu görüntüleyin




Bu çok basit, ama gerçekten etkili bir tekniktir. Geçiş, önce sözde eleman kullanılarak gerçekleştirilir. Başlamak için, sözde eleman tam genişliğe yayılırken en alta, sadece birkaç piksel yüksekliğinde yerleştirilir.



Öğe etkileşime girdiğinde, sözde öğenin genişliğinin ve yüksekliğinin hem ebeveyne boyutunun% 105'ine (değişim dikey olarak çok daha çarpıcıdır) hem de metnin rengini değiştirmeye geçiş yapılır.



15. Yükseltilmiş başlık




Ensemble Correspondances



Kodu görüntüleyin




Ensemble Correspondances, müzikteki hareketi iletmek için basit bir animasyon kullanır. Tasarım açık bir şekilde notaları temsil ediyor.



16. Dönen menü simgesi




Coulee Creative 



Kodu görüntüleyin 




Animasyonlu menü düğmesi bir SVG kullanılarak oluşturulur. Animasyon, kullanıcı menü düğmesiyle etkileşime geçtiğinde gerçekleşir. İki geçiş gerçekleşir: menünün etrafındaki dairesel grup 360 derece döner ve ortadaki menü simgesinin rengi değişir.



En karmaşık kısım zamanlama işlevidir. Tam kontrol elde etmek için kübik bezier kullanarak, animasyonu yavaşça başlatabilir, orta kısımda yarışabilir ve sonunda yavaşlatabiliriz.



17. Merkezden altı çizili








God of War



Kodu görüntüleyin




Animasyon sonrası sözde öğenin altına konumlandırılması ve düğme ile etkileşime girdiğinde onu ölçeklendirmesinden oluşur.



18. Köşeleri genişletme




Princess Alexandra Auditorium



Kodu görüntüleyin 




Prenses Alexandra Oditoryum web sitesinde gösteri kategorilerini göstermek için görsel bir yol var. Şov kartlarının her biri kategoriyi temsil eden renkte ayarlanmış üçgen bir köşeye sahiptir ve ardından üzerine gelindiğinde kategorinin adı görüntülenir.



Etki, sözde elemanların öncesi ve sonrasında kullanılması, üçgenin boyutunun geçişi ve elemanın birbiriyle etkileşime girdiği zamandaki adın solması kullanılarak gerçekleştirilir.



19. Kayan ok




Greenwich Library



Kodu görüntüleyin




Greenwich Kütüphanesi, düğmelerinde gerçekten ilginç bir geçişe sahip. Düğmeyle etkileşime girdiğinde, iki şey olur: düğmenin metin kısmı kaplanır ve ardından ok düğmenin sağ tarafında hareket eder ve soldan geri döner.



Renk geçişi, basit bir anahtar kare animasyonu kullanarak geçiş özelliği ve okla gerçekleştirilir. Hem geçiş hem de animasyon, hareketleri senkronize etmek için aynı süreyi kullanır.



			


Önceki sayfa 1 2 3Sonraki sayfa