JavaScript Kullanarak Kaydırma Tabanlı Metin Opaklığı Geçişlerini Geliştirme

Kaydırma Tabanlı Animasyonlar için Pürüzsüz Görünürlük Efektleri

Etkileşimli web tasarımları genellikle kaydırma gibi kullanıcı eylemlerine göre ayarlanan dinamik öğelere dayanır. Ortak özelliklerden biri kontrol etmektir. opaklık İçerik ortaya çıktıkça ilgi çekici bir deneyim yaratıyor.

Bu yazıda, etkili bir şekilde nasıl kontrol edileceğini araştırıyoruz. metin öğelerinin opaklığı kaydırma sırasında bir div'in içinde. Bu teknik özellikle kaydırmanın farklı aşamalarında önemli içeriği vurgulamak için yararlı olabilir.

Kullanıcı ekranı kaydırdıkça önce bir aralığın görünür hale geldiği ve daha sonra başka bir aralığın kaybolduğu belirli bir kullanım durumuna odaklanacağız. Bu yaklaşım, daha yumuşak geçişler için görünürlük değişikliklerinin zamanlamasını optimize eder.

Mevcut JavaScript kodunu inceleyerek ve geliştirerek, daha kusursuz ve optimize edilmiş kaydırma tabanlı bir kod elde etmeyi hedefliyoruz. opaklık kontrolü manuel ayarlamalara gerek kalmadan. Şimdi koda ve çözüme bakalım.

JavaScript'te Kaydırma Tabanlı Opaklık Kontrolünü Optimize Etme

Sunulan çözümde amaç, opaklık Kullanıcı kaydırma davranışına dayalı olarak bir div içindeki iki metin aralığı. İlk açıklık, yapışkan konumlandırma kullanılarak merkezi olarak konumlandırılırken, ikinci açıklık div'in altına yerleştirilir. Her iki aralığın başlangıç ​​opaklığını sıfıra ayarlayarak amaç, kullanıcı kaydırdıkça aralıkların görünür hale gelmesi ve her bir aralığın farklı noktalarda soluklaşmasıdır. Bu, JavaScript ile kontrol edilebilecek dinamik ve görsel olarak ilgi çekici bir etki yaratır.

Komut dosyası, div'in (aralıkları içeren) görünüm alanına göre konumunu izlemek için bir kaydırma olayı dinleyicisi kullanır. Div'in konumunu elde etmek için "getBoundingClientRect()" yöntemi kullanılır ve bu daha sonra her bir yayılmanın ne zaman kaybolmaya başlayacağını belirleyen önceden tanımlanmış pencere yüksekliği yüzdeleriyle (0,3 ve 0,6 gibi) karşılaştırılır. Opaklığı ayarlamak için hesaplamalar yapılır. Gizli ve görünür durumlar arasındaki geçişin düzgün olmasını sağlamak için her bir aralığın göreceli konumu temel alınır.

