Ponad 20 pokazów pokazujących zaawansowane efekty JQuery
Niedawno Flash był jedną z podstawowych technologii używanych przez projektantów stron internetowych do dodawania interaktywności do strony internetowej.
Od czasu wprowadzenia iPada, ze względu na brak Flash Playera, w świecie programowania stron internetowych występuje przyspieszenie polegające na zastosowaniu w technologii Flash alternatywnych technologii, takich jak jQuery, Ajax i inne.
Chociaż Flash jest wciąż bardzo potężnym i przydatnym narzędziem, które sprawdza się znakomicie w wielu przypadkach, kilka efektów, które projektanci stron internetowych przyzwyczaili do tworzenia w programie Flash, można równie łatwo zaimplementować za pomocą jQuery.
Oto 21 internetowych pokazów, które pokazują moc jQuery do tworzenia zaawansowanych efektów i interaktywności, które mogą rywalizować z Flash.
1. Flip! Wtyczka jQuery
To demo naśladuje popularną technikę odwracania kart, która może obracać element o 360 stopni wokół własnej osi X lub Y.
2. Wtyczka jQuery Quicksand
Jest to świetna wtyczka do sortowania tablicy elementów / ikon na stronie z ładnymi efektami pojawiania się / zanikania i animacji.
3. ImageFlow
Ta przeglądarka obrazów jest podobna do interfejsu Apple CoverFlow, który stał się tak dobrze znany w różnych produktach i aplikacjach.
4. Tworzenie interaktywnej mapy z jQuery zamiast Flash
To demo łączy moc jQuery z Ajaxem, aby naprawdę stworzyć atrakcyjny interfejs.
5. Porady dotyczące slajdów Za pomocą jQuery i CSS3
Kliknięcie na symbole "+" ujawnia dodatkowe informacje z przyjemnym efektem płynnej animacji.
6. Galeria Zoomer
W tym demo, co wydaje się być regularnym statyczne Galeria obrazów zapewnia dodatkową interaktywność dzięki wielowarstwowemu efektowi powiększenia po najechaniu kursorem na obraz.
7. jQuery Circulate
To demo pokazuje bardzo często używany efekt Flash krążenia obrazu wokół strony - wszystko za pomocą jQuery.
8. Efekt oddalania zdjęcia
To demo wygląda na zwodniczo proste, ale po dokładniejszym zbadaniu okaże się, że jest kilka warstw złożoności efektu pomniejszenia.
9. Przesuwanie skrzynek i podpisów za pomocą jQuery
Tutaj zobaczymy, jak potężne przejścia mogą być tworzone za pomocą jQuery, techniki zarezerwowanej tylko dla programistów Flash.
10. Galeria CSS3 Lightbox
Ta wtyczka wygląda na napisaną specjalnie dla mediów społecznościowych. Przeciągnięcie i upuszczenie zdjęcia na "polu udostępniania" spowoduje otwarcie modalnego okna, które może być interfejsem do wywoływania interfejsu API za pośrednictwem AJAX, co może pozwolić użytkownikowi na udostępnienie zdjęcia w serwisach Flickr, Twitter, Facebook i innych.
11. Tworzenie efektu sesji zdjęciowej Za pomocą jQuery i CSS
Chociaż to demo może na pierwszy rzut oka wyglądać jak cukierek, może to być bardzo potężne narzędzie do pracy z dużymi obrazami w połączeniu z lokalną pamięcią AJAX lub HTML5.
12. Niesamowita nawigacja bąbelkowa
Tutaj programista dobrze wykorzystuje przejścia kolorów i animacje, aby stworzyć bardzo atrakcyjne i interaktywne menu.
13. Piękna nawigacja w tle
W tej demonstracji każda akcja użytkownika uruchamia kilka przejść, które działają w pełni zanurzając użytkownika w interfejsie.
14. AviaSlider
AviaSlider wykorzystuje klasyczne efekty przejścia podobne do Flasha, aby poprawić to, co wydaje się być standardowym interfejsem suwaka.
15. Pokaz slajdów w tle
Animowane tła to jeden z obszarów, w których Flash dominował w projektowaniu stron internetowych. Oto przykład użycia jQuery.
16. Przesuwanie pokazu slajdów
Kolejne wyjątkowe podejście do typowego interfejsu pokazu slajdów. Tutaj autor dodaje przekątną nawigację, aby urozmaicić interfejs i sprawić, by się wyróżniał.
17. jqFancyTransitions
Ta wtyczka może być używana do wyświetlania twoich zdjęć jako pokaz slajdów z fantazyjnymi efektami przejścia podobnymi do Flash.
18. iCarousel - Suwak obrazów w poziomie
Kolejny pokaz slajdów, który dodaje tylko odrobinę łagodności, aby przejścia naprawdę się wyróżniały. Nic dziwnego, że w tym pokazie postanowili zaprezentować seksowne produkty Mac.
19. Tworzenie interaktywnego obrazu z jQuery
To demo może być wykorzystane do korzystania z witryn, w których jest dużo miejsca na ekranie. Kliknięcie sekcji witryny powoduje wyświetlenie modalnego okna, które wyświetla więcej informacji o klikniętej sekcji.
20. Powiększenie w chmurze
Wtyczka, która wygląda na taką, została zaprojektowana z myślą o eCommerce. Chmura Zoom jest łatwa do wdrożenia i może naprawdę zwiększyć wygodę użytkownika.
21. Efekt siatkówki podobny do jabłka
Każdy, kto korzystał z iPhone'a, iPoda touch lub iPada, jest zaznajomiony z "Widokiem siatkówki", który powiększy niewielki obszar ekranu po dotknięciu obszaru przez dłuższy czas. To demo implementuje ten efekt na pulpicie.
Opracowany wyłącznie dla WDD przez Kalim Fleet . Jest profesjonalnym projektantem stron internetowych i blogerem z ponad 6-letnim doświadczeniem. Internet jest jego pasją, ponieważ dzieli swój czas między pisanie blogów, tworzenie oprogramowania i media społecznościowe. Uwielbia używać i opracowywać nowe aplikacje dla sieci, urządzeń przenośnych i komputerów stacjonarnych.
Czy znasz jakieś inne wspaniałe przykłady efektów jQuery, które mogą rywalizować z mocą Flasha? Czy kiedykolwiek sugerujesz efekty jQuery nad Flash, gdy klienci ich zażądają? Podziel się swoimi poglądami i przykładami poniżej!