Animasyon ile Metin Renklendirme

Vatanay Özbeyli CSS3, HTML5, Tasarım Unsurları

AdobeWordPress Renklendirilmiş Logo

CSS’in transition (geçiş) özelliği ile nasıl animasyonlar hazırlayacağımızı öğrenmiştik. Bu makalemde ise JavaScript desteği ile sayfaya girildiğinde otomatik olarak renklenen başlıklar hazırlayacağız. İşin güzel kısmı ise bunu hiçbir görsel kullanmadan yapacak olmamız.

ÖRNEĞİ GÖRÜNTÜLE

Hazırlık

TaslakBildiğiniz gibi CSS kodları <head></head> tagları içerisine koyuluyor.

Burada kilit nokta aşağıdaki kodları sırasıyla sitenize yerleştirmeniz.

CSS tahmin edebileceğiniz gibi en üstte, html kodları ise <body></body> içerisinde herhangi bir yerde ve son olarak JS kodları da html kodlarının altında.

Bu karmaşanın önüne geçmek için genel bir örneğin kodlarını makalenin en altında paylaşıyorum.

Web sayfamızın CSS kodlarına aşağıdaki satırları ekliyoruz :

body {
font: 700 0.8em sans-serif;
text-align: center;
background-color:black;
}

span {
display: inline-block;
color: #000;
letter-spacing: .4em;
padding-left: .4em;
margin-left: .4em;
@include transition(all .2s ease);
}

HTML kodlarımız ise bunlar :

<p>Adobewordpress.com</p>

Son olarak JS Kodlarımız :

<script type="text/javascript">
var p = document.getElementsByTagName('p')[0];
var t = p.innerHTML;
p.innerHTML = '';
for (var i = 0, l = t.length; i < l; ++i) (function(i) {
 var s = document.createElement('span');
 var c = t.charAt(i);
 s.innerHTML = /\s/.test(c) ? '&nbsp;' : c;
 p.appendChild(s);
 setTimeout(function(){
 s.style.backgroundColor = 'rgb(' + &#91;
 156 + 0 | Math.random() * 100,
 156 + 0 | Math.random() * 100,
 0 | Math.random() * 100
 &#93;.join(',') + ')';
 s.style.WebkitTransform =
 s.style.MozTransform =
 s.style.transform = 'scale(' + (1.1+Math.random()) + ') rotate(' + (-10+Math.random()*20) + 'deg)';
 }, 100 * i);
}(i));
</script>

Genel Örnek

CSS, JS ve HTML kodları içinde kaybolanlar için hepsinin hazır olduğu genel bir sayfa yapısı paylaşmakta fayda var 🙂 Aşağıdaki kodları herhangi bir HTML dosyasına yapıştırarak çalışabilirsiniz.

<html>
<head>
<style>
body {
font: 700 0.8em sans-serif;
text-align: center;
background-color:black;
}
span {
display: inline-block;
color: #000;
letter-spacing: .4em;
padding-left: .4em;
margin-left: .4em;
@include transition(all .2s ease);
}</style>
</head>
<body>
<p>Adobewordpress.com</p>
<script type="text/javascript">
var p = document.getElementsByTagName('p')[0];
var t = p.innerHTML;
p.innerHTML = '';
for (var i = 0, l = t.length; i < l; ++i) (function(i) {
 var s = document.createElement('span');
 var c = t.charAt(i);
 s.innerHTML = /\s/.test(c) ? '&nbsp;' : c;
 p.appendChild(s);
 setTimeout(function(){
 s.style.backgroundColor = 'rgb(' + &#91;
 156 + 0 | Math.random() * 100,
 156 + 0 | Math.random() * 100,
 0 | Math.random() * 100
 &#93;.join(',') + ')';
 s.style.WebkitTransform =
 s.style.MozTransform =
 s.style.transform = 'scale(' + (1.1+Math.random()) + ') rotate(' + (-10+Math.random()*20) + 'deg)';
 }, 100 * i);
}(i));
</script>
</body>
<html>

Renkli ve özgün bir başlık tipi oluşturmak bu kadar basit.

Bu da ilginizi çekebilir  Scroll ile bir ilerleyen video nasıl yapılır?

Bir sonraki makalemde görüşmek üzere…