Скалабилна векторска графика (СВГ) је формат слике написан у КСМЛ-у. Помоћу СВГ-а можете да кодирате дводимензионалну скалабилну графику. Затим их можете имплементирати и модификовати у ЦСС и ЈаваСцрипт-у.
СВГ омогућава три врсте графике: векторске облике (равне и закривљене линије у свим правцима и облицима), слике и текст. Због својих различитих могућности, веб дизајнери се окрећу СВГ-у да праве сложене анимације. Инсталирају се лако, не губе на квалитету када им се промијени величина и не захтијевају да раде било које треће апликације.
Пошто анимације и даље расту у популарности, већина их није упозната. Овај чланак ће осветлити 20 фантастичних СВГ анимација које показују потенцијал овог формата.
1. Медицинске СВГ иконе од китона
Брзе везе
- 1. Медицинске СВГ иконе од китона
- 2. Задржите показивач миша код СеанМцЦаффери
- 3. Повуците доле да освежите (папирнати авион) Николаја Таланова
- 4. Само наставите даље Диацо М. Лотфоллахи
- 5. СВГ филтри су додани у ХТМЛ5 видео
- 6. Слагалица
- 7. Линер Градиент Патрицк Иоунг
- 8. Путујмо јјперезагуинага
- 9. Сат Мохамад Мохебифар
- 10. Анимиране иконе Луиги Де Роса
- 11. Сви уређаји у СВГ-у од Цхрис Ганнон-а
- 12. Водопад Цхрис Ганнон
- 13. Генератор биља од Блаке Бовен
- 14. Икона која се може кликнути Хамисх Виллиамс
- 15. Нова торта Марца Барриа
- 16. Схреддер за папир од Цхрис Ганнон
- 17. Ниски полиЛион компаније ГРАИГХОСТ
- 18. Утоваривач на сату Леела
- 19. Одзивна крава Сарах Драснер
- 20. Студент од Домани
- Твој ред
Ова топла и глатка анимација је сјајна за било коју веб страницу која се односи на здравље. Док листате кроз различите нити, слике ће се суптилно појавити. Возило хитне помоћи или атом ће конструирати, око ће се отворити и лекар ће искочити. Ова анимација показује сву забаву и динамичност СВГ-а.
Линк
2. Задржите показивач миша код СеанМцЦаффери
Универзална анимација коју можете да поставите на било коју интерактивну веб страницу. Суптилни изглед обруба када се помакнете на вас оставља вас задовољавајући осјећај и позива вас да кликнете на везу.
Линк
3. Повуците доле да освежите (папирнати авион) Николаја Таланова
Обично се странице освежавају када их „повучете“. Ова анимација доводи ово на нови ниво. Када се повучете да бисте је ослободили, лансираћете папирни авион у небо. Ако желите да посетиоци често освежавају вашу апликацију, размислите о додавању анимације попут ове.
4. Само наставите даље Диацо М. Лотфоллахи
СВГ анимација која показује потенцијал вектора Скалирања. Глатко тачно кретање људског тела хипнотизира.
Линк
5. СВГ филтри су додани у ХТМЛ5 видео
Паул Ирисх из тима Гоогле Цхроме прегледао је како СВГ може мењати садржај ван векторске графике. Комбиновао је ЦСС и СВГ да би направио невероватне визуелне филтере како би показао да СВГ анимација може бити добар додатак готовом видео снимку.
Линк
6. Слагалица
Можете направити невероватне интерактивне слагалице са СВГ анимацијом. У овом примеру можемо одабрати једну од многих слика и видети како деконструише многе ситне комаде слагалице. Можете и реконструисати!
Линк
7. Линер Градиент Патрицк Иоунг
Ако сте укључени у неонска светла и прелепе фонтове, уживаћете у овој анимацији. Ово дело показује како вам не требају никакве покретне линије за сјајну анимацију, већ само сјајан фонт и прави код боје са ефектом градијента.
Линк
8. Путујмо јјперезагуинага
Два авиона и балон са врућим ваздухом који се окрећу око популарних светских знаменитости. Ова анимација је шарена, оптимистична и фантастична. Показује све што можете да урадите ако сте вешти у СВГ-у.
Линк
9. Сат Мохамад Мохебифар
Једноставна СВГ анимација покретног сата која приказује тренутно време. Умирујући покрет показивача и минималистички дизајн чине чуда за ову анимацију.
Линк
10. Анимиране иконе Луиги Де Роса
Ако задржите показивач изнад ових икона, покренућете анимације, које су једноставне, али ефикасне. Можете видети да не морате чинити чуда да бисте направили импресивну анимирану икону.
11. Сви уређаји у СВГ-у од Цхрис Ганнон-а
Анимација у једном кораку која иде преко свих паметних уређаја које користимо на најкреативнији начин. Десктоп ће се претворити у лаптоп, лаптоп у таблет, а потом у паметни телефон.
Линк
12. Водопад Цхрис Ганнон
Још један Цхрис Ганнон, ово је уредна демонстрација пенастог дна водопада. Кретање воде је уредно и можете видети мале капљице пљуснуте воде како напуштају границе анимације како би све изгледало што реалније.
Линк
13. Генератор биља од Блаке Бовен
Ово је нешто друго. Када кликнете на дугме 'Цреате', видећете биљке које расту и расту. Али сваки пут када кликнете, формираће се различити узорци.
Линк
14. Икона која се може кликнути Хамисх Виллиамс
Још један интерактивни СВГ који активира анимацију када кликнете на њу. Овај ће покренути анимацију „Пошаљи“ када једном кликнете на њу.
Линк
15. Нова торта Марца Барриа
Занимљива анимација која приказује прављење колача слој по слој. То је импресивна СВГ анимација погодна за рођенданску честитку.
16. Схреддер за папир од Цхрис Ганнон
Ако волите гледати уништавање папира, уживаћете у овој анимацији која неограничено приказује папир који се дрожи на папиру у несметаном редоследу.
Линк
17. Ниски полиЛион компаније ГРАИГХОСТ
Ово је умиљата илустрација и анимација која приказује лавову главу која се појављује и нестаје у облику анимираних полигона.
Линк
18. Утоваривач на сату Леела
Још једна ефикасна анимација која користи само СВГ. Сваких 5 секунди сатни сат ће се окренути наопачке и започети нови циклус.
Линк
19. Одзивна крава Сарах Драснер
Ово је забавна интерактивна анимација која вам омогућава да кликнете на краву и превучете је око месеца док је збуњени астронаут гледа у њу.
20. Студент од Домани
Изгледа да је ентузијастични студент спреман да учи! Одлична је анимација у којој се странице књига уредно окрећу. Нема трептања од ученика, али ово је ипак савршено уредна анимација за закључивање ове листе.
Линк
Твој ред
Које су ваше омиљене СВГ анимације које нису на овој листи? Поделите своје типове у коментарима испод!
