Малювання прокруткою сторінок

15

Від автора: ми вже докладно вивчили, як працює лінійне SVG малювання. Це дуже хитрий трюк, пунктирна лінія використовується для обведення, а порожній простір між пунктирами займає всю довжину лінії. І ви можете зменшувати довжину відстані між пунктирними лініями, змушуючи обведення поступово з’являтися і огинати форму об’єкта. Весь процес дуже схожий на малювання.

За допомогою JavaScript можна домогтися забавного ефекту, фігура буде вимальовуватися по ходу прокручування сторінки вниз.

Крок 1: Визначити path

Для створення фігури ми повинні задати path (шлях). Можна малювати різними способами, можна змусити елементи малюватися через шлях. У мене є відео по цій темі. Можливо, вам доведеться вдатися до маленької хитрості і додати векторні точки вздовж вже існуючих прямих.

В моєму демо я копіював координати фігури прямо з ілюстратора. Задайте ідентифікатор шляху, якщо ще не зробили цього:

Крок 2: Знайдіть довжину шляху

// Отримуємо змінну
var path = document.querySelector(‘#star-path’);
// Отримуємо довжину шляху… в цьому демо~577px
var pathLength = path.getTotalLength();

Крок 3: Сховайте фігуру за відстанню між пунктирами

// Робимо дуже довгі пунктири (по суті з довгою шлях)
path.style.strokeDasharray = pathLength + » + pathLength;
// Ховаємо фігуру за дуже довгим відстанню між пунктирами
path.style.strokeDashoffset = pathLength;

Крок 4: При прокручуванні сторінки зменшуємо на відстань % прокручування

// При прокручуванні сторінки…
window.addEventListener. («scroll», function(e) {
// Скільки % прокручено вниз?
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight — document.documentElement.clientHeight);
// Довжина проміжків між пунктирами
var drawLength = pathLength * scrollPercentage;
// Малюємо в зворотному порядку
path.style.strokeDashoffset = pathLength — drawLength;
});

Крок 5: Якщо дійшли до кінця, видаляємо проміжки

Якщо цього не зробити, фігура не буде виглядати настільки чіткою і акуратною, без проміжків.

Малювання прокруткою сторінок

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

// … у самому низу у функції прокрутки
// Коли дійшли до низу, видаляємо масив проміжків, інакше фігура буде нечітка
if (scrollPercentage >= 0.99) {
path.style.strokeDasharray = «none»;
} else {
path.style.strokeDasharray = pathLength + » + pathLength;
}

0.99 з-за математичних похибок. Іноді при поділі не виходить рівно 1.0.

Демо