Рисование прокруткой страницы

Дата публикации: 2015-08-18

От автора: мы уже подробно изучили, как работает линейное SVG рисование. Это очень хитрый трюк, пунктирная линия используется для обводки, а пустое пространство между пунктирами занимает всю длину обводки. И вы можете уменьшать длину расстояния между пунктирными линиями, заставляя обводку постепенно появляться и огибать форму объекта. Весь процесс очень похож на рисование.

При помощи JavaScript можно добиться забавного эффекта, фигура будет вырисовываться по ходу прокрутки страницы вниз.

Шаг 1: Задать path

Для создания фигуры мы должны задать path (путь). Можно рисовать разными способами, можно заставить элементы рисоваться через путь. У меня есть видео по этой теме. Возможно, вам придется прибегнуть к маленькой хитрости и добавить векторные точки вдоль уже существующих прямых.

В моем демо я копировал координаты фигуры прямо из иллюстратора. Задайте идентификатор для пути, если еще не сделали этого:

<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 100.6 107.6" id="star-svg">
  <path id="star-path" fill="none" stroke="black" stroke-width="2"  d=" ... " />
</svg>

</svg>

Шаг 2: Найдите длину пути

// Получаем переменную <path>
var path = document.querySelector('#star-path');

// Получаем длину пути... в этом демо~577px
var pathLength = path.getTotalLength();

// Получаем переменную <path>

var path = document.querySelector('#star-path');

// Получаем длину пути... в этом демо~577px

var pathLength = path.getTotalLength();

Шаг 3: Спрячьте фигуру за расстоянием между пунктирами

// Делаем очень длинные пунктиры (по сути длинной с путь)
path.style.strokeDasharray = pathLength + ' ' + pathLength;

// Прячем фигуру за очень длинным расстоянием между пунктирами
path.style.strokeDashoffset = pathLength;

// Делаем очень длинные пунктиры (по сути длинной с путь)

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

// При прокрутке страницы...

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;
  }