Często, Praca z Motywy WordPressa, natknąłem się na animację, utworzone z pomocą Biblioteki JavaScript. Najbardziej popularne, o których myślę, że większość z nich słyszała, kto odwiedza tę stronę jquery. Biblioteka jest świetna, ale zbyt popularna, by pisać o niej jeszcze jeden z setek tysięcy razy. Przenoszę ten pomysł na tych czytelników, którzy prowadzą swoje blogi. Możesz oferować swoje linki w komentarzach.

Z wyjątkiem samej siebie jquery jest o wiele więcej przydatnych i nieznanych wtyczki napisane w tej i innych bibliotekach javascript.

W tym artykule nie chcę szczegółowo opisywać pracy z każdą z wtyczek.. Dziś będzie o tym tylko zarys, czego możesz teraz użyć do opracowania motywów witryny.

Pierwszy animowany tekst strony jquery. Całkowity 5 rodzaje animacji.

Aby pracować z animacją tekstu wtyczki, potrzebujesz:

Biblioteki: jQuery , Interfejs użytkownika jQuery.
Obsługiwane przeglądarki: Firefox 3.x+, Google Chrome2.x+, IE8+, Safari5.x+

Przykład animacji tekstu i samej wtyczki w archiwum:

Świetna animacja i wszystko z CSS3. Animuj ładowanie strony.

Możesz pobrać tutaj:

jAni – alternatywna animacja obrazków w formacie jpeg.

jAni – prosta wtyczka do JQuery który pozwala animować obrazy tła. Wtyczka jest w zasadzie alternatywą animacje GIF, ale z kilkoma zaletami i wadami.

Po pierwsze, zawsze lepiej jest użyć animacji GIF-y zobrazowanie, ponieważ ten format jest obsługiwany przez wszystkie przeglądarki bez kodu JavaScript lub dodatkowe znaczniki, ale format GIF ma również poważną wadę w jakości obrazu. Animowany GIF pozwala tylko na pracę 256 kwiaty, i nie możesz kontrolować animacji tak, jak chcesz. jAni ładuje długie pionowe obrazy, dodaje je do tła bloku i zmienia położenie tła z ustawioną szybkością, co daje większą kontrolę nad animacją.

animacja ciągłego przewijania jquery

Przez długi czas trwały spory o to, jak poprawnie wykonać animację na stronie i wcześniej nie było lepszej alternatywy niż Lampa błyskowa. Wraz z nadejściem Biblioteki JavaScript i nowe możliwości CSS3 wszystko diametralnie się zmieniło. Teraz nie musisz łączyć strony trzeciej w formularzu odtwarzacz Flash. Zawsze szukałem, jak ten rodzaj animacji jest wykonywany w szablonach premium, z ciągłym przewijaniem tła i przesuwaniem obiektu po witrynie. Rozważ doskonałą wtyczkę jQuery.spritely.

Aby skorzystać z biblioteki i wyświetlić wersję demonstracyjną wtyczki, przejdź do oficjalnej strony wtyczki.

Paralaksa

Rok temu skończyłem studia i stworzyłem dla nich stronę internetową, w nagłówku strony użyłem efektu JParallax. Wtedy myślałem, że sprawa jest fajna i długo nic takiego nie zostanie wymyślone. Ostatnio na znanym Habrahabr znalazłem artykuł o tej wspaniałej wtyczce z przykładami jej wykorzystania oraz jej różnymi implementacjami w postaci innych wtyczek. Weź pod uwagę wszystko, co wyrosło z paralaksy i jest często używane w szablonach premium.

Wtyczki do tworzenia efektów paralaksy:

• Suwak obrazu paralaksy jQuery
• Paralaksa obrazu jQuery autorstwa Steve'a Fentona
• przewijająca się paralaksa: Wtyczka jQuery autorstwa Johna Raascha
• Scrollorama autorstwa Johna Polacka
• Scrolldeck autorstwa Johna Polacka
• jParalaksa
• Stellar.js autorstwa Marka Dalgleisha
• Ścieżka przewijania jQuery autorstwa Joela Besady
• Curtain.js autorstwa Victora Coulona
• Plax autorstwa Camerona McEfee

Samouczki dotyczące paralaksy (język angielski)

• Jedna strona internetowa, paralaksa pionowa
• Zbuduj interfejs strony z przewijaniem paralaksy za pomocą jQuery i CSS
• Samouczek paralaksy jQuery — animowane tło nagłówka
• Budowanie ram narracji z przewijaniem paralaksy
• Suwak paralaksy z jQuery

Przykłady paralaksy

• wiosna lato
• być szczęśliwym
• promienie ostre
• fundacja rafaelpombo
• aktywowane napoje

Dla tych, którzy twierdzą, że artykuł jest suchy, przypomnę, że to tylko uwaga dla mnie i może komuś innemu się spodoba. Jeśli masz coś do dodania, Napisz w komentarzach.