Lichtenfels, 4k, german

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:

1. Prezentacja slajdów w Intranecie
2. 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