Proszę bardzo :)
Twój kolega w branży web-designu , pracujący na stanowisku UX Designer . Chcę dostrzeć do szerszego kręgu. Jednakże zajmuje się tylko tworzeniem grafiki i nie ma zielonego pojęcia o frontEnd. Dlatego kieruje do cb prośbę. Po krótkich konsultacjach ustalacie plan.
- Strona ma być resposywna. Zgodność do IE 9.
- Strona ma być typu OnePage z zablokowanym scrollem.
- Strona zawiera 3 sekcje. Projekty, Opinie klientów, Kontakt.
- Preload:
- Pomniejszone 4 projektów (jak się nie uda niech pojawia się 1), w odcieniu biało-czarnym jako background na całą stronę, oraz animacja kolejnych literek po zakończeniu, animacja napisu. Napis po środku strony. (sztuczkę z literkami masz w kursie CSS w sekcji freestyle)
- Projekty:
- W sekcji projekty ustalacie, że jego pracę będą backgroundem całej strony i będą się płynnie przewijać co 20 sekund.
- W content pojawia się opis czas realizacji, dla kogo, oraz hashtagi opisujące projekt, zamknięte w border-radius.
- Ilośc projektów jest N. Przez to że jest ich N, narazie proponujesz rozwiązanie AJAX oraz technikę CSS "ghost" Jednakże kolega chciałby w przyszłości mieć panel umożliwiający ich zastosowanie, ale chce coś lekkiego, prostym interfejsem, nie wordpress.
- Kolega Cię informuje, że obrazy są rozdzielczości 4K.
- Twoim zadaniem jest zaimplementowanie odpowiedniego algorytmu, który rozwiąże niniejszy problem.
- Dla uproszczenia dajmy narazie że N = 6.
- Możesz stosować gotowe algorytmy, narzędzia dowolne.
- Sidebar:
- Znajduje się z lewej strony z position fixed, po środku. Znajdują się w nim nav. Z 3 opcjami: Projects, Opinion, Contact. Po najechaniu tekst odrobinę wyjedża. Normalnie są ikonki zamknięte w kole. Po kliknięciu strona płynnie się scrolluje na inną sekcję. Nav dalej zostaje w tym samym miejscu. Scrolla dalej nie ma. (Chodzi o obiekt Scroll)
- Kolega Cię informuje, że ostatnio jego firma przeniosła go na dział modelowania 3D. Przyszłości chciałby mieć kolejną sekcję Models.
- Opinion:
- Opinie pojawią się w formie column o długości 5 i wiersze :2. Oczywiście jest ich N. W jednej klatce, pojawia się 10 opini z krótką notką oraz zdjęciem w kółku firmy lub osoby. Animacja powiększania się kółeczka oraz opacity podczas przeskakiwania do kolejnych opinii.Oczywiście twój kolega chcę mieć tutaj również opcję możliwości dodawania. Na dole przycisk do profilu na linked.in
- Dla uproszczenia dajmy, że N = 20.
- Kontakt.
- Kontakt, plus mapa google zaznaczona z miejscem jego biura, odpowiednio dopasowana pod styl designu.
Po jego wymagań, informujesz go, że to trochę może potrwać. Kolega się zgadza, ale chcę na początek zobaczyć Preload. (To jest w miarę proste) By póżniej w razie czego móc wprowadzić poprawki :). Powodzenia