Skalowalna grafika wektorowa (SVG) to format obrazu zapisany w formacie XML. Za pomocą SVG możesz kodować dwuwymiarową skalowalną grafikę. Następnie możesz je zaimplementować i zmodyfikować w CSS i JavaScript.
SVG pozwala na trzy rodzaje grafiki: kształty wektorowe (proste i zakrzywione linie we wszystkich kierunkach i kształtach), obrazy i tekst. Ze względu na różne możliwości projektanci stron internetowych korzystają z SVG, aby tworzyć złożone animacje. Są łatwe w instalacji, nie tracą jakości przy zmianie rozmiaru i nie wymagają żadnych aplikacji innych firm do działania.
Ponieważ animacje wciąż zyskują na popularności, większość nie zna ich. W tym artykule wyróżnimy 20 fantastycznych animacji SVG, które pokazują potencjał tego formatu.
1. Medyczne ikony SVG według kociąt
Szybkie linki
- 1. Medyczne ikony SVG według kociąt
- 2. Najedź kursorem na SeanMcCaffery
- 3. Pociągnij w dół, aby odświeżyć (papierowy samolot), autor: Nikolay Talanov
- 4. Just Keep Going autorstwa Diaco M. Lotfollahi
- 5. Filtry SVG dodane do wideo HTML5
- 6. Układanka
- 7. Gradient liniowy autorstwa Patrick Young
- 8. Let's Travel autorstwa jjperezaguinaga
- 9. Zegar autorstwa Mohamada Mohebifara
- 10. Animowane ikony autorstwa Luigi De Rosa
- 11. Wszystkie urządzenia w SVG autorstwa Chrisa Gannona
- 12. Wodospad autorstwa Chrisa Gannona
- 13. Generator roślin autorstwa Blake Bowen
- 14. Klikalna ikona Hamisha Williamsa
- 15. Nowe ciasto Marco Barría
- 16. Niszczarka papieru autorstwa Chrisa Gannona
- 17. Low PolyLion firmy GRAYGHOST
- 18. Ładowarka klepsydry autorstwa Leela
- 19. Responsive Cow autorstwa Sarah Drasner
- 20. Student by Domany
- Twoja kolej
Ta ciepła i płynna animacja doskonale nadaje się na każdą stronę związaną ze zdrowiem. Podczas przeglądania różnych wątków obrazy będą subtelnie wyświetlane. Samochód pogotowia lub atom zbuduje, oko otworzy się, a lekarz wyskoczy. Ta animacja pokazuje całą zabawę i dynamikę SVG.
Połączyć
2. Najedź kursorem na SeanMcCaffery
Uniwersalna animacja, którą można umieścić na dowolnej interaktywnej stronie internetowej. Subtelny wygląd granic po najechaniu kursorem pozostawia satysfakcję i zachęca do kliknięcia łącza.
Połączyć
3. Pociągnij w dół, aby odświeżyć (papierowy samolot), autor: Nikolay Talanov
Zwykle strony są odświeżane po „przeciągnięciu” ich. Ta animacja przenosi to na nowy poziom. Kiedy pociągniesz w dół, aby go uwolnić, wystrzelisz papierowy samolot w niebo. Jeśli chcesz, aby użytkownicy często odświeżali Twoją aplikację, zastanów się nad dodaniem takiej animacji.
4. Just Keep Going autorstwa Diaco M. Lotfollahi
Animacja SVG pokazująca potencjał wektora skalowania. Płynny, dokładny ruch ludzkiego ciała jest hipnotyzujący.
Połączyć
5. Filtry SVG dodane do wideo HTML5
Paul Irish z zespołu Google Chrome sprawdził, jak SVG może modyfikować treści poza grafiką wektorową. Połączył CSS i SVG, aby stworzyć niesamowite filtry wizualne, aby pokazać, że animacja SVG może być doskonałym dodatkiem do gotowego filmu.
Połączyć
6. Układanka
Możesz tworzyć niesamowite interaktywne puzzle z animacją SVG. W tym przykładzie możemy wybrać jedno z wielu zdjęć i zobaczyć, jak rozkłada się ono na wiele małych elementów układanki. Możesz to zrekonstruować!
Połączyć
7. Gradient liniowy autorstwa Patrick Young
Jeśli lubisz neony i piękne czcionki, spodoba ci się ta animacja. Ta praca pokazuje, że nie potrzebujesz żadnych ruchomych linii do doskonałej animacji, po prostu świetna czcionka i odpowiedni kod koloru z efektem gradientu.
Połączyć
8. Let's Travel autorstwa jjperezaguinaga
Dwa samoloty i balon na gorące powietrze krążące wokół popularnych zabytków świata. Ta animacja jest kolorowa, optymistyczna i oszałamiająca. Pokazuje wszystko, co możesz zrobić, jeśli jesteś biegły w SVG.
Połączyć
9. Zegar autorstwa Mohamada Mohebifara
Prosta animacja SVG ruchomego zegara pokazująca aktualny czas. Łagodny ruch wskaźników i minimalistyczny design sprawiają, że ta animacja jest cudowna.
Połączyć
10. Animowane ikony autorstwa Luigi De Rosa
Jeśli najedziesz myszką na te ikony, uruchomisz animacje, które są proste, ale skuteczne. Widać, że nie trzeba robić cudów, aby zrobić imponującą animowaną ikonę.
11. Wszystkie urządzenia w SVG autorstwa Chrisa Gannona
Animacja jednorazowa obejmująca wszystkie inteligentne urządzenia, z których korzystamy w najbardziej kreatywny sposób. Pulpit zmieni się w laptopa, laptopa w tablet, a następnie w smartfona.
Połączyć
12. Wodospad autorstwa Chrisa Gannona
Kolejny autorstwa Chrisa Gannona, to zgrabna demonstracja spienionego dna wodospadu. Ruch wody jest czysty i widać małe krople pluskającej wody opuszczające granice animacji, aby wszystko wyglądało bardziej realistycznie.
Połączyć
13. Generator roślin autorstwa Blake Bowen
Teraz to coś innego. Po kliknięciu przycisku „Utwórz” zobaczysz rośliny rosnące i rosnące. Ale za każdym razem, gdy klikniesz, tworzą się różne wzory.
Połączyć
14. Klikalna ikona Hamisha Williamsa
Kolejna interaktywna SVG, która uruchamia animację po kliknięciu na nią. Ta inicjuje animację „Wyślij” po kliknięciu.
Połączyć
15. Nowe ciasto Marco Barría
Ciekawa animacja pokazująca tworzenie ciasta warstwa po warstwie. To imponująca animacja SVG odpowiednia na kartkę urodzinową.
16. Niszczarka papieru autorstwa Chrisa Gannona
Jeśli lubisz oglądać niszczenie papieru, spodoba ci się ta animacja, która przedstawia maszynę do niszczenia papieru przez papier nieograniczoną liczbę razy w płynnej sekwencji.
Połączyć
17. Low PolyLion firmy GRAYGHOST
To oszałamiająca ilustracja i animacja przedstawiająca głowę lwa pojawiającą się i znikającą w postaci animowanych wielokątów.
Połączyć
18. Ładowarka klepsydry autorstwa Leela
Kolejna skuteczna animacja wykorzystująca wyłącznie SVG. Co 5 sekund klepsydra obraca się do góry nogami i rozpoczyna nowy cykl.
Połączyć
19. Responsive Cow autorstwa Sarah Drasner
To zabawna interaktywna animacja, która pozwala kliknąć krowę i przeciągnąć ją wokół Księżyca, podczas gdy zagubiony astronauta patrzy na nią.
20. Student by Domany
Entuzjastyczny uczeń wydaje się gotowy do nauki! To świetna animacja, w której strony książki przewracają się równo. Uczeń nie mruga okiem, ale wciąż jest to idealnie uporządkowana animacja na zakończenie tej listy.
Połączyć
Twoja kolej
Jakie są twoje ulubione animacje SVG nieuwzględnione na tej liście? Udostępnij swoje typy w komentarzach poniżej!
