GIMP. Animacje poklatkowe.

Zadanie 1 (1h) - kontynuacja ćwiczenia z lekcji poprzedniej

1. Utwórz dokument cs391.html, w którym umieścisz kod HTML/CSS/JavaScript generujący stronę zgodnie z wytycznymi poniżej:
2. Część HTML / CSS:
   • Całość projektu umieszczona w bloku o szerokości 80% okna i wysokości 97vh
   • Dla całego bloku tło obrazkowe: fabryka.jpg
   • U góry nagłówek 1 poziomu o treści: HTML + CSS + JavaScript + Grafika (2h)
   • Poniżej nagłówek 2 poziomu o treści: Budujemy pociąg...
   • Oba nagłówki tło białe
   • Poniżej przyklejony do prawej krawędzi bloku głownego formularz o szerokości ok. 20% (dobierz wdług uznania) i białym tle
   • Zawartość formularza jak na OBRAZIE
   • Skład (obraz) pociągu bedzie pokazywany w paragrafie na dole bloku głównego (jak na filmie)
3. Cześć grafika:
   • Korzystając z Materiału ZIP przygotuj elementy graficzne do ćwiczenia
   • Z pliku train.jpg wytnij lokomotywę i dwa wagony.
   • Wszystkie grafiki wyskaluj z zachowaniem współczynnika proporcji i wysokości dokładnie 190 pikseli
   • Lokomotywę przygotuj w dwóch wariantach: zwróconą w lewo i prawo
   • Podobnie jak lokomotywę przygotuj wagon brązowy
   • Wagon biały przygotuj w jednej wersji
4. Część JavaScript:
   • Po załadowaniu/odświeżeniu strony domyślnie zazczona opcja kierunek LEWO
   • Pola wydobu wagonu domyślnie nie zaznaczone
   • Pola tekstowe z wartością domyślną 0 (zero)
   • Wybranie przycisku BUDUJ wywułuje funkcję, która powoduje wyświetlenie elementów graficznych zgodnie z zaznaczonym wyborem w formularzu, na dole bloku głównego (działanie jak na filmie)
5. Jak to działa? FILM.MP4

 

Pytania i odpowiedzi: