Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

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

Итак, вводная – нам нужно анимировать некие объекты на экране. Самый просто случай – это когда сам элемент интерфейса и нужно как-то изменять. Например, картинка должна увеличиться при наведении или кнопка должна начать светиться. Это просто, потому что анимируемый элемент уже находится в “DOMе” и ему нужно только поменять свойство, все остальное css сделает за

Коллеция веб демок – анимация, скрипты

Очень приятная коллеция примеров визуальных веб решений – анимация, скрипты. Аж больше 300 штук, собранных отовсюду в сети. Автор конечно проделал большую работу, разумеется большая часть этих примеров так и останется на полках фронтендеров, но для вдохнавления все равно стоит посмотреть 😉 Ссылки по теме: https://github.com/airen/DemoHouse https://airen.github.io/DemoHouse/ Update По какой-то причине автор удалили этот репозиторий,

Вертикальное позиционирование в верстке

Вертикальное позиционирование до сих пор остается непростым маневром для многих верстальщиков. А все потому что нет явного решения! Мы уже десятки лет запускаем космические корабли, а вертикальное позиционирование по-прежнему не имеет явного решения. Давайте посмотрим как можно это порешать разными способами. translate(-50%, -50%) Хорошо поддерживается брузерами (от IE9). Не очень грамостко JS Bin on jsbin.com

CSS библиотека спиннеров – анимации ожидания

Css-loaders – это библиотека спиннеров для анимации ожидания. Это может быть как загрузка данных, обработка запросов, да все что угодно. Картинки вообще не используются (ни гифки, ни svg), вся анимация на css3, соответственно не все браузеры поддерживаются: IE 10+ ✔ Chrome 4.0+ ✔ Firefox 16.0+ ✔ Opera 15.0+ ✔ Safari 4.0+ ✔ Однако, если ваш

Размытие в движении на CSS3 – Motion blur

Порой очень хочется использовать графические эффекты, вроде размытия движения, которого вроде бы нету в CSS3 фильтрах. Можно это дело сымитировать используя тени и анимацию движения. Например вот так: See the Pen Motion Blur by Artem Demo (@artemdemo) on CodePen.

Как далеко можно уйти с событиями CSS – CSS Events

Я думаю, что всем известно, что CSS позволяет реагировать на разного рода события – hover, focus, active – все это псевдо классы, которые достаточно активно используются в клиентской разработке. Однако на этом дело не заканчивается ^_^ Отлавливая события CSS можно делать совершенно невероятные вещи. Например игру, по отстрелу пернатых (Возможно потребуется немного времени для прогрузки

Анимация в ангулар – AngularJS Animation

За анимация в AngularJS отвечает отдельный модуль, который так и называется – ngAnimate. Этот модуль поддерживает как использование css анимации, так и создание своей анимации средствами JavaScript. В этой статье я расскажу об инструментах ангулара для css3 анимации. Для того что бы начать использовать анимацию достаточно просто включить этот модуль в проект и использовать встроенные

Анимация в css3 – css3 animation пример

В этом примере я расскажу о том как использовать анимацию в css3 Полный код примера можно найти здесь.

Анимированное меню – css3 transition пример

В этом видео я показываю пример использования css3 transition. Полный код примера можно найти здесь.

Разница между css transition и css animation

Давайте сегодня поговорим об анимации. Меня уже ни раз просили рассказать о том как работать с ней и в том числе, как применять ее в ангуларе. Однако, для того что бы перейти к “разбору полетов” с фреймворком нужно разобраться с основами. Итак ни для кого уже не является неожиданностью, что css3 поддерживает анимацию. Огромное количество