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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Шаг 4: При прокрутке страницы уменьшаем расстояние на % прокрутки

Шаг 5: Если дошли до конца, удаляем промежутки

Если этого не сделать, фигура не будет выглядеть настолько четкой и аккуратной, как без промежутков.

Я не уверен, почему так происходит. Мне кажется нет смысла играться с количеством промежутков, пытаясь сделать их незаметными, тем более, когда их легко удалить вовсе.

0.99 из-за математических погрешностей. Иногда при делении не получается ровно 1.0.

Демо

Автор: Chris Coyier

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree