Bu makalede jQuery ile rastgele ve sürekli olarak renk değiştiren alanların nasıl yapılacağından bahsedeceğim. Bu derste yer alan işlemi yazılarda, link yapılarında, iconlarda, arka plan renklerinde ve bir çok şekillendirmeye tabi tutulan yerlerde yapabilirsiniz.
Renk değişimleri için jQuery kütüphanesindeki CSS metodunu kullanacağız. Bu metodun içeriğine color değerini RGB olarak gireceğiz. RGB değerlerini de Match.random() ile rastgele üreteceğiz. Böylelikle rastgele bir renk tonu elde etmiş olacağız.
Renklendirme işlemi sonrasında bu işlemin belirli aralıklarla işlemesi için setInterval() metodunu kullanacağız. Bu metoda hazırladığımız fonksiyonu belirli aralıkarla döndürmesi için ikinci parametresine gerekli değeri gireceğiz.
<div class="hareketli" style="font-size:140px">ibrahim Çevrük</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function colorcum(){
var renk = Math.floor((Math.random()*255) + 1) + ',' +Math.floor((Math.random()*255) + 1) + ','+ Math.floor((Math.random()*255) + 1) ;
$(".hareketli").css("color",'rgb('+ renk+')');
}
setInterval(function(){ colorcum(); }, 100);
</script>
Yukarıda yer alan örneği incelediğinizde colorcum() isminde bir fonksiyonun yer aldığını görebilirsiniz. Bu fonksiyonda renk değişkeni ile rastgele bir RGB formatı üretilmektedir. Elde edilen bu değer CSS metodu ile color değeri olarak seçilen HTML etiketine verilmektedir. Tanımlanan fonksiyon setInterval() fonksiyonu ile 1 saniyede 10 kere çalışması üzerine tanımlanmaktadır. Böylelikle sürekli ve hızlı bir şekile renk değiştiren alanlar hazırlamış olacaksınız. İhtiyaç durumuna göre çalışma süresini ayarlayabilirsiniz.
Hazırlamış olduğumuz örnekle birlikte yukarıdaki gibi bir yazı alanı hazırlamış oluyoruz. Fikir vermesi ve yapılışının nasıl olduğunu anlattığım için daha iyi bir fikirle sunmak istemedim. Yaratıcılığınızla bunu daha verimli kullanacağınızdan eminim.
