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.
Hazırlık
Bildiğiniz gibi CSS kodları 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 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 :
Adobewordpress.com
Son olarak JS Kodlarımız :
<script>
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) ? ' ' : c;
p.appendChild(s);
setTimeout(function(){
s.style.backgroundColor = 'rgb(' + [
156 + 0 | Math.random() * 100,
156 + 0 | Math.random() * 100,
0 | Math.random() * 100
].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.
Adobewordpress.com
<script>
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) ? ' ' : c;
p.appendChild(s);
setTimeout(function(){
s.style.backgroundColor = 'rgb(' + [
156 + 0 | Math.random() * 100,
156 + 0 | Math.random() * 100,
0 | Math.random() * 100
].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>
Renkli ve özgün bir başlık tipi oluşturmak bu kadar basit.
Bir sonraki makalemde görüşmek üzere…
Test : http://www.adobewordpress.com/wp-content/uploads/test/16.html
Kaynak : http://www.adobewordpress.com/animasyon-ile-metin-renklendirme/