Her aralık için opaklık, doğrusal bir enterpolasyon formülü kullanılarak ayarlanır. Bu formül, öğenin başlangıç ​​ve bitiş aralığı arasındaki konumunu (örneğin, görünümün %30 ila %60'ı arasındaki) dikkate alır. Kullanıcı kaydırdıkça opaklık bu aralıkta 0'dan 1'e kadar kademeli olarak artar. Opaklık değerlerinin 1'i aşmamasını veya 0'ın altına düşmemesini sağlamak için "Math.min()" ve "Math.max()" işlevleri kullanılır; bu, geçerli bir geçiş sağlar ve herhangi bir görüntü oluşturma sorununu önler.

Komut dosyası ayrıca aşağıdakileri kullanarak daha optimize edilmiş bir yaklaşım içerir: Kesişme Gözlemcisi API'siÖğelerin görünüm alanına ne zaman girip çıktığını gözlemleyerek sürekli olay dinleyicilerine olan ihtiyacı ortadan kaldırır. Bu, özellikle birden fazla öğenin veya daha karmaşık animasyonların olduğu senaryolar için daha verimli bir çözümdür. Intersection Observer, eşikleri tanımlayarak opaklık değişikliklerinin yalnızca gerektiğinde işlenmesini sağlar, böylece performansı artırır ve gereksiz hesaplamaları azaltır.

// Solution 1: Scroll-Based Opacity with Sticky and Absolute Elements
window.addEventListener('scroll', function() {
  const message = document.querySelector('.message');
  const span1 = document.querySelector('.message > span');
  const span2 = document.querySelector('.vh > span');
  const rect = message.getBoundingClientRect();
  const windowHeight = window.innerHeight;
  const fadeStart1 = windowHeight * 0.3, fadeEnd1 = windowHeight * 0.6;
  const fadeStart2 = windowHeight * 0.5, fadeEnd2 = windowHeight * 0.9;
  // Opacity calculation for span1
  let opacity1 = Math.min(Math.max((fadeEnd1 - rect.top) / (fadeEnd1 - fadeStart1), 0), 1);
  span1.style.opacity = opacity1;
  // Opacity calculation for span2
  let opacity2 = Math.min(Math.max((fadeEnd2 - rect.top) / (fadeEnd2 - fadeStart2), 0), 1);
  span2.style.opacity = opacity2;
});

// Solution 2: Scroll-Based Opacity with Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    const target = entry.target;
    target.style.opacity = entry.intersectionRatio;
  });
}, { threshold: [0, 0.5, 1] });
// Selecting elements for observation
observer.observe(document.querySelector('.message > span'));
observer.observe(document.querySelector('.vh > span'));

// Solution 3: Unit Test for Opacity Control
describe('Scroll Opacity Control', function() {
  it('should update span1 opacity on scroll', function() {
    const span1 = document.querySelector('.message > span');
    window.dispatchEvent(new Event('scroll'));
    expect(span1.style.opacity).not.toBe('0');
  });
  it('should update span2 opacity on scroll', function() {
    const span2 = document.querySelector('.vh > span');
    window.dispatchEvent(new Event('scroll'));
    expect(span2.style.opacity).not.toBe('0');
  });
});

Kaydırma Tabanlı Opaklık Kontrolü için Gelişmiş Teknikler

Kaydırma tabanlı opaklık kontrolünün sıklıkla gözden kaçırılan yönlerinden biri, özellikle birden fazla öğe söz konusu olduğunda performansın optimize edilmesidir. Öğe sayısı arttıkça, opaklığı dinamik olarak ayarlamak için gereken hesaplama, tarayıcıyı zorlayabilir. Burası gibi tekniklerin olduğu yer geri tepme veya kısma yararlı olabilir. Bu yöntemler, kaydırma olaylarının hesaplamaları tetikleme sıklığını sınırlamaya yardımcı olur ve gereksiz güncellemeleri azaltarak web sayfasının genel performansını artırır.

Dikkate alınması gereken bir diğer husus kullanıcı deneyimidir. Kaydırmayla tetiklenen geçişlerin düzgün ve görsel olarak çekici olmasını sağlamak çok önemlidir. Bu CSS kullanılarak başarılabilir geçiş özellikler JavaScript ile birlikte kullanılır. Geçiş zamanlamasını belirleyerek, opaklık değişiklikleri kademeli olarak görünür ve içeriğe daha parlak bir his verir. Bu, web sitesinin kullanılabilirliğini büyük ölçüde artırabilir ve web sitesinin kullanıcı eylemlerine, ani değişikliklerle bunaltmadan yanıt vermesini sağlar.

Ayrıca, bu tür etkileri uygularken erişilebilirliği hesaba katmak önemlidir. Farklı yeteneklere sahip veya yardımcı teknolojiler kullanan kullanıcılar, kayan içerikle etkileşimde bulunmakta zorluk yaşayabilir. Aynı bilgilere erişmek için klavyede gezinme veya ekran okuyucular gibi alternatif yöntemler sunmak, içeriğin herkes tarafından erişilebilir olmasını sağlar. Ekleme ARYA (Erişilebilir Zengin İnternet Uygulamaları) görsel değişiklikleri açıklayan öznitelikler, ekran okuyuculara güvenen kullanıcılar için deneyimi iyileştirebilir.