Анимированные буквы

demosourse

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Данная идея возникла в результате впечатлений от данного примера.

HTML

Если присмотреться к приведённому примеру, то можно увидеть, что некоторые буквы обрисовывается с разных сторон. Для каждой анимации потребуется создать отдельный элемент страницы. К примеру, буква “L” будет состоять из двух контейнеров: вертикальной и горизонтальной линии:

<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
   <!--W-->
   <g class="letter letter--1">
       <g class="letter__part">
           <path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
           <path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
           <path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
       </g>
   </g>
   <!--I-->
   <g class="letter letter--2">
       <g class="letter__part">
           <path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
           <path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
           <path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
       </g>
   </g>
   <!--L-->
   <g class="letter letter--3">
       <g class="letter__part">
           <path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
           <path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
           <path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
       </g>
       <g class="letter__part">
           <path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
           <path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
           <path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
       </g>
   </g>
   <!-- ...and so on -->
</svg>

Мы добавили несколько классов чтобы лучше различать SVG изображения.

CSS

В стилях самое главное — значение “butt” для свойства stroke-linecap, что нужную изначальную позицию отображения буквы.

/* Main SVG */

.letters {
	position: relative;
	display: block;
	min-height: 400px;
	max-height: 70vh;
	margin: 0 auto;
}


/* Letter path */

.letter__layer {
	fill: none;
	stroke-miterlimit: 3;
	stroke-linecap: butt;
	stroke-linejoin: bevel;
}

/* Styles for effect 1 */

.letters--effect-1 .letter__layer:first-child {
	stroke-width: 9px;
}

.letters--effect-1 .letter__layer:nth-child(2) {
	stroke-width: 9.5px;
}

.letters--effect-1 .letter__layer:nth-child(3) {
	stroke-width: 10px;
}


/* Effect 1 colors */

.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }

JavaScript

Благодаря animate.js и ряду задержек, которые применяются для анимации букв мы достигли нужного нам эффекта.

Phrase.prototype.options = {
	pathOpacityAnim: false,
	outAnimation: {
		translateY: [0, 15],
		opacity: [1, 0],
		duration: 250,
		easing: 'easeInOutQuad'
	},

	inAnimation: {
		properties: {
			translateY: {
				value: [-30, 0],
				duration: 900,
				elasticity: 600,
				easing: 'easeOutElastic'
			},
			opacity: {
				value: [0, 1],
				duration: 500,
				easing: 'linear'
			},
		},
		delay: 40 // задержка для букв.
	},
	// Настройки анимации обводки
	pathAnimation: {
		duration: 800,
		easing: 'easeOutQuint',
		delay: 200 // задержка
	}
};

Надеемся, что данный пример будет вам полезен!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://tympanus.net/codrops/2016/09/13/fancy-svg-letter-animation/
Перевел: Станислав Протасевич
Урок создан: 28 Мая 2017
Просмотров: 22618
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^