Yıldızların Döndürülmesi

Yıldızlar oluşturulduktan sonra, JavaScript kullanarak onları döndürmek oldukça kolaydır. Bu adım, yıldızların ortasına bir div elementi ekleyerek başlar ve CSS kullanarak onu şekillendiririz. Yıldızın ortasından geçen 2 çizgi çizerek yıldızı oluştururuz.

Bu adımda, JavaScript kodunu kullanarak yıldızın dönüş hızını, yönünü ve süresini kontrol etmek mümkündür. Yıldızı döndürmek için üç boyutlu dönüş işlevini kullanabiliriz. Bu işlem, yıldızın z ekseninde dönmesini sağlar. Ayrıca, yönünü ve hızını ayarlamak için dört farklı yönde döndürme işlemini kullanabiliriz. Örneğin, yıldızı saat yönünde döndürebiliriz veya anti-saat yönünde döndürebiliriz.

Bunu yapmak için, yıldızın CSS'te döndürülmüş hali oluşturulmalıdır. Ardından, yıldızın stil özellikleri değiştirilerek döndürme işlemi yürütülür. İstenilen hız ve yön uygun koda tanımlanır. Ayrıca, yıldızın kaç saniye boyunca döneceğini belirleyebiliriz.

Yıldızın döndürme işlemi tamamlandıktan sonra, yıldızlar kolayca mouseover ve mouseout efektleri için ayarlanabilir. Ayrıca yıldızların renkleri değiştirilebilir ve dönen hızları kontrol edilebilir. Bu şekilde, yıldızlarla ilgili birçok farklı efekt oluşturmak mümkündür.

Mouseover Efekti

Yıldız efektlerimizin daha da dikkat çekici olması için mouseover efektleri ekleyebiliriz. Bu efektle beraber yıldızlarımız mouseover durumunda hızlıca dönecektir. Bu efekti oluşturmak için "mouseover" eventini kullanacağız ve bu eventin tetiklenmesi durumunda yıldızların hızlıca dönmesi işlemini gerçekleştireceğiz.

Yukarıdaki tabloda da belirtildiği gibi, mouseover eventi tetiklendiğinde "rotateStarFast()" fonksiyonu çalışacak ve yıldızlarımız hızlıca dönecektir. Bu fonksiyon daha önceki adımlarda oluşturduğumuz "rotateStar()" fonksiyonuna çok benzer, ancak burada daha hızlı bir dönüş sağlanacaktır.

  function rotateStarFast(star) {      var rotation = parseInt(star.dataset.rotation);      rotation = (rotation + 15) % 360;      star.style.transform = 'rotate(' + rotation + 'deg)';      star.dataset.rotation = rotation;  }

Kodlarımızın çalışması için "mouseover" eventini yıldızlarımızın üzerinde dinlememiz gerekiyor:

  const stars = document.querySelectorAll('.star');  stars.forEach(function(star) {      star.addEventListener('mouseover', function() {          rotateStarFast(star);      });  });

Yukarıdaki kodda öncelikle yıldızlarımızı seçiyoruz. Daha sonra, her bir yıldız üzerinde döngü başlattığımızda, "mouseover" eventini dinleyerek "rotateStarFast()" fonksiyonunu çalıştırıyoruz.

Böylece mouseover efektini yıldızlarımıza eklemiş olduk ve yıldızlarımız daha da dikkat çekici hale geldi.

Döndürme Hızının Müdahale Edilmesi

Yıldız efektlerinde döndürme hızı oldukça önemlidir. Yıldızlar ne çok hızlı ne de çok yavaş dönmelidir. Neyse ki, bu hız üzerinde tam kontrol sağlayabilirsiniz.

Döndürme hızını kontrol etmek için kodun görünümünü değiştirebilirsiniz. Bu, setInterval() ve setTimeout() methodlarıyla yapılabilir. setInterval(), belirli bir zaman aralığında kod tekrarlamak için kullanılırken, setTimeout() belirli bir süreden sonra kod çalıştırmak için kullanılır.

Ayrıca CSS'te değişiklik yaparak yıldızların dönme hızı üzerinde de kontrol sağlayabilirsiniz. Örneğin, transform: rotate() fonksiyonunu kullanarak, yıldızların dönme hızını ayarlayabilirsiniz.

Tüm bunlar, yıldız efektlerinde döndürme hızını tam olarak kontrol etmenizi sağlayacaktır. Ancak, dikkatli olun ve yıldızların dönüş hızı ve yönüne uygun olmasını sağlayın.

Mouseout Efekti

