Меню сайта

Знакомимся с библиотекой Anime.js

19.02.2018 MSRocker

Anime.js - библиотека создана для создания различных анимаций для SVG-картинок, DOM-объектов и свойств CSS.

Для начала нам потребуется svg-картинка которую можно найти в интернете, либо нарисовать самому в Adobe Illustrator или в CorelDRAW и сохранить ее обязательно в формате .svg.

Теперь открываем наше SVG-изображение через редактор кода и увидите приблизительно такую картину:

Нас интересует весь код в пределах <свг> и мы его копируем и вставляем в нужную вам часть сайта.

Чтобы начать работу с самим изображением нам потребуется установить саму библиотеку.

	
	

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

use strict;

var lineDrawing = anime({
	targets: document.querySelectorAll(.letter, polygon, line),
	strokeDashoffset: [anime.setDashoffset, 0],
	easing: easeInOutCubic,
	duration: 4000,
	begin: function(anim) {
		var	letters = document.querySelectorAll("path"), i,
			polygons = document.querySelectorAll("polygon"),
			lineWhite = document.querySelectorAll("line");

		for (i = 0; i < letters.length; ++i) {
			letters[i].setAttribute("stroke", "black");
			letters[i].setAttribute("fill", "none");
		}
		for (i = 0; i < polygons.length; ++i) {
			polygons[i].setAttribute("stroke", "black");
			polygons[i].setAttribute("fill", "none");
		}
		for (i = 0; i < lineWhite.length; ++i) {
			lineWhite[i].setAttribute("stroke", "black");
		}
	},
	complete: function(anim) {
		var	letters = document.querySelectorAll("path"), i,
			triangle = document.querySelector(".triangle"),
			backLogo = document.querySelector(".backLogo"),
			polygons = document.querySelectorAll(".poly"),
			lineWhite = document.querySelectorAll("line");
    
		for (i = 0; i < letters.length; ++i) {    
		letters[0].setAttribute("fill", "#F59A31");  
		letters[i].setAttribute("fill", "#000000");
		letters[i].setAttribute("stroke", "none");
		}
    		for (i = 0; i < polygons.length; ++i) { 
			polygons[i].setAttribute("stroke", "none");
		}
		for (i = 0; i < lineWhite.length; ++i) {    
			lineWhite[i].setAttribute("style", "fill: none; stroke: #FFFFFF; stroke-width: 15; stroke-miterlimit: 10;");
		}
		backLogo.setAttribute("fill", "#000");

		triangle.setAttribute("fill", "#323232");      
		triangle.setAttribute("stroke", "white");
		triangle.setAttribute("stroke-width","15");

		polygons[0].setAttribute("fill", "#BB582E");
		polygons[1].setAttribute("fill", "#804934");
		polygons[2].setAttribute("fill", "#BB582E");
		polygons[3].setAttribute("fill", "#804934");
		polygons[4].setAttribute("fill", "#F4A932");
		polygons[5].setAttribute("fill", "#F59A31");
		polygons[6].setAttribute("fill", "#F4A932");
		polygons[7].setAttribute("fill", "#F7BE55");
		polygons[8].setAttribute("fill", "#FDD164");
		polygons[9].setAttribute("fill", "#FDD164");
	},
	autoplay: true
});

Заполните форму

и наш специалист перезвонит Вам в течение 5 минут, чтобы ответить на все Ваши вопросы

Или позвоните нам

+38 068 720 22 91