Рисование SVG-анимации на прокрутке

Определение SVG

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

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

Здесь мы собираемся создать SVG-анимацию при прокрутке мыши. Кажется интересным, это действительно так. перейдите по этой ссылке, чтобы узнать, что у нас получилось https://blitz-mobile-apps.github.io/SVG-Scroll-Fill-JavaScript/

Если вы хотите перейти к коду напрямую, вы можете перейти по нашей ссылке на github https://github.com/Blitz-Mobile-Apps/SVG-Scroll-Fill-JavaScript

Однако, если вы хотите узнать о процедуре, вот она.

HTML и CSS

Шаг 1:

Получите SVG с атрибутом пути

Шаг 2:

Оберните SVG в div, скажем svgDiv.

Шаг 3:

Оберните «svgDiv» в другой div, скажем «parentDiv», и задайте ему высоту, чтобы получить вертикальную прокрутку.

Шаг 4:

Установите цвет обводки (например, синий), важно fill = «none»! Ширина обводки (например, 10 пикселей) и идентификатор в SVG, чтобы использовать его позже в JavaScript.

Шаг 5:

Установите для атрибута position в svgDiv значение fixed, а SVG - значение absolute, чтобы они всегда оставались в центре экрана.

JavaScript

Шаг 1:

Получите длину SVG.

// Get the id of the <path> element and the length of <path>            var path = document.getElementById("myPath");  
var length = path.getTotalLength();

Шаг 2:

Назначьте strokeDashArray и strokeDashOffset для SVG с помощью кода. Самая важная часть, так как она отвечает за заливку штриха в SVG.

// The start position of the drawing            path.style.strokeDasharray = length;
// Hide the path by offsetting dash. Remove this line to show the path before scroll draw
path.style.strokeDashoffset = length;

Шаг 3:

Добавьте прослушиватель событий для прокрутки окна, чтобы мы могли реагировать на прокрутку мыши вниз и находить процент прокрутки, то есть количество выполненной прокрутки вниз

Шаг 4:

Установите SVG strokeDashOffset равным проценту прокрутки, как показано ниже:

strokeDashOffset = pathLength - процент прокрутки

Это гарантирует, что наш SVG заполняется синхронно с прокруткой мыши.

Шаг 5:

Постепенно смещение уменьшается от длины пути до 0, создавая эффект заливки.

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as
// percentage scrolled
window.addEventListener("scroll", fillOnScroll);             function fillOnScroll() {
// This long calculation is just needed to find out the percentage of the webpage that has been scrolled.
// You don't need to worry about it much. Can be used as is all the time.
 var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) /                    (document.documentElement.scrollHeight - document.documentElement.clientHeight);  
// Sets draw to (the progress of scroll multiplied by the length) to find exact offset.
 var draw = length * scrollpercent;
// In downward scroll, simply decreases the strokeDashOffset gradually towards zero.
// Reverse the drawing (when scrolling upwards)                path.style.strokeDashoffset = length - draw;
 // Fancy stuff to show fireworks when svg completes stroke filling (strokeDashOffset = 0)
 if (path.style.strokeDashoffset <= 0) {
if (!document.getElementById("fireworks").classList.value.includes("pyro")) {                        document.getElementById("fireworks").classList.add("pyro")                    }                } else {                    if (document.getElementById("fireworks").classList.value.includes("pyro")) {                        document.getElementById("fireworks").classList.remove("pyro")                    }
}
//

Надеюсь, эта статья поможет вам научиться заполнять SVG при прокрутке.