Сортировать статьи по: дате | популярности | посещаемости | комментариям | алфавиту

Анимация с появлением текста на CSS Animations

Сегодня мы хотим рассказать вам о том, как сделать небольшой текстовый эффект при помощи css-анимации и тени текста. Возможно, вы уже встречались с подобной анимацией текста при просмотре, к примеру, трейлеров к фильмам. После просмотра Introducing Briefs (это, конечно, не трейлер к фильму, но превью к очень интересному приложению), мы вдохновились на воссоздание подобного эффекта при помощи CSS.

Анимированная стопка фотографий на CSS3

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

Создаем эффект подпрыгивания при помощи CSS3-анимации

Сегодня мы хотим немного поэкспериментировать с CSS3-анимациями. На этот раз давайте попробуем создать «панель оповещения» с эффектом подпрыгивания. Итак, давайте приступим...

Textillate: гибкие анимации текста на jQuery

Текстовые анимации на сайтах были популярны еще со времен появления Flash, а сегодня широко распространены статичные сайты, которые позволяют выделить основной контент на странице. Тем не менее, если применять этот эффект с умом, то анимированные тексты позволят вам выделить самое важное еще более эффективно. Особенно если использовать jQuery-плагин под названием Textillate.js.

cgSceneGraph: мощная среда разработки анимаций на HTML5 Canvas

cgSceneGraph представляет собой объектно-ориентированную и простую в использовании javascript-среду разработки анимаций, основанную при помощи HTML5 canvas. Она создавалась с учетом профессиональных приложений и игр, работает во всех браузерах и имеет множество встроенных функций вроде создания изображений, текста, кнопок, фигур и так далее.

Lazy Line Painter: SVG-анимации на jQuery

Lazy Line Painter представляет собой довольно оригинальный jQuery-плагин для подготовки и представления SVG-анимаций при помощи jQuery. Он работает с любым SVG-файлом (можно экспортировать любой дизайн из Illustrator), и вы можете просто перетаскивать дизайны в онлайн-генератор, представленный в плагине.

Десятка лучших онлайн-ресурсов для аниматоров

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

ayaSlider: jQuery-слайдер с анимацией

ayaSlider – это гибкий jQuery-плагин с очень простым принципом установки и использования. Слайдер может отображать неограниченное число слайдов, где вы можете использовать HTML-код. Здесь есть несколько опций определения значений easeIn/easeOut, задержкой между каждым слайдом, а также селекторы prev/next.

Эксперимент: 3D галерея изображений

Сегодня мы хотим поделиться с вами еще одним экспериментом: комнатой галереи в 3D. Идея заключалась в том, чтобы создать реалистичную среду для экспозиции изображений при помощи CSS 3D-трансформаций. Изображения «развешаны» на стене, у которой будет окончание. Как только вы достигаете окончания стены, происходит вращение и перенаправление к следующей стене с изображениями. Чтобы придать этой комнате реалистичный вид, у нас будет всего 4 стены и углы. Каждое изображение будет иметь небольшое описание с маленьким шрифтом, при нажатии по которому будет появляться увеличенная версия.

Мобильный интернет: разработка анимации загрузки при помощи SVG

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