Анимация SVG элементов с тегом animate

В прошлых статьях мы рассказывали о способах анимации SVG изображений с помощью CSS и JavaScript. Эта статья посвящена возможностям тега animate.


Читать дальше
20 мая 2017, 14:23    Ivan Web-дизайн 0    2    0 0

Анимация SVG с помощью библиотек JavaScript

Векторная графика дает дизайнеру огромные возможности. Все, что раньше рисовалось в редакторе, теперь доступной в разметке. А это означает, что вы можете добавлять эффекты по событию и анимировать рисунки. Мы продолжаем разбирать возможности SVG в редакторе PIXLI.


Читать дальше
17 мая 2017, 14:22    Ivan Web-дизайн 0    4    0 0

Редактор PIXLI. Создаём страничку по-быстрому.

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

На мобильных видах меню приобретает свернутый вид. Чтобы создать такую страницу, потребуется около 15 минут.



Ссылка на видеоурок здесь
Читать дальше
16 мая 2017, 20:14    Юлия Обучающий раздел 0    11    0 0

Эффект первого окна

В этом уроке мы создадим первое окно сайта с интересными эффектами. При загрузке страницы плавно появляется белая обводка окна. По прошествии некоторого времени окно само закрывается и проматывает открытую страницу к следующей области.
Когда пользователь прокручивает страницу вверх, окно снова плавно появляется.



Видеоурок здесь
Читать дальше
15 мая 2017, 09:53    Юлия Обучающий раздел 0    5    0 0

SVG графика и ее возможности

В HTML 5 появился новый тег для отображения и рисования векторной графики. Что же это такое, и какие возможности дает разработчику?


Читать дальше
13 мая 2017, 09:16    Ivan Web-дизайн 0    1    0 0

Эффект увеличительного стекла

Эффект лупы, или retina-эффект, был придуман в Apple. При наведении на изображении вместо курсора мыши появляется изображение лупы с увеличенным фрагментом. Разберемся, как внедрить этот эффект в сайт Pixli.


Читать дальше
10 мая 2017, 17:20    Ivan Web-дизайн 0    1    0 0

Создаем эффект движущихся линий на сайте

Сейчас очень популярен эффект линий, которые «прилипают» к мыши и двигаются вслед за ней. Он реализовывается с помощью плагинаparticle-js. Давайте добавим к сайту, созданному в редакторе PIXLI этот эффект.


Читать дальше
05 мая 2017, 12:46    Ivan Web-дизайн 0    2    0 0

Эффект мерцающих звезд при наведении мыши

Качественно реализованные анимационные эффекты на сайте могут украсить любой дизайн. Для этого они должны быть не навязчивыми, не бросаться в глаза и, тем более, не ослеплять пользователя слишком яркими эффектами. Сегодня мы рассмотрим пример внедрения эффекта звезд, которые появляются на блоке при наведении указателя мыши.

Читать дальше
03 мая 2017, 17:58    Ivan Web-дизайн 1    8    0 +1

Создадим меню сайта. Используем анимацию.

В сегодняшнем уроке мы создадим меню сайта. Меню расположено справа и зафиксировано. Оно плавно выезжает при загрузке страницы, кнопки меню также плавно проявляются. При наведении курсора текст кнопок меняет цвет. При уменьшении размеров экрана меню приобретает свернутый вид.



Видеоурок здесь
Читать дальше
03 мая 2017, 11:29    Юлия Обучающий раздел 1    8    0 +1

Анимация счетчика при прокрутке страницы

Анимированный счетчик сейчас актуален. Посетитель видит показатели в динамике. Так как анимация привлекает внимание, то взгляд пользователя задержится на этом фрагменте. Сегодня мы расскажем, как подключить плагин анимации счетчика jquery.spincrement.js.


Читать дальше
29 апреля 2017, 07:49    Ivan Web-дизайн 0    2    0 0