—»     —»   10 удивительных примеров внедрения анимации на CSS3
  Раздел: Анимация, CSS/Style Sheets   Комментариев: 1  

10 удивительных примеров внедрения анимации на CSS3



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

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

01. Вращающиеся полароиды

10 удивительных примеров внедрения анимации на CSS3

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

Посмотреть демо
Смотреть в Google Chrome или в Safari!

02. The Matrix

10 удивительных примеров внедрения анимации на CSS3

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

Посмотреть демо
Смотреть в Google Chrome или в Safari!

03. Вращающаяся колонка радости

10 удивительных примеров внедрения анимации на CSS3

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

Посмотреть демо
Смотреть в Google Chrome или в Safari!

04. DJ Hero

10 удивительных примеров внедрения анимации на CSS3

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

Посмотреть демо
Смотреть в Google Chrome или в Safari!

05. Трехмерный анимированный куб

10 удивительных примеров внедрения анимации на CSS3

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

Посмотреть демо
Смотреть в Google Chrome или в Safari!

06. Ракета

10 удивительных примеров внедрения анимации на CSS3

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

Посмотреть демо
Смотреть в Google Chrome или в Safari!

07. Снег

10 удивительных примеров внедрения анимации на CSS3

08. Листья

10 удивительных примеров внедрения анимации на CSS3

Давайте смешаем все объекты, ассоциирующиеся с погодой в одно. Если есть скучная анимация, то в ней обязательно должен быть снег, листья, дождь и так далее. Не поймите меня неправильно, но иногда бывает действительно круто применить различные погодные уловки. Тем не менее, конкретно в этом примере, они никак не сочетаются с контекстом сайта. Дайте нам знать, если соберетесь разрабатывать веб-сайт, на котором сильный град разрушит все содержимое страницы. Это будет нечто!

Посмотреть демо со снегом.
Смотреть в Google Chrome или в Safari!
Посмотреть демо с листьями.
Смотреть в Google Chrome или в Safari!

09. Cover Flow

10 удивительных примеров внедрения анимации на CSS3

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

Посмотреть демо
Смотреть в Google Chrome или в Safari!

10. Star Wars Crawl

10 удивительных примеров внедрения анимации на CSS3

Ладно, хватит играть! Конечно, нельзя обделять вниманием других конкурсантов, но явно этот кандидат берет приз! Это начальная сцена из Звездных Войн… в реализации на HTML и CSS. Мы посмеем даже спросить у Вас – может ли быть нечто лучше, чем эта анимация? Думаем, что Вы согласитесь с нами.

Посмотреть демо
Смотреть в Safari + Snow Leopard

Заключение

Если кто-то подумал о том, что это соревнование на самом деле розыгрыш, Вы правы! Мы подумали превратить эту подборку в соревнования с того момента, когда наткнулись на анимацию из Звездных Войн. Но главная цель этого поста заключается в том, чтобы наглядно продемонстрировать Вам современные возможности CSS3.
Не забывайте делиться комментариями! Может Ваше мнение расходится с нашим. И обязательно делитесь другими примерами, если у Вас есть что показать.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, javascript, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 27234   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 12 марта 2012 @ 15:55
Написал: Dima — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вот еще два примера CSS анимации без JS-скриптов.
Только для Safari и Chrome. Количество анимации кушает много ресурсов ЦПУ будьте аккуратны!
http://ganja-bar.veliov.com/full.php - Анимация для Лого
http://ganja-bar.veliov.com/visual.php - Анимация: подобие визуалайзера
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930