03:34 10 удивительных примеров внедрения анимации на CSS3 | |
| CSS3 привнес в мир веб-дизайна много различных интересных функций, самой интересной из которых, наверное, можно определить анимацию посредством CSS, с помощью которой возможно реализовывать различные эффекты, применяя javascript. И Вы тоже присоединяйтесь к путешествию по изучению и поиску самых интересных вариантов применения этой самой анимации в сети. Начнем! Внимание: Стоит отметить, что анимация может работать неправильно в некоторых браузерах, поэтому если Вы пользуетесь IE6, то мы настоятельно рекомендуем Вам заменить его на более современный браузер. 01. Вращающиеся полароиды  В этой статье рассказывается о создании удивительной анимированной кучи из фотографий, основанной на новых командах CSS3. Мы уверенно выступаем на старт, этот пример действительно сложный. Посмотреть демо Смотреть в Google Chrome или в Safari! 02. The Matrix  Взгляните на эту анимацию из фильма Матрица. Конечно, она не совсем идентична с той, которая в фильме (отдельные символы не меняются), но не менее впечатляющая. В виду того, что этот фильм является одним из лучших в своем стиле за последнее время (мы имеем в виду первую часть, а не то, что было дальше), мы разместили этот пример в верху списка, так как он является достойным примером и кандидатом, как мы посчитали. Посмотреть демо Смотреть в Google Chrome или в Safari! 03. Вращающаяся колонка радости  Эта великолепная анимация представляет собой вращающуюся колонку с крутящимися рядами цветных коробочек с текстом. Этот эффект, несомненно, прикольный и вскружит голову кому угодно. Этот пример совсем немного не достигает лавров эффекта в Матрице, и посему она так и остается вверху списка. Для большего эффекта, Вы можете попробовать наклонить голову в разные стороны, но мы не ручаемся за Ваше здоровье! Посмотреть демо Смотреть в Google Chrome или в Safari! 04. DJ Hero  В этой статье рассказывается сразу и о CSS3 и о jQuery, и о том, как создать крутящиеся пластинки. С помощью крутилок на экране, Вы можете регулировать скорость вращения, а также ухватиться курсором за пластинку и сделать немного скрэтча. Виртуальный ди-джейский стол на деревянном фоне? Это также можно считать достойным кандидатом. Вперед, ознакомьтесь с этим примером. Посмотреть демо Смотреть в Google Chrome или в Safari! 05. Трехмерный анимированный куб  Здесь Вы можете использовать кнопки со стрелками для управления вращением этого трехмерного куба. Поначалу, кажется, что это скучно, но на самом деле, если зажать стрелку, то можно разогнать его до скорости света! Очень круто, особенно если добавить туда всеми любимого ежа Соника! Посмотреть демо Смотреть в Google Chrome или в Safari! 06. Ракета  Этот пример, несомненно, ознакомит Вас со всеми прелестями Microsoft Paint и пронесет по небу на впечатляющей скорости! Примерно на полпути ракета исчезает по непонятным причинам. Видимо, сверхсекретные технологии позволяют ракете незаметно исчезать, чтобы не попасть в лапы врага. Вряд ли этому примеру можно поставить серьезную оценку. На самом деле, мы даже не знаем, зачем показали Вам этот пример. Посмотреть демо Смотреть в Google Chrome или в Safari! 07. Снег  08. Листья  Давайте смешаем все объекты, ассоциирующиеся с погодой в одно. Если есть скучная анимация, то в ней обязательно должен быть снег, листья, дождь и так далее. Не поймите меня неправильно, но иногда бывает действительно круто применить различные погодные уловки. Тем не менее, конкретно в этом примере, они никак не сочетаются с контекстом сайта. Дайте нам знать, если соберетесь разрабатывать веб-сайт, на котором сильный град разрушит все содержимое страницы. Это будет нечто! Посмотреть демо со снегом. Смотреть в Google Chrome или в Safari! Посмотреть демо с листьями. Смотреть в Google Chrome или в Safari! 09. Cover Flow  Эта анимация чем-то напоминает похожий эффект у Apple, который создается при помощи гибридного применения CSS/jQuery, как и в DJ Hero, о котором говорилось выше. Это очень серьезная и удачная имитация Apple, что дает право отнести эту анимацию к разряду инновационных (это единственный пример на CSS3, который нам попался). Посмотреть демо Смотреть в Google Chrome или в Safari! 10. Star Wars Crawl  Ладно, хватит играть! Конечно, нельзя обделять вниманием других конкурсантов, но явно этот кандидат берет приз! Это начальная сцена из Звездных Войн… в реализации на HTML и CSS. Мы посмеем даже спросить у Вас – может ли быть нечто лучше, чем эта анимация? Думаем, что Вы согласитесь с нами. Посмотреть демо Смотреть в Safari + Snow Leopard Заключение Если кто-то подумал о том, что это соревнование на самом деле розыгрыш, Вы правы! Мы подумали превратить эту подборку в соревнования с того момента, когда наткнулись на анимацию из Звездных Войн. Но главная цель этого поста заключается в том, чтобы наглядно продемонстрировать Вам современные возможности CSS3. Не забывайте делиться комментариями! Может Ваше мнение расходится с нашим. И обязательно делитесь другими примерами, если у Вас есть что показать. | |
|
| |
| Всего комментариев: 0 | |
