jQuery ile HTML Elemanlarınıza Rastgele Renkler | Alaoğlu Tasarım | Fikirlerinizi Tasarlar | Web Tasarım & Grafik Tasarım Hizmetleri

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.

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);
  }
}

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.
 

Yorum yapabilmek için giriş yapmalısınız

Tıkla Hemen Ara!