Full Screen Vertical Scrolling Website with Navigation Dots



For this showcase we used the Swiper Component to create a full screen vertical scrolling page, with vertical navigation dots. You can use your mouse wheel to scroll to the next/previous section. We also added parallax effect to the slides.



Looks stunning @Teodor, assume that was quite simple to create too. How long did it take you to do.


Hi Paul,
took mi like 20mins to setup the page, download and edit the images, write the 10 lines of CSS and upload the showcase :slight_smile:
I am going to setup a tutorial on how to do this with the Swiper - pretty easy actually, set the Swiper height to 100% and enable “Vertical” option. Take a look at the page source - it pretty much explains what i did.


@Teodor looks also nice on Phone!

Hows the Shadow done?


Hi Freddy,

h1 {
text-shadow: 0 0.3rem 0.9rem rgba(0,0,0,.5);


Hi @Teodor
Can you explain how you did the text?