Wprowadzenie do animacji w JavaScript!

Do niedawna umieszczenie zaawansowanej animacji na stronie WWW wymagaÅ‚o zastosowania technologii flashowej opracowanej przez firmÄ™ Adobe. Takie rozwiÄ…zanie powodowaÅ‚o wiele zagrożeÅ„, a ponadto konieczna byÅ‚a instalacja dodatkowego oprogramowania. CiÄ…gÅ‚y rozwój możliwoÅ›ci przeglÄ…darek, jÄ™zyka JavaScript oraz HTML umożliwiÅ‚ w koÅ„cu tworzenie nawet bardzo zaawansowanych animacji bez potrzeby korzystania z zewnÄ™trznych narzÄ™dzi.

Jeżeli chcesz siÄ™ nauczyć tworzyć animacje, czerpiÄ…c z możliwoÅ›ci JavaScript, trafiÅ‚eÅ› na wÅ‚aÅ›ciwy podrÄ™cznik. W trakcie lektury kolejnych rozdziaÅ‚ów zdobÄ™dziesz bezcennÄ… wiedzÄ™ na temat biblioteki Velocity.js oraz zasad projektowania ruchu. Potem przejdziesz do praktycznych aspektów pracy z animacjami — dowiesz siÄ™, jak rozdzielić style i logikÄ™, jak zorganizować różne sekwencje animacji oraz jak dodawać efekty. NastÄ™pnie nauczysz siÄ™ animować teksty, korzystać z grafiki wektorowej w formacie SVG oraz zadbasz o wydajność animacji. Ta książka stanowi doskonaÅ‚Ä… lekturÄ™, po której zaskoczysz użytkowników Twoich stron WWW atrakcyjnymi animacjami.

Dzięki tej książce:

• Poznasz bibliotekÄ™ Velocity.js
• Zrozumiesz teoretyczne podstawy projektowania ruchu
• Zaznajomisz siÄ™ z najlepszymi technikami kodowania animacji
• Przygotujesz animacjÄ™ tekstu
• Poznasz format SVG
• Wykonasz atrakcyjny pokaz dla Twoich klientów

Twój unikalny przewodnik po Å›wiecie animacji JavaScript!

---

Julian Shapiro — zaÅ‚ożyciel start-upu oraz deweloper. Obecnie skupia uwagÄ™ na poprawie prezentacji ruchu w internecie. Autor biblioteki Velocity.js, najczęściej używanej do tworzenia animacji JavaScript na stronach WWW. Velocity.js stosowana jest przez takie serwisy, jak np. WhatsApp oraz Tumblr.

 

Osoby które kupowały "Tworzenie animacji z użyciem języka JavaScript", wybierały także:

• CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu 99,00 zÅ‚, (44,55 zÅ‚ -55%)
• CSS3. Kurs video. Poziom pierwszy. Nowoczesne i stylowe strony WWW 59,00 zÅ‚, (26,55 zÅ‚ -55%)
• Sass od podstaw. Kurs video. Budowa kompleksowej strony w oparciu o metodologiÄ™ BEM 47,93 zÅ‚, (22,05 zÅ‚ -54%)
• Zosta 149,00 zÅ‚, (74,50 zÅ‚ -50%)
• Frontend developer. Kurs video. HTML i CSS. Poziom Å›rednio zaawansowany 89,00 zÅ‚, (44,50 zÅ‚ -50%)

• 
• 
• 
• 
• 

Spis treści

Tworzenie animacji z u¿yciem jêzyka JavaScript eBook -- spis tre¶ci

• Podziêkowania
• Wstêp
• Wprowadzenie
• Rozdzia³ 1. Zalety animacji JavaScript
  • Animacje JavaScript a animacje CSS
  • Wspania³a wydajno¶æ
  • Mo¿liwo¶ci
    • Przewijanie strony
    • Odwrócenie animacji
    • Ruch wykorzystuj±cy prawa fizyki
  • Proces ³atwy w utrzymaniu
  • Podsumowanie
• Rozdzia³ 2. Tworzenie animacji za pomoc± Velocity.js
  • Typy bibliotek animacji JavaScript
  • Instalacja jQuery i Velocity
  • Praca z Velocity: podstawy
    • Velocity i jQuery
    • Argumenty
    • W³a¶ciwo¶ci
    • Warto¶ci
    • £±czenie wywo³añ
  • Praca z Velocity: opcje
    • Czas trwania
    • Wyg³adzanie
    • Rozpoczêcie i zakoñczenie
    • Pêtla
    • Opó¼nienie
    • Opcje display i visibility
  • Praca z Velocity: dodatkowe funkcje
    • Odwrócenie animacji
    • Przewijanie
    • Kolory
    • Przekszta³cenia
  • Praca z Velocity: bez jQuery (¶rednio zaawansowane)
  • Podsumowanie
• Rozdzia³ 3. Teoria projektowania ruchu
  • Projekt ruchu poprawia wra¿enia u¿ytkownika
  • U¿yteczno¶æ
    • Konwencja po¿yczania
    • Podgl±d wyników
    • Odwrócenie uwagi, by odegnaæ nudê
    • Wykorzystanie pierwotnych instynktów
    • Uczynienie interakcji instynktownymi
    • Odwzorowanie zasad
    • Redukcja animacji wykonywanych równolegle
    • Redukcja ró¿norodno¶ci
    • Odbijanie animacji
    • Ograniczenie czasu trwania
    • Ograniczenie animacji
  • Elegancja
    • Nie b±d¼ frywolny
    • Jedyna okazja, by byæ frywolnym
    • Pomy¶l o grupie docelowej
    • Wyj¶cie poza nieprzezroczysto¶æ
    • Rozbicie animacji na etapy
    • Rozci±gniêcie animacji
    • Ruch od elementu wyzwalaj±cego
    • Wykorzystanie grafiki
  • Podsumowanie
• Rozdzia³ 4. Praca z animacjami
  • Praca z animacjami CSS
    • Problemy z CSS
    • Kiedy korzystanie z CSS ma sens
  • Technika kodowania: rozdzielenie stylowania od logiki
    • Podej¶cie standardowe
    • Podej¶cie zoptymalizowane
  • Technika kodowania: organizacja sekwencji animacji
    • Podej¶cie standardowe
    • Podej¶cie zoptymalizowane
  • Technika kodowania: dodawanie efektów
    • Podej¶cie standardowe
    • Podej¶cie zoptymalizowane
  • Techniki projektowania
    • Modyfikatory czasu trwania
    • Wykorzystanie narzêdzia Velocity Motion Designer
  • Podsumowanie
• Rozdzia³ 5. Animacja tekstu
  • Standardowe podej¶cie do animacji tekstu
  • Przygotowujemy elementy tekstu do animacji za pomoc± Blast.js
    • Jak dzia³a Blast.js
    • Instalacja
    • Opcja: delimeter
    • Opcja: customclass
    • Opcja: generatevalueclass
    • Opcja: tag
    • Polecenie: cofniêcie
  • Wprowadzanie tekstu do widoku i wyprowadzanie go z niego
    • Zamiana istniej±cego tekstu
    • Rozci±ganie animacji w czasie
    • Wyprowadzanie tekstu z widoku
  • Zmiana indywidualnych elementów tekstu
  • Bardziej wyszukane zmiany tekstu
  • Floresy tekstowe
  • Podsumowanie
• Rozdzia³ 6. Podstawowe informacje o SVG
  • Tworzenie obrazków za pomoc± kodu
  • Jêzyk znaczników SVG
  • Stylowanie SVG
  • Wsparcie dla SVG
  • Animacje SVG
    • Przekazywanie w³a¶ciwo¶ci
    • Atrybuty prezentacyjne
    • Atrybuty pozycyjne a przekszta³cenia
  • Przyk³ad implementacji: animowane logo
  • Podsumowanie
• Rozdzia³ 7. Wydajno¶æ animacji
  • Realia wydajno¶ci stron internetowych
  • Technika: zapobieganie uszkodzeniu uk³adu strony
    • Problem
    • Rozwi±zanie
    • Obiekty elementów jQuery
    • Wymuszanie warto¶ci
  • Technika: seryjne dodawanie elementów do DOM
    • Problem
    • Rozwi±zanie
  • Technika: unikanie wp³ywu na s±siednie elementy
    • Problem
    • Rozwi±zanie
  • Technika: unikanie równoleg³ego wczytywania
    • Problem
    • Rozwi±zanie
      • Rozk³adanie w czasie
      • Sekwencje wielu animacji
  • Technika: nie reaguj w sposób ci±g³y na zdarzenia przewijania i zmiany rozmiaru przegl±darki
    • Problem
    • Rozwi±zanie
  • Technika: redukowanie generowanego obrazu
    • Problem
    • Rozwi±zanie
    • Podstêpne zdjêcia
      • Gradienty CSS
      • W³a¶ciwo¶ci cieniowania
  • Technika: degradacja animacji na starszych przegl±darkach
    • Problem
    • Rozwi±zanie
  • Odnajd¼ w³a¶ciwy próg wydajno¶ci na wczesnym etapie
  • Podsumowanie
• Rozdzia³ 8. Pokaz animacji
  • Zachowanie
  • Struktura kodu
  • Sekcja kodu: Konfiguracja animacji
  • Sekcja kodu: Tworzenie kó³
  • Sekcja kodu: Animacja kontenera
    • Podstawowe informacje o trybie 3D w CSS
    • W³a¶ciwo¶ci
    • Opcje
  • Sekcja kodu: Animacja kó³
    • Funkcje warto¶ci
    • Animacja nieprzezroczysto¶ci
    • Przekszta³cenia animacji
    • Polecenie reverse
  • Podsumowanie