Front-end for a Typo3 project developed with html/css/js
A 4k (3840 x 2560) sized webpage consisting of two main parts:
- The actual presentation of sliding tiles feed internally using intranet
- A section (yellow) that can be accessed via internet
The whole presentation was mainly based on nested Swiper.js instances with several items being imlemented via JS on top of that.
Features
- There's just one row with nested vertical sliders (all based on Swiper.js) which overal gives an illusion that tiles can be swiped (scrolled) in a it's-a-grid like manner
- To avoid breaking this illusion some of the default navigation arrows are disabled - this depeneds on the current slider's position
- Any main element is coded with various variants where text or image can be either on the left or right, top or bottom or even the whole thing can be moved towards the right edge eg. <section class="top right shift-right">; all is stated in one sass file
- Yellow pages, accessible via internet are fully responsive (RWD) from 3840px down to even 280px; it was tough to come up with that many break points (vertical and horizontal) but eventually it was completed
- The top right grid shows the current tile in real time
- Although main grid is 4x4 each section can have more than just one slide - a little script I wrote checks the data-group attribute (eg. 0-1, 0-2, 2-2, 2-3 etc) and then paints the proper tile black
Short video presentation