Анімація іконок, шаблони css3

У цій статті розглянемо як анімувати іконки, точніше будь-яку SVG-графіку. SVG-графіка - це масштабована векторна графіка, яку можна використовувати безпосередньо в коді сторінки сайту. Перевага перед іншими видами графіки в тому, що при збільшенні розмірів картинки - якість не втрачається.

SVG-іконки можна знайти на багатьох сайтах, як платні, так і безкоштовні. Я зазвичай користуюся iconfinder.com і flaticon.com

Ну, ось - іконки обрані і завантажені на комп'ютер. Тепер починається робота, щоб іконки почали "оживати". Насамперед заходимо на github.com і викачуємо два файли jquery.lazylinepainter-1.5.1.min.js і rAF-polyfil.js. Підключаємо їх, як зазвичай перед закриває тегoм . Також підключаємо бібліотеку jquery і свій, поки що порожній файл main.js.

Втім, три останніх можна об'єднати в один.

Залишилося в HTML-коді прописати одну сходинку:

Якщо на сторінці використовується кілька анімованих ікон, то в об'єкт, який вказує шлях до SVG-графіку - pathObj необхідно внести измения, наприклад pathObj1, pathObj50 (обов'язково в обох рядках коду).

Можна змінювати час анімації, затримку початку анімації, кольору і розміри ліній для кожної ділянки "промальовування". Для прикладу нижче приведена частина коду з даними змінами.

Залишилося подивитися як все це виглядає в реальності, на живому прикладі. а хто готовий застосувати це в життя пропоную скачати архівчік з цим прикладом.

Також на цю тему ви можете почитати: