Настанет время, когда вам, возможно, захочется создать видео-презентацию своих услуг или о своей собственной компании. Зачастую в таких ситуациях у людей просто не бывает времени на креативные идеи. Многие также бывают не особо сильны в анимации. Данный набор бесплатных готовых эффектов для Adobe After Effects поможет вам в таких ситуациях. Все эти проекты были разработаны специально, чтобы оградить вас от сложного и нудного процесса разработки, и сохранить ваше драгоценное время. Даже если вы ничего не смыслите в анимации, вы без труда поймете, каким образом можно изменить эти проекты, что позволит вам создать собственную уникальную анимацию. Все эффекты, включенные в набор, были предоставлены креативными дизайнерами в Youtube, так что, не забудьте посетить их каналы в сервисе, чтобы быть в курсе свежих выпусков, новостей и другой полезной информации. Ссылки на скачивание эффектов можно найти в описании видео, которое задал автор под каждым роликом. Если вам хочется больше эффектов, т ... Читать дальше »

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

Платформа автоматически определяет исходные позиции, настраивает скорость рендера и исправляет временные сдвиги в целях смягчить анимацию.


Библиотека весит всего 2.3кб, её можно привязать к другим. Разработчику предоставляется всеобъемлющая документация (подкрепленная примерами работ), а сама работа платформы удивительно быстра.

Требования: Отсутствуют
Совместимость: Все современные браузеры
Веб-сайт: ... Читать дальше »

Вам наверняка понравится сегодняшняя сборка, так как мы постарались отобрать лучшие варианты реализации. Раньше анимации загрузки страниц были довольно скованными и, к тому же, были ограничены лишь GIF-форматом, но в наше время всем доступные современные мощные технологии и браузера (с поддержкой canvas и VML), и теперь мы можем делать даже больше при помощи CSS3 или jQuery. Данные технологии позволяют реализовывать графику с очень гибкими настройками, а сервер предоставляет возможность очень тонкой и четкой генерации графики.

Правда, с помощью CSS3 и jQuery можно создать практически любую графику, но не факт, что любая графика будет работать в старых версиях браузеров. javascript VML и canvas поддерживается spin.js и индикатором активности. jQuery-плагин генерирует графический элемент при помощи VML и SVG. У него со spin.js почти одинаковый функционал. Скрипт очень легкий, и дает возможность использовать прозрачность, а также вносить множество изменений за счет настроек. ... Читать дальше »

Сегодня мы хотим поделиться с вами простым примером Parallax-слайдера контента. Используя CSS animation, мы сможем управлять анимацией каждого отдельного элемента слайдера и создать Parallax-эффект посредством анимации фона самого слайдера.

Такая идея пришла в голову под впечатлением от слайдера, использованного на странице веб-сайта Kendo UI, платформы для разработки современных интерфейсов на HTML. Нам сразу же захотелось воссоздать подобный эффект на собственном примере.

Как это работает

Слайдер состоит из нескольких слайдов, в каждом из которых присутствует элемент h2, абзац, ссылка и отсек для изображения:

В нашем сегодняшнем уроке мы будем заниматься разработкой шестеренок, анимированных посредством CSS3. Результат получится очень милым. Мы использовали слайды CSS3, анимацию и трансформации (rotate) для того, чтобы достичь подобного результата. Пожалуйста, обратите внимание, что данное демо будет работать в Firefox и Chrome / Safari (webkit).


Давайте посмотрим на примеры, и скачаем предложенные исходные файлы:

Посмотреть демо | Скачать архив
Внимание! У вас нет прав для пр ... Читать дальше »

Каждый, кому довелось наблюдать за игрой друзей, или даже играть в игры, которые были выпущены в 80-90-х годах – знает, что такое техника Parallax-скроллинг.

Давайте вспомним такие игры, как Mario Bros, Mortal Kombat, Street of Rage, Turtles in Time, или же оригинальную игру Moon Patrol. Именно тогда, когда определённое количество фоновых слоёв с многочисленными текстурами двигаются на разных скоростях (что и создаёт эффект трехмерного пространства), наблюдается та самая Parallax-техника.

Как вы думаете, почему я заговорил о ретро-играх именно в статье о веб-разработке? Хотелось бы ответить, что «просто они клеевые», но дело не совсем в этом. Parallax-скроллинг – это замечательный дизайнерский концепт, в первую очередь, который активно продвигается в мир веб-дизайна. Одни из первых, кто успешно использовал эту технику – это Nike. Для разработки своего оригинального сайта Nike Better World они решили нанять таких маркетинговых гигантов, как Weiden and Kennedy. ... Читать дальше »

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


Учтите, что этот пример будет работать только в тех браузерах, где имеется поддержка соответствующих CSS-параметров.

HTML-код

Давайте начнем с простого HTML-кода:


Здесь у нас есть 3 простых DIV-элемента. #ballWrapper – это основной DIV, которым будет «обёрнут» шар. Этот div будет определять параметры position и height на экране для шара. Далее, у нас идет элемент #ball, который представляет собой основную разметку ш ... Читать дальше »

Параллакс-эффект, также называемый параллакс-скроллингом, представляет собой особую технику, используемою в первую очередь в компьютерной графике, когда фоновые изображения в перспективе двигаются медленнее, чем двигаются элементы, расположенные на переднем плане. Сегодня подобная техника очень актуальна и распространена в области веб-дизайна. Раньше она была широко применима в игровой индустрии (10-15 лет назад).

В последние годы параллакс-скроллинг все чаще применяется в веб-дизайне. Популярность данного подхода стала расти с тех пор, когда компания Nike обновила дизайн своего сайта, и использовала данную идею. Ниже в подборке вы сможете увидеть данный пример.

Технология эта прижилась в сфере дизайна только потому, что она выглядит действительно креативно и круто. Несмотря на растущую популярность, этот эффект всегда можно реализовать как-то по особому и очень успешно. Иногда, при прокрутке, фоновое изображение также изменяется, но это не обязательное требов ... Читать дальше »

Parallax scrolling (параллакс-скроллинг) создает иллюзию глубины за счет передвижения веб-элементов на разной скорости при прокрутке страницы, и это в значительной степени может помочь завоевать положительное отношение к странице.

Skrollr – это легкая (7 кб в уменьшенном формате и 3 кб при сжатии gzip) и отдельная javascript-библиотека анимации для прокрутки, которая сильно упрощает процесс разработки Parallax-эффекта.


Она позволяет вам анимировать CSS-параметры любого элемента в соответствии с расположением ползунка горизонтального скроллинга. Вам достаточно лишь просто выставить ключевые моменты каждого элемента. Также стоит отметить, что библиотека отлично подойдет дизайнерам, которые не сильны в javascript, так как здесь практически все определяется внутри HTML-элементов, и отсутствует код JS.

Требования: отсутствуют
Совместимость ... Читать дальше »

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


Недавно Пол Хейз (Paul Hayes) использовал этот пример ... Читать дальше »