Yıldızların döndürülmesi, yazılımı mouseover efekti ile daha da özelleştirilerek zenginleştirilebilir. Ancak, mouseover efekti yazılırken genellikle mouseout efekti de eklenir. Mouseout efekti, yıldızlar mouse'un dışarı çıkması durumunda normale dönmelerini sağlar.

Yani, yıldızlar mouseout edildiğinde normale dönmeli ve dönme işlemi durmalıdır. Bunun için, biraz daha kod yazılması gerekiyor. İlk olarak, mouseout fonksiyonunu tanımlamalıyız. Bu fonksiyon, yıldızın mouseout edildiğinde ne yapması gerektiğini belirler. Yani, yıldızın dönüşünü durdurması ve normale dönmesi gerekiyor.

Bunun için, aşağıdaki kodda olduğu gibi bir mouseout fonksiyonu yaratabilirsiniz:

Kodun açıklaması şöyle:

• Kodun başında mouseOutStar fonksiyonunu tanımlıyoruz.
• Daha sonra, yıldızın dönüşünü durdurmak için mevcut dönüş açısını değerlendiriyoruz.
• Son olarak, yıldızın dönüşünü durduracak kodu yazarak, mouseout event listener'ını yıldızdan kaldırıyoruz.

Bu kod parçasını, yukarıdaki mouseover kodu ile birleştirdiğinizde, yıldızlar mouseout edildiğinde normale dönecektir.

Color Effect

Yıldızların renkleri, mouseover ve mouseout durumlarına göre değiştirilebilir. Bu, her yıldıza rastgele renkler atayarak yapılabilir. Örneğin, HTML kodunda yıldızlarınızı bu şekilde oluşturabilirsiniz:

<div class="star"></div>

<div class="star"></div>

<div class="star"></div>

<div class="star"></div>

<div class="star"></div>

<div class="star"></div>

Bu kod yıldız tasarımlarını içerir. CSS dosyası oluşturduğunuzda, yıldızlarınızı istediğiniz herhangi bir şekil ve boyuta stilize edebilirsiniz. JavaScript kodunda, yıldızları renklendirmek için bir dizi renk tanımlayabilirsiniz. Bu renkleri dizi içerisinde tutabilir ve her mouseover ve mouseout olayı sırasında bir yıldız için rastgele bir renk seçerek uygulayabilirsiniz.

Aşağıdaki kod örnekleri, yıldızlarınızın mouseover ve mouseout durumlarına göre değiştirilen yıldız renklerini göstermektedir:

var starColors = ["#ffffff", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"];$(".star").mouseover(function() {  var randomIndex = Math.floor(Math.random() * starColors.length);  $(this).css("background-color", starColors[randomIndex]);});$(".star").mouseout(function() {  $(this).css("background-color", "");});

var starColors = ["#ffffff", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"];$(".star").mouseover(function() {  var randomIndex = Math.floor(Math.random() * starColors.length);  $(this).css("background-color", starColors[randomIndex]);});$(".star").mouseout(function() {  $(this).css("background-color", "");});

var starColors = ["#ffffff", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"];$(".star").mouseover(function() {  var randomIndex = Math.floor(Math.random() * starColors.length);  $(this).css("background-color", starColors[randomIndex]);});$(".star").mouseout(function() {  $(this).css("background-color", "");});

Bu kodu yıldızların mouseover ve mouseout durumlarını belirlemek için mouseover ve mouseout fonksiyonlarını kullanarak yazdık. Bu fonksiyonlar, yıldızlara her hangi bir olayın meydana gelmesi halinde çalışacak kodları sağlar. Yıldızların her birine rastgele bir renk atamak için Math.floor(Math.random() * starColors.length) kodunu kullanarak starColors dizisinden rastgele bir renk seçtik. Yıldızlara renklendirme yapmak için $(this).css("background-color", ) özelliklerini kullanarak arka plan rengini değiştirdik.

Animation Loop ve Timer'ın Belirlenmesi

Javascript kullanarak dönen yıldızlar oluşturmanın son adımı, animation loop tasarımıdır. Animation loop tasarımı, yıldızların bir loop içerisinde dönmesini sağlar. İşlem için, yıldızlar ve loop sayısı belirlenir.

Dönme süresi, yıldızların ne kadar hızlı döneceğine ve kaç saniye boyunca döneceğine karar vererek belirlenir. Ayrıca, yıldızların nerede başlayacağı ve nerede bitireceği, yani yönü de belirlenir.

Animation loop tasarımı için en yaygın kullanılan yöntem, interval methodudur. Interval methodunda, belirli bir zaman aralığında yıldızlar belirli bir fazda mı diye kontrol edilerek tasarım yapılmaktadır. Bu sayede, yıldızların doğru bir şekilde dönmesi sağlanır.

Daha sonra, yıldız ve loop sayısı belirlenir. Ne kadar yıldız oluşturulması gerektiğine karar verilir ve bir loop içerisinde bu yıldızların kaç kez döneceği belirlenir. Bu seçenekler, oluşturmak istediğiniz uygulamaya bağlı olarak değişiklik gösterebilir.

Interval Metodu

JavaScript kullanarak dönen yıldız efektleri oluşturmak için saatteki akrep ile yelkovanın çalışma şeklinden esinlenilen bir loop kullanılır. Yıldızlar belirli bir açıda belirli bir hızda döndürülür ve belirli bir açıda belirli bir hızla durma süresi verilir. Ancak, yıldızların dönme hızı ve loop dönüşüne ne kadar zaman ayırılacağı, bir interval metodu kullanarak ayarlanır.

Interval metodu, belirli bir zaman aralığında işlemleri yürüten bir JavaScript fonksiyonudur. Örneğin, bir yıldızın 45 derecelik bir açıda 3 saniyede dönmeyi bitireceğini varsayalım. Bu durumda, fonksiyon belirtilen süre boyunca çalışacak ve yıldızın döndüğü açının zamanını sürekli olarak kontrol edecektir. Yıldız belirtilen açıyı tamamladığında, interval metodu bu yıldızın bir sonraki fazına geçmesi için belirli bir süre daha bekleyecektir.

Bir başka deyişle, yıldızlar arasındaki açı ve dönüş hızı belirlendiğinde, interval metodu kullanarak her yıldızın hangi zamanda hangi fazda olacağını kontrol edebilirsiniz. Bu sayede yıldızların eşit aralıklarla döndüğünü garanti ederek, efektin daha düzgün bir şekilde çalışmasını sağlayabilirsiniz.

Bu nedenle, JavaScript kullanarak dönen yıldız efektleri oluştururken, interval metodu büyük önem taşır. En doğru şekilde kullanıldığında, dönen yıldızları kontrol etmek ve tamamen özelleştirmek mümkündür!

Star and Loop Count

Yıldız oluşturma işleminin ardından, yıldız ve loop sayılarını seçmek gerekiyor. Yıldız sayısı, sayfa boyutuna ve tasarımın ne kadar dolu olması gerektiğine bağlı olarak değişebilir. Genellikle, 20-30 yıldız kullanmak işi görür. Ancak, daha dolu bir tasarımda daha fazla yıldız kullanılabilir.

Loop sayısı, yıldızların kaç kez döndürüleceğini belirler. Loop sayısı arttıkça, yıldızlar daha uzun süre dönecektir. Bu değer de kullanıcının tercihine bağlıdır. Ancak, çok yüksek bir sayıya ayarlamak, kullanıcının sayfada çok uzun süre kalmasına sebep olabilir.

Bir yıldız döngüsü genellikle şu şekilde belirlenir:

Tablodaki örneklerde, istenen yıldız sayısı ve döngü sayısı belirtilmiştir. Ancak, her durum için bu sayılar değişebilir. Uygun yıldız ve loop sayısını deneme yanılma yoluyla bulabilirsiniz. Ancak, sayfanın yüklenmesi için gereksiz yere yüksek sayılar kullanmaktan kaçınmak önemlidir.

Conclusion

Bu yazıda öğrendiğiniz temel JavaScript etkileşimi sayesinde, yıldız efektlerini kolayca oluşturmayı öğrendiniz. Ancak bilginizi kullanarak yaratıcılığınızı konuşturabilir ve çok daha farklı uygulamalar oluşturabilirsiniz. Yaratıcılığınızı sınırlandırmayın, örneğin farklı renklerde yıldızlar oluşturabilirsiniz ya da yıldızların çapı ve sayısı gibi özelliklerini değiştirerek başka bir tasarım yaratabilirsiniz.

Bu temel etkileşim sayesinde, JavaScript dilindeki özellikleri de keşfetme fırsatı yakalayabilirsiniz. Bu sayede, uygulamalarınızı daha da geliştirebilir ve farklı projelere dahil olabilirsiniz. Ayrıca, bu temel özellikleri öğrenerek diğer programlama dillerinde de benzer etkileşimleri uygulayabilirsiniz.

Özetle, bu yazıda öğrendiğiniz temel etkileşim ile yıldız efektleri oluşturma sürecinde yaratıcılığınızı kullanarak kendinizi geliştirmeye devam edebilirsiniz. Bu farklı uygulamalar sayesinde, web tasarımında kendinizi ileriye taşıyabilir ve kariyerinizi geliştirebilirsiniz.