- Katılım
- 28 Mayıs 2013
- Mesajlar
- 190
- Reaction score
- 1
CSSin 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ı <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
Kod:
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 :
Kod:
<p>Adobewordpress.com</p>Son olarak JS Kodlarımız :
Kod:
<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) ? ' ' : 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.
Kod:
<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) ? ' ' : 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>
</body>
<html>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/