Ritināšanas teksta necaurredzamības pāreju uzlabošana, izmantojot JavaScript

Vienmērīgas redzamības efekti ritināšanas animācijām

Interaktīvie tīmekļa dizaini bieži balstās uz dinamiskiem elementiem, kas tiek pielāgoti, pamatojoties uz lietotāja darbībām, piemēram, ritināšanu. Viena kopīga iezīme ir kontrole necaurredzamība saturam, kad tas parādās, radot saistošu pieredzi.

Šajā rakstā mēs izpētām, kā efektīvi kontrolēt teksta elementu necaurredzamība iekšā div ritināšanas laikā. Šis paņēmiens var būt īpaši noderīgs, lai uzsvērtu svarīgu saturu dažādos ritināšanas posmos.

Mēs koncentrēsimies uz konkrētu lietošanas gadījumu, kad viens diapazons kļūst redzams vispirms, bet cits izzūd, lietotājam ritinot tālāk. Šī pieeja optimizē redzamības izmaiņu laiku, lai pārejas būtu vienmērīgākas.

Pārskatot un uzlabojot pašreizējo JavaScript kodu, mūsu mērķis ir panākt vienmērīgāku un optimizētāku ritināšanu. necaurredzamības kontrole bez nepieciešamības veikt manuālus regulējumus. Iedziļināsimies kodā un risinājumā.

Ritināšanas necaurredzamības kontroles optimizēšana JavaScript

Piedāvātajā risinājumā mērķis ir pārvaldīt necaurredzamība divi teksta apgabali div, pamatojoties uz lietotāja ritināšanas uzvedību. Pirmais laidums ir novietots centrā, izmantojot lipīgo pozicionēšanu, bet otrais laidums ir novietots divvirzienu apakšā. Iestatot abu laidumu sākotnējo necaurredzamību uz nulli, mērķis ir, lai diapazoni kļūtu redzami, lietotājam ritinot, katram diapazonam izzūdot dažādos punktos. Tas rada dinamisku un vizuāli saistošu efektu, ko var kontrolēt ar JavaScript.

Skripts izmanto ritināšanas notikumu uztvērēju, lai pārraudzītu div (kas satur laidumus) pozīciju attiecībā pret skata portu. Metode "getBoundingClientRect()" tiek izmantota, lai iegūtu div pozīciju, kas pēc tam tiek salīdzināta ar iepriekš definētiem loga augstuma procentiem (piemēram, 0,3 un 0,6), kas nosaka, kad katrs laidums sāk izzust. Tiek veikti aprēķini, lai pielāgotu necaurredzamību. katra laiduma, pamatojoties uz tā relatīvo stāvokli, nodrošinot, ka pāreja starp slēpto un redzamo stāvokli ir vienmērīga.

Katram laidumam necaurredzamību noregulē, izmantojot lineāro interpolācijas formulu. Šī formula ņem vērā elementa pozīciju starp sākuma un beigu diapazonu (piemēram, no 30% līdz 60% no skata loga). Lietotājam ritinot, šajā diapazonā necaurredzamība pakāpeniski palielinās no 0 līdz 1. Funkcijas "Math.min()" un "Math.max()" tiek izmantotas, lai nodrošinātu, ka necaurredzamības vērtības nepārsniedz 1 vai nav zemākas par 0, kas nodrošina derīgu pāreju un novērš jebkādas renderēšanas problēmas.

Skripts ietver arī optimizētāku pieeju, izmantojot Intersection Observer API, kas novērš nepieciešamību pēc nepārtrauktiem notikumu klausītājiem, novērojot, kad elementi ieiet skata logā vai iziet no tā. Tas ir efektīvāks risinājums, jo īpaši scenārijiem ar vairākiem elementiem vai sarežģītākām animācijām. Nosakot sliekšņus, krustojuma novērotājs nodrošina, ka necaurredzamības izmaiņas tiek apstrādātas tikai nepieciešamības gadījumā, tādējādi uzlabojot veiktspēju un samazinot nevajadzīgus aprēķinus.

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

Uzlabotas metodes ritināšanas necaurredzamības kontrolei

Viens bieži aizmirsts uz ritināšanas necaurredzamības kontroles aspekts ir veiktspējas optimizēšana, it īpaši, ja ir iesaistīti vairāki elementi. Palielinoties elementu skaitam, aprēķini, kas nepieciešami, lai dinamiski pielāgotu necaurredzamību, var noslogot pārlūkprogrammu. Šeit ir tādas metodes kā atkāpšanās vai droseles var būt noderīga. Šīs metodes palīdz ierobežot ritināšanas notikumu aktivizēšanas biežumu, uzlabojot tīmekļa lapas vispārējo veiktspēju, samazinot nevajadzīgos atjauninājumus.

Vēl viens aspekts, kas jāņem vērā, ir lietotāja pieredze. Ir svarīgi nodrošināt, lai ritināšanas aktivizētās pārejas būtu vienmērīgas un vizuāli pievilcīgas. To var panākt, izmantojot CSS pāreja īpašības kombinācijā ar JavaScript. Norādot pārejas laiku, necaurredzamības izmaiņas parādās pakāpeniski, piešķirot saturam noslīpētāku sajūtu. Tas var ievērojami uzlabot vietnes lietojamību, liekot tai reaģēt uz lietotāja darbībām, nepārslogojot viņus ar pēkšņām izmaiņām.

Turklāt, īstenojot šādus efektus, ir svarīgi ņemt vērā pieejamību. Lietotājiem ar dažādām spējām vai palīgtehnoloģiju lietotājiem var būt grūtības mijiedarboties ar ritināmo saturu. Nodrošinot alternatīvas metodes, lai piekļūtu tai pašai informācijai, piemēram, tastatūras navigācija vai ekrāna lasītāji, tiek nodrošināts, ka saturs ir pieejams ikvienam. Pievienošana ARIA (Pieejamas bagātinātās interneta lietojumprogrammas) atribūti, lai aprakstītu vizuālās izmaiņas, var uzlabot pieredzi lietotājiem, kuri paļaujas uz ekrāna lasītājiem.