Tworzenie animacji z użyciem języka JavaScript - Helion

ebook
Autor: Julian ShapiroTytuł oryginału: Web Animation using JavaScript: Develop & Design (Develop and Design)
Tłumaczenie: Mirosław Gołda
ISBN: 978-83-283-1575-4
stron: 160, Format: ebook
Data wydania: 2015-11-24
Księgarnia: Helion
Cena książki: 19,20 zł (poprzednio: 34,29 zł)
Oszczędzasz: 44% (-15,09 zł)
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
- Praca z animacjami CSS
- 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