Sonsuz Gökkuşağı Animasyonu ile Sitenizi Renklendirin

Bugün Codepen'den gelen bir e-bültende bu sonsuz gökkuşağı'nı gördüm. Örnek kod içinde sitenizin tasarımını bozacak class'lar olduğundan bunları temizleyerek örneklendirmek istedim. Bu arada, yukarıdaki görsel de bir gif ya da benzeri bir animasyon değil belirteyim, zemin renginin değişmesi sonucu böyle görünüyor..

Normalde böyle bir animasyon yapmak isteseniz, böyle renk geçişleri içerdiğinde boyutu yüksek olacaktır. Oysa ki metin alanları opak/geçirgen/transparan olan bu görsel sadece 22 Kb.

İlave olarak bir de aşağıdaki gökkuşağı animasyonlu metnimiz var.

İşte rengarenk başlığımız

Yapımı ise oldukça kolay. İhtiyacımız olan sadece CSS.

Bir renk bir de artalan için olmak üzere 2 CSS class'ına ihtiyacımız var. Hemen aşağıda paylaşayım.

	/* Rainbow Effect Başladı */
		@keyframes slide {
			0% {
				background-position-x: 0%;
			}
			100% {
				background-position-x: 600vw;
			}
		}
		.clip {
			background: repeating-linear-gradient(
                -45deg,
                red 0%,
                yellow 7.14%,
                lime 14.28%,
                cyan 21.42%,
                cyan 28.56%,
                blue 35.7%,
                magenta 42.84%,
                red 50%);
			background-size: 600vw 600vw;
			-webkit-animation: 'slide' 70s infinite linear forwards;
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;
		}
		.bgclip {
			background: repeating-linear-gradient(
                -45deg,
                red 0%,
                yellow 7.14%,
                lime 14.28%,
                cyan 21.42%,
                cyan 28.56%,
                blue 35.7%,
                magenta 42.84%,
                red 50%);
			-webkit-animation: 'slide' 10s infinite linear forwards;
		}
	/* Rainbow Effect Bitti */

Öncelikle, slide isminde bir keyframe'imiz var ve burada animasyonumuz tanımlı. Fatih Hayrioğlu'ndan alıntı yaparsak "Anahtar Kare (Keyframes) daha önce flash ile uğraşmış insanlara yabancı olmayan bir kavram. Animasyonu bir süreç olarak kabul edersek, anahtar kare(keyframe) bize geçişin başlangıç ve bitişi arasındaki durumları tanımlamamız için olanak sağlar." Detaylı bilgi için Fatih Hayrioğlu'nun sitesindeki CSS3 Animasyon (Animation) içeriğine geçiş yapabilirsiniz."

slide dışında 2 class'ımız daha var. Bunlardan clip metin renkleri için, bgclip ise zemin renkleri için tanımlamalarımızı içeriyor. -webkit-animation tanımlarında gördüğünüz gibi slide tanımı çağrılıyor. Hızlarını da dileğiniz gibi ayarlayabilirsiniz. Ben metin rengi için 70 ve zemin rengi için 10 değerlerini kullandım.

Bu CSS tanımlarını ekleyerek siz de kolayca sitenizde uygulayabilirsiniz. Çok fazla kullanmazsak sanıyorum ki eğlenceli bir görünüm elde edilebilir :)

Beğendiyseniz lütfen paylaşın.