Анимация декоративных линий

demosourse

Line Maker — это плагин для создания анимационных декоративных линий. Вдохновение возникло после ознакомления с такими дизайнами как 'Uber Brand Experience' и 'Details'.

Line Maker

Нарисовать линии проще простого:

LineMaker.prototype.options = {
	parent: {element: document.body, position: 'prepend'},
	position: 'absolute',
	lines: []
};

К тому же вы можете воспользоваться целым рядом настроек работа которых хорошо видно в демонстрационном примере.

Пример:

(function() {
	var lineMaker = new LineMaker({
			position: 'fixed',
			lines: [
				{top: 0, left: '10%', width: 13, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeInOutSine', delay: 400, direction: 'TopBottom' }},
				{top: 0, left: '30%', width: 16, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeInOutQuad', delay: 100, direction: 'TopBottom' }},
				{top: 0, left: '50%', width: 9, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeInOutQuad', delay: 0, direction: 'TopBottom' }},
				{top: 0, left: '70%', width: 30, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeOutSine', delay: 400, direction: 'TopBottom' }},
				{top: 0, left: '90%', width: 17, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeOutSine', delay: 300, direction: 'TopBottom' }}
			]
	});

	setTimeout(function() {
		lineMaker.animateLinesIn();
	}, 250);
})();

Для корректной работы не забудьте подключить decolines.css к своим стилям.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://tympanus.net/codrops/2016/10/12/animated-decorative-lines/
Перевел: Станислав Протасевич
Урок создан: 3 Октября 2016
Просмотров: 3967
Правила перепечатки

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

^ Наверх ^