10 невероятни примера за иновативна CSS3 анимация
CSS3 внесе редица естетически впечатляващи нови функции. Може би най-забавното от тях да се играе е CSS анимация, която ви позволява да изпълнявате много базирани на движения функции, обикновено делегирани на JavaScript. Присъединете се към моя епичен стремеж да открия най-якото, най-иновативното и по-важното, най-нервното използване на CSS анимацията в мрежата. Започнете!
Внимание: Тези анимации са доста специфични за браузъра, така че ако сърфирате в IE6, време е да спрете да гледате Saved By The Bell, изкопайте връзката за набиране и изтеглете модерен браузър.
Въртящи се поляроиди
Този урок ви показва как да създадете невероятна, анимирана купчина снимки, използвайки множество нови CSS3 команди. Тръгваме към силен старт, този ще бъде трудно да се победи.
Кликнете, за да видите демонстрация
Матрицата
Следвайте белия заек .. ер, искам да кажа, разгледайте тази страхотна анимация на Матрицата. Не съвсем вярно на филма (отделните герои не се променят), но въпреки това впечатляващо. Виждайки как Матрицата е един от най-добрите научнофантастични филми на всички времена (говоря за първия филм, а не за другите две бедствия), този ще скочи до върха на нашия списък и без съмнение ще остане там за известно време, докато не се намери достоен конкурент.
Кликнете, за да видите демонстрация
Тройна въртяща се колона от забавления
Тази луда анимация разполага с въртяща се колона, съставена от въртящи се редове от цветни кутии и текст. Цялостният ефект е лудо готин и безспорно главозамайващ. Този е малко прекален, за да открадне гръмотевицата от Матрицата, но шампионът остава.
Съвет: За увеличен шанс за болест при движение, превъртете нагоре и надолу и клатете главата си напред и назад, докато гледате анимацията (по никакъв начин не сме отговорни за разрушения хардуер, който притежавате, след като хвърляте обяда си по цялото бюро).
Кликнете, за да видите демонстрация
DJ Hero
Този урок съчетава CSS3 и jQuery за създаване на завъртящи се записи. Използвайки екранните контроли, можете да контролирате скоростта на записите или просто да вземете запис с мишката, за да заложите натежали драскотини.
Виртуални грамофони на винтидж дървен фон? Това може да е доста голям конкурент, този дебат се нагрява. Напред, щракнете върху него. Знаеш, че искаш да играеш.
Кликнете, за да видите демонстрация
3D анимирано кубче
Този ви позволява да използвате клавишите със стрелки, за да контролирате въртенето на 3D куб. Отначало мислех, че е доста куца, но след това разбрах, че можеш да задържиш клавишите със стрелки, за да я накараш да изчезнеш и да влезеш в режим на турбо завъртане на смърт, което очевидно го изкупи малко. Мега точки точки за включване и Sonic The Hedgehog.
Кликнете, за да видите демонстрация
Ракета
Ракетен кораб без съмнение, донесен ви от чудесата на MS-Paint, лети по небето със спираща дъха скорост. Сортиране ... В действителност той плава покрай, транспортиран от странно правоъгълно силово поле с пунктирани линии. Около половината път през анимацията ракетата практически изчезва без видима причина, така че очевидно е строго секретна високотехнологична стелт ракета с въоръжено прикриващо устройство, за да се предпази от нахлуващи разрушители на Вулкан.
Не е съвсем сериозен конкурент. Всъщност, защо дори ви показах това? И още по-уместно, има ли такова нещо като разрушител на Вулкан или просто го измислих?
Кликнете, за да видите демонстрация
Метеорологично време
сняг
Листа
Нека да съборим всички неща за времето с едно движение, нали? Там, където има сирна анимация, там също има неизбежният падащ сняг, листа, дъжд и др. Не ме разбирайте погрешно, това е доста готино и може да доведе до някои наистина отлични сезонни модификации на уебсайтове. Тези екзекуции обаче, макар и добре направени, не са толкова креативни с контекст. Кажете ми, ако създадете уебсайт, в който има гигантски градушки, унищожаващи цялото съдържание на страницата, сега това би било нещо.
Кликнете, за да видите демонстрация на сняг
Кликнете, за да видите демонстрацията на листата
Cover Flow
Тази анимация имитира прикрития поток на Apple, използвайки хибридна CSS / jQuery техника като примера на DJ Hero по-горе. Като имитира Apple, този се справя добре както в готините, така и в нелепите категории, а също така върши работа като новатор (това е единственият фалшив CSS3 Cover Flow, който успях да намеря). Имаме още един претендент на ръце.
Кликнете, за да видите демонстрация
Star Wars Crawl
Това е, играта свърши. Бих искал да благодаря на останалите участници за игра, но този взема наградата. Това е встъпителната сцена от Freakin 'Star Wars за плач на глас ... в HTML и CSS (това е текст на живо, който гледате на глупак). Питам ви, каква по-добра употреба на CSS анимацията може да има? Твърдя, че няма такъв. Повярвайте ми, покажете това на най-нервния си приятел и той магически ще се превърне в 4-годишен на Коледа сутрин.
Кликнете върху демонстрацията на Epic View
(Необходимо е сафари + снежен леопард)
заключение
За тези от вас, които смятат, че този конкурс е бил фалшифициран, имате право. Измислих идеята за състезанието, след като намерих примера на Междузвездни войни, само за да подчертая колко всичко останало бледнее за сравнение. Истинското намерение на статията е да ви покаже, че няма край на готините неща, които можете да изградите с относително прости анимационни функции, вградени в CSS3.
Използвайте коментарите по-долу, за да ни уведомите кой е бил любимият ви. Освен това, ако знаете за други примери, моля, споделете ги!
