jQuery ile HTML Elemanlarınıza Rastgele Renkler

Bugün hazırlayacağımız flat renk şablonunu bir jQuery array içerisine yerleştirerek güzel bir renk paleti oluşturacağız. Sonrasında da birlikte oluşturacağımız bir fonksiyon ile web sitemizdeki tüm öğeler için kullanabileceğimiz mükemmel bir renk aracı hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

jQuery ile Rastgele Yazı ve Background Renkleri

İlk olarak renk şablonumuzu hazırlayalım. İstediğiniz tüm renkleri array içerisine ekleyebilirsiniz. Hex, RGB ve HSL gibi tüm renk tanımlarını destekleyecek bu yapıya 20 adet flat renkten oluşan aşağıdaki şablonu da dahil edip bu adımı hızlıca geçebilirsiniz.

Kullanacağımız flat renkler şöyle :

#1abc9c
#2ecc71
#3498db
#9b59b6
#34495e
#16a085
#27ae60
#2980b9
#8e44ad
#2c3e50
#f1c40f
#e67e22
#e74c3c
#ecf0f1
#95a5a6
#f39c12
#d35400
#c0392b
#bdc3c7
#7f8c8d

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi fonksiyonumuzu sitemizin alt kısmına, jQuery’nin de altına ekleyerek sayfamıza dahil edelim.

function color(element, attribute) {
  var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
  var getRandom = colors[Math.floor(Math.random() * colors.length)];
  if (attribute == 'color') {
    $(element).css('color', getRandom);
  } else {
    $(element).css('background-color', getRandom);
  }
}

Buradaki renkleri isteğiniz dahilinde azaltabilir veya çoğaltabilirsiniz.

Artık web sayfanızdaki herhangi bir elemanı selector öğesiyle çağırarak arkaplan ve yazı tipi rengi tanımlayabilirsiniz. Kullanım şekli en basit haliyle şöyle :

color('body','background'); // Sayfa arkaplan rengini rasgele değiştirir.

color('body','color'); // Sayfa yazı rengini rasgele değiştirir.

color('.menu','color'); // Menü classına sahip elemanın yazı rengini rasgele değiştirir.