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:

• LESS. Kurs video. Poziom pierwszy. Jak usprawnić pracę z CSS 89,00 zł, (35,60 zł -60%)
• 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%)
• 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