Projekty - The Ham
Wersja została wykonana bez użycia biblioteki CSS typu Bootstrap lub Materialize na czystym CSS z dodaniem dynamicznych elementów do JavaScript i podłączeniem dodatkowego slajdu.
Dynamiczne elementy na stronie (JavaScript):
- Pliki w sekcji `Our services` są przesuwane przy naciśnięciu celem.
- Przycisk 'Load more' w sekcji 'Our amazing work' imituje pobieranie z serwera nowych obrazów. Podczas jej naciśnięcia w sekcji poniżej pojawiają się jeszcze 12 obrazów. Następnie przycisk zniknie.
- Przyciski na zakładce 'Our amazing work' są "filtrami produktów". Przy naciśnięciu przycisku kategorii wyświetlane są tylko te obrazy, które należą do tej kategorii. 'All' wyświetla obrazy ze wszystkich kategorii.
- Karusel na zakładce 'What people say about theHam' ma być robotem, klikając zarówno ikonę zdjęcia w dół, jak i strzały w prawo-lewo. W karuselu zmienia się zarówno obraz jak i tekst.
Do podłączenia dynamicznych elementów używano jQuery (Sviper Slider), a także czystego kodu Javascript.
Dynamiczne elementy na stronie (JavaScript):
- Pliki w sekcji `Our services` są przesuwane przy naciśnięciu celem.
- Przycisk 'Load more' w sekcji 'Our amazing work' imituje pobieranie z serwera nowych obrazów. Podczas jej naciśnięcia w sekcji poniżej pojawiają się jeszcze 12 obrazów. Następnie przycisk zniknie.
- Przyciski na zakładce 'Our amazing work' są "filtrami produktów". Przy naciśnięciu przycisku kategorii wyświetlane są tylko te obrazy, które należą do tej kategorii. 'All' wyświetla obrazy ze wszystkich kategorii.
- Karusel na zakładce 'What people say about theHam' ma być robotem, klikając zarówno ikonę zdjęcia w dół, jak i strzały w prawo-lewo. W karuselu zmienia się zarówno obraz jak i tekst.
Do podłączenia dynamicznych elementów używano jQuery (Sviper Slider), a także czystego kodu Javascript.