Покращення непрозорості переходів тексту на основі прокручування за допомогою JavaScript

Ефекти плавної видимості для анімації на основі прокручування

Інтерактивні веб-дизайни часто покладаються на динамічні елементи, які налаштовуються відповідно до дій користувача, наприклад прокручування. Однією спільною рисою є керування непрозорість вмісту, коли він потрапляє в поле зору, створюючи захоплюючий досвід.

У цій статті ми досліджуємо, як ефективно контролювати непрозорість текстових елементів всередині div під час прокручування. Цей прийом може бути особливо корисним для підкреслення важливого вмісту на різних етапах прокручування.

Ми зосередимося на конкретному випадку використання, коли спочатку стає видимим один проміжок, а інший зникає згодом, коли користувач прокручує далі. Цей підхід оптимізує час зміни видимості для плавніших переходів.

Переглядаючи та покращуючи поточний код JavaScript, ми прагнемо досягти більш бездоганної та оптимізованої системи прокручування контроль непрозорості без необхідності ручного налаштування. Давайте зануримося в код і рішення.

Оптимізація керування непрозорістю на основі прокручування в JavaScript

У наданому рішенні метою є керування непрозорість двох текстових проміжків у div на основі поведінки користувача при прокручуванні. Перший проміжок розташовується по центру за допомогою фіксованого позиціонування, тоді як другий проміжок розміщується внизу div. Встановлюючи початкову непрозорість обох проміжків на нуль, мета полягає в тому, щоб проміжки ставали видимими під час прокручування користувачем, причому кожен проміжок зникав у різних точках. Це створює динамічний і візуально привабливий ефект, яким можна керувати за допомогою JavaScript.

Сценарій використовує прослуховувач подій прокручування, щоб контролювати положення div (містить діапазони) відносно вікна перегляду. Метод getBoundingClientRect() використовується для отримання положення div, яке потім порівнюється з попередньо визначеними відсотками висоти вікна (наприклад, 0,3 і 0,6), які визначають, коли кожен діапазон починає зникати. Розрахунки проводяться для налаштування непрозорості кожного діапазону на основі його відносного положення, забезпечуючи плавний перехід між прихованими та видимими станами.

Для кожного діапазону непрозорість регулюється за допомогою формули лінійної інтерполяції. Ця формула враховує положення елемента між початковим і кінцевим діапазонами (наприклад, між 30% і 60% вікна перегляду). Коли користувач прокручує, непрозорість поступово збільшується від 0 до 1 у цьому діапазоні. Функції `Math.min()` і `Math.max()` використовуються для того, щоб значення непрозорості не перевищували 1 і не опускалися нижче 0, що забезпечує дійсний перехід і запобігає будь-яким проблемам візуалізації.

Сценарій також містить більш оптимізований підхід за допомогою Intersection Observer API, що усуває потребу в безперервних слухачах подій, спостерігаючи, коли елементи входять у вікно перегляду або виходять з нього. Це більш ефективне рішення, особливо для сценаріїв із кількома елементами або складнішою анімацією. Визначаючи порогові значення, Intersection Observer гарантує, що зміни непрозорості обробляються лише за необхідності, таким чином покращуючи продуктивність і зменшуючи непотрібні обчислення.

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

Розширені методи керування непрозорістю на основі прокручування

Одним із аспектів керування непрозорістю на основі прокручування, який часто забувають, є оптимізація продуктивності, особливо коли задіяно кілька елементів. Зі збільшенням кількості елементів обчислення, необхідні для динамічного налаштування непрозорості, можуть створювати навантаження на браузер. Тут люблять техніку відбій або дроселювання може бути корисним. Ці методи допомагають обмежити частоту, з якою події прокручування запускають обчислення, підвищуючи загальну продуктивність веб-сторінки за рахунок зменшення непотрібних оновлень.

Іншим аспектом, який слід враховувати, є досвід користувача. Важливо переконатися, що переходи, які запускаються прокручуванням, є плавними та візуально привабливими. Цього можна досягти за допомогою CSS перехід властивості в поєднанні з JavaScript. Якщо вказати час переходу, зміни прозорості відображатимуться поступово, надаючи вмісту більш відшліфованого відчуття. Це може значно підвищити зручність використання веб-сайту, завдяки чому він реагує на дії користувачів, не перевантажуючи їх різкими змінами.

Крім того, при реалізації таких ефектів важливо враховувати доступність. Користувачам із різними здібностями або користувачам допоміжних технологій може бути важко взаємодіяти з прокручуваним вмістом. Надання альтернативних методів доступу до тієї самої інформації, таких як навігація з клавіатури або програми зчитування з екрана, забезпечує доступність вмісту для всіх. Додавання АРІЯ Атрибути (Accessible Rich Internet Applications) для опису візуальних змін можуть покращити роботу користувачів, які покладаються на програми зчитування з екрана.