Заскучали, или просто хотите отвлечься и найти что-нибудь, что удивило и воодушевило бы Вас? Тогда мы представляем Вам подборку невероятных короткометражных анимаций, которые точно Вас удивят! Не так то просто уместить целую историю в пятиминутный ролик, но здесь есть и юмор и история, а также радость и творчество. Не пропустите!

01. Short Animation -ALARM- HD720


02. Fallen Art

... Читать дальше »

Spritely представляет собой плагин для jQuery для создания динамичных персонажей и анимированных фонов при помощи HTML и javascript.

С помощью javascript, можно управлять анимацией посредством событий (кликов и наведений курсором).


Анимированные элементы могут перемещаться по страницы без влияния на любой другой элемент (что может идеально подойти для случаев с вылетающими баннерами), что позволяет странице всегда быть доступной.
Это особенно подходит платформам, которые до сих пор не имеют поддержки Flash. Spritely в таких случаях может быть реальной альтернативой (iPhone, iPad).
Плагин работает во всех популярных браузерах, включая IE6.

Веб-сайт: http://www. ... Читать дальше »

Люди давно заметили, что наблюдение циклично повторяющихся движущихся последовательностей действует на сознание не просто успокаивающе, но даже гипнотически. Ритмичный ход маятника или равномерное течение воды могут запросто ввести человека в транс, способствуя его погружению в мир собственных грёз. Подобный же эффект достигается с помощью разновидности цифровой графики, известной как анимированные .gif-картинки. Чередующийся с определённой частотой набор статичных изображений, например, геометрических фигур, создаёт нечто вроде ощущения просмотра кино. Наблюдать эти "живые" картинки в движении, порождающем фантастически зрелищные эффекты, бывает, действительно, очень интересно. Хотите сами убедиться в этом? Просто прокрутите страницу вниз до галереи .gif-анимации.

Вообще, область применения анимированных .gif-картинок необычайно широка: от построения красивых кнопок навигации и симпатичных веб-иконок до создания величественных цифровых живописных полотен. Простота ... Читать дальше »

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

В демо используются изображения от Криса Уиллиса (Chris Willis). Они распространяются под лицензионным соглашением Attribution 2.0 Generic (CC BY 2.0) License.

Иконки от WPZOOM (распространяются под лицензионным соглашением Attribution-ShareAlike 3.0 Unported License); вы можете скачать их отсюда:
... Читать дальше »

Для большинства графических дизайнеров анимация представляет собой сложнейшую задачу, требующую много усилия, а также дополнительные расширенные навыки. Так было раньше! Ведь теперь есть CrazyTalk Animator, который разработан специально для анимации двумерных изображений, не требуя при этом больших усилий. Любой может без труда загрузить фотографию, картинку или рисованного персонажа, и заставить его, например, говорить!


Демо-версия

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

Google+ сделал большой шаг на пути развития взаимодействия интерфейсов с пользователями, а особенно хочется выделить анимацию интерфейса функции кругов. Я лично считаю, что такой ход вполне заслуживает уважения. Я попробовал реализовать данный эффект анимации посредством jQuery и CSS3. Мне понадобилось всего пару строк кода для применения стилей CSS посредством jQuery: .addClass() и .animation().


Попробуйте открыть эти демо-страницы в одном из современных браузеров. Для наилучшего результата я советую вам использовать Chrome.

Демо 1 | ... Читать дальше »

Технология CSS3 открыла нам бесчисленные возможности, и сегодня мы хотим представить вам руководство по разработке привлекательных страниц, предназначенных для оповещения посетителей о скором открытии веб-сайта, а также о создании заставок на сайт, реализованных посредством анимации в CSS3. Мы немного поиграем с анимацией и постараемся придать жизнь некоторым простым элементам.

Милые фотографии обуви, использованные в первом демо, были сделаны Амирой Алмаджид (Amira Almajid), и полный набор вы можете найти здесь.

Пожалуйста, учтите, что анимации будут работать только в современных браузерах.

Дабы сократить объемы руководства, мы опустили использование CSS-префиксов производителей браузеров, но они прописаны в файле, который вы можете скачать с ... Читать дальше »

Сегодня мы хотим поделиться с вами очередным экспериментом, в котором примет участие свойство CSS – 3D Transform. Идея заключается в том, чтобы отобразить полноэкранную версию изображения путем вращения двух блоков в трехмерном пространстве. Торцы блоков будут вращаться к переднему плану, и впоследствии представят собой изображение на весь экран.

Учтите, что для правильного отображения эффекта, браузер должен поддерживать современные свойства CSS3 (на данный момент лучше всего подойдут Chrome и Safari).

Вы можете ознакомиться с видео данного эффекта здесь: http://www.screenr.com/Onls

Мы также воспользуемся плагином Modernizr для того, чтобы определять, поддержива ... Читать дальше »

Adobe After Effects – это приложение для компоновки, зачастую применяемое в процессе создания визуальных эффектов и графики в движении. Основной функцией приложения является наложение и обработка пост-эффектов на видео. Оно позволяет пользователям анимировать и обрабатывать медиа-файлы как в двумерном, так и в трехмерном пространстве посредством встроенных инструментов и дополнительных плагинов. С помощью Adobe After Effects вы можете создавать привлекательные визуальные эффекты. Данное приложение является действительно мощным и впечатляющим.

Сегодня мы хотим предложить вам подборку из 20 бесплатных шаблонов для Adobe After Effects. Эти бесплатные шаблоны позволяют вам представить заголовок, изображение, слоганы или даже логотип компании. Вы также можете использовать данные шаблоны для разработки для продвижения и рекламы события или медийного продукта. Готовые шаблоны помогут вам избежать самого нудного процесса разработки и сэкономить кучу рабочего времени. К неко ... Читать дальше »

CSS-переходы и трансформации предлагают множество возможностей для анимации HTML-элементов. Если вы хотите воспользоваться ими посредством jQuery, то jQuery Transit спешит вам на помощь.
Это плагин для реализации CSS-переходов и трансформаций с синтаксисом подобным .animate, который поддерживает большинство методов и оборудован функционалом jQuery (обратные вызовы, составление цепи, автоматическая установка префиксов для браузеров и многое другое).


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

Также следует отметить отсутствие совместимости со старыми версиями браузеров, так как здесь применяются современные правила и технологии CSS3 (в отличие от .animate). Но здесь представлены отличные откаты, либо вы можете вручную переключить плагин на покадровое воспроизведение анимации.

... Читать дальше »