Анимация SVG-графики при прокрутке страницы

Примеры:

Логотип сайта Volley CLUB

Иконка из коллекции Environmental Flat Bordered Icons

Иконки из коллекции Flat Colored Interface Icons

Установка:

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

Опишу лишь общий смысл, как создать такую анимацию.

Проверяем наличие библиотеки jQuery

Подключаем плагин ScrollMe (в данной теме описаны все его настройки и возможности)

Добавляем классы и атрибуты для элементов SVG и размещаем его в контейнере с классом scrollme, например:

Было:

<div class="myicon">
	<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-ru" viewBox="0 0 512 512">
		<path fill="#fff" d="M0 0h512v512H0z"/>
		<path fill="#0039a6" d="M0 170.7h512V512H0z"/>
		<path fill="#d52b1e" d="M0 341.3h512V512H0z"/>
	</svg>
</div>

</svg>

</div>

Стало:

<div class="scrollme myicon">
	<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-ru" viewBox="0 0 640 480">
		<path class="animateme" data-when="span" data-from="0.5" data-to="0" data-translatex="1300" fill="#fff" d="M0 0h640v480H0z"/>
		<path class="animateme" data-when="span" data-from="0.5" data-to="0" data-translatex="-1300" fill="#0039a6" d="M0 160h640v320H0z"/>
		<path class="animateme" data-when="span" data-from="0.5" data-to="0" data-translatex="1800" fill="#d52b1e" d="M0 320h640v160H0z"/>		
	</svg>
</div>

</svg>

</div>

Все эффекты появления можно посмотреть в теме плагина ScrollMe

Если для анимации требуется объединить несколько <path> в один, то группируем их элементом <g>, например:

<g class="animateme" data-when="span" data-from="0.5" data-to="0" data-translatex="1300">
	<path fill="#fff" d="M0 0h640v480H0z"/>
	<path fill="#0039a6" d="M0 160h640v320H0z"/>
</g>		
<path class="animateme" data-when="span" data-from="0.5" data-to="0" data-translatex="-1300" fill="#d52b1e" d="M0 320h640v160H0z"/>

</g>

Для того чтобы элементы SVG показывались вне его рамки добавляем стиль:

svg:not(:root) { overflow: visible; }

1
2
3

svg:not(:root) {
overflow: visible;
}

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

.animateme { transition: transform 0.5s; }

1
2
3

.animateme {
transition: transform 0.5s;
}
Все настройки и значения делаются на глаз, вы можете менять их , и в зависимости от результата, подгонять под собственные предпочтения

Примеры:

Установка:

Смотрите также:

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