Від автора: ми вже докладно вивчили, як працює лінійне 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.
Демо
