Blurry Loading Örneği
Bu yazımızda, HTML, CSS ve JavaScript kullanarak blurry loading örneği oluşturacağız. Bu örnek ile şu konuları pekiştireceğiz:
Yazacağımız kod, bir web sayfasında arka plan resminin yüklenmesi sırasında bulanıklaşma efekti ve yüzde olarak yükleme durumunu gösteren bir yükleme animasyonu sağlar. Projenin işleyişini CodePen üzerinden inceleyebilirsiniz:
See the Pen Blurry Loading by 1kodum (@1kodum) on CodePen.
Bu kod ile aşağıdakileri öğreneceksiniz:
- ☑️ Temel HTML kullanımını
- ☑️ CSS ile stil vermeyi
- ☑️ JavaScript ile işlevsellik kazandırma
⭐ HTML kodu
HTML dosyası: Sayfanın temel yapısını oluşturan HTML etiketlerini içerir. Bir arka plan bölümü (<section class="bg"></section>), yükleme metni (<div class="loading-text">0%</div>) ve JavaScript dosyasına bağlantı içerir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Blurry Loading</title> </head> <body> <section class="bg"></section> <div class="loading-text">0%</div> <script src="script.js"></script> </body> </html> |
⭐ CSS kodu
@import: Google Fonts’tan “Roboto” yazı tipini alır ve sayfada kullanılabilir hale getirir.*: Evrensel seçici, tüm öğelerinbox-sizingözelliğini “border-box” olarak ayarlar. Bu, öğelerin boyutlarını daha kolay kontrol etmeye yardımcı olur.body: Sayfanın ana düzenini ve stilini belirler. Burada, sayfa içeriğinin ortalanması, yazı tipi tanımı ve boyutlarla ilgili stiller ayarlanmıştır..bg: Arka plan resmini ayarlar ve stilini belirler. Resmin URL’si, konumu, boyutu ve başlangıçtaki bulanıklık seviyesi (0px) bu kısımda tanımlanır..loading-text: Yükleme metni (yüzde değeri) için stil tanımlamalarını içerir. Burada, metnin yazı tipi boyutu ve rengi belirlenir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; display: flex; justify-content: center; height: 100vh; align-items: center; overflow: hidden; margin: 0; } .bg { background: url("https://images.unsplash.com/photo-1565038924091-e76522104855?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8d2FpdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60") no-repeat center center/cover; position: absolute; top: -30px; left: -30px; width: calc(100vw + 60px); height: calc(100vh + 60px); z-index: -1; filter: blur(0px); } .loading-text { font-size: 50px; color: #fff; } |
⭐ JavaScript kodu
Bu JavaScript kodu, arka plan resminin yüklenmesi sırasında bulanıklaşma efekti ve yüzde olarak yükleme durumunu gösteren bir yükleme animasyonu sağlar.
loadTextvebgsabitlerini tanımlayarak, sınıf adlarına göre HTML öğelerini seçer.loaddeğişkenini 0’a ayarlayarak yüklemenin başlangıç değerini belirler.setIntervalfonksiyonunu kullanarak, 30 milisaniyelik aralıklarlablurringfonksiyonunu çalıştıran bir zamanlayıcı (interval) başlatır.blurringfonksiyonu:loaddeğerini 1 artırır.- Eğer
loaddeğeri 99’dan büyükse, zamanlayıcıyı (interval) durdurur. - Yükleme metnini günceller (
${load}%). - Yükleme metninin opaklığını günceller (
scalefonksiyonunu kullanarak). - Arka plan resminin bulanıklık seviyesini günceller (
scalefonksiyonunu kullanarak).
scalefonksiyonu:- Bir sayıyı (num) belirli bir giriş aralığından (in_min ve in_max) belirli bir çıktı aralığına (out_min ve out_max) ölçeklendirmeye yarar.
- Bu, saydamlık ve bulanıklık efektlerini ayarlamak için kullanılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const loadText = document.querySelector('.loading-text') const bg = document.querySelector('.bg') let load = 0 let int = setInterval(blurring, 30) function blurring() { load++ if (load > 99) { clearInterval(int) } loadText.innerText = `${load}%` loadText.style.opacity = scale(load, 0, 100, 1, 0) bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)` } const scale = (num, in_min, in_max, out_min, out_max) => { return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min } |
❗ scale fonksiyonu, bir sayının (num) değerini, belirli bir giriş aralığından (in_min ve in_max) belirli bir çıktı aralığına (out_min ve out_max) ölçeklendirmek için kullanılır. Bu, genellikle animasyonlar ve görsel efektler için değerlerin farklı aralıklara dönüştürülmesi gerektiğinde kullanılır.
Fonksiyonun parametreleri şunlardır:
num: Ölçeklendirilmek istenen sayı.in_minvein_max: Giriş aralığının minimum ve maksimum değerleri.out_minveout_max: Çıktı aralığının minimum ve maksimum değerleri.
Fonksiyon, ölçeklendirme işlemi için aşağıdaki formülü kullanır:
|
1 |
((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min |
scale fonksiyonu, genellikle animasyonlar ve görsel efektlerde kullanılan değerleri bir aralıktan başka bir aralığa dönüştürmek için kullanılır. Bu, orijinal değeri kullanmak istemediğiniz, ancak orijinal değerin orantılı olarak değişmesini istediğiniz durumlar için kullanışlıdır.
Bizim örneğimizde, scale fonksiyonu iki farklı amaç için kullanılmaktadır:
- Yükleme metninin opaklığını ayarlamak: Yükleme sürecinde, yükleme metni yavaşça kaybolur. Bu efekti elde etmek için, yüzde değeri (0 ile 100 arasında) 1 ile 0 arasında bir sayıya dönüştürülerek opaklık değeri olarak kullanılır.
- Arka plan resminin bulanıklık seviyesini ayarlamak: Yükleme sürecinde, arka plan resmi giderek daha az bulanık hale gelir. Bu efekti elde etmek için, yüzde değeri (0 ile 100 arasında) 30 ile 0 arasında bir sayıya dönüştürülerek bulanıklık değeri olarak kullanılır.
Bu fonksiyon, animasyonlar ve görsel efektlerde değerleri dönüştürmek için kullanılabilir ve kodun daha esnek ve tekrar kullanılabilir olmasına yardımcı olur.
