Front-end dla projektu Typo3 napisany przy użyciu HTML/css/js
Strona internetowa o wymiarach 4k (3840 x 2560) składająca się z dwóch głównych części:
- Prezentacja slajdów w Intranecie
- Sekcja (żółta), do której można uzyskać dostęp przez Internet
Cała prezentacja opiera się głównie na zagnieżdżonych instancjach Swiper.js, a kilka elementów zostało zaimplementowanych za pomocą JS.
Cechy projektu
- Istnieje tylko jeden wiersz (rząd) z zagnieżdżonymi pionowymi suwakami (wszystkie oparte na Swiper.js), co w sumie daje iluzja, że kafelki można przesuwać (przewinięty) w sposób przypominający siatkę
- Aby uniknąć przełamania tej iluzji, niektóre domyślne strzałki nawigacyjne są wyłączone - zależy to od aktualnej pozycji suwaka.
- Każdy główny element jest kodowany w różnych wariantach, gdzie tekst lub obraz może znajdować się po lewej lub prawej stronie, u góry lub u dołu, a nawet całość można przesunąć w kierunku prawej krawędzi, np. <section class="przesunięcie w prawy górny róg-w prawo">; wszystko jest zapisane w jednym pliku sass
- Żółte strony dostępne przez internet są w pełni responsywne (RWD) od 3840px do nawet 280px; trudno było wymyślić tak wiele punktów przerwania (pionowych i poziomych), ale w końcu udało się
- Siatka w prawym górnym rogu pokazuje bieżący kafelek w czasie rzeczywistym
- Chociaż główna siatka ma wymiary 4x4, każda sekcja może zawierać więcej niż jeden slajd - napisany przeze mnie mały skrypt sprawdza atrybut grupy danych (np. 0-1, 0-2, 2-2, 2-3 itd.), a następnie maluje odpowiednią płytkę na czarno
Short video presentation