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

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

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

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

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

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

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

<svg xmlns="http://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>

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

// Получаем переменную <path>
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.

Демо

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree