Full Screen Vertical Scrolling Website with Navigation Dots

featured

#1

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.

SEE SHOWCASE HERE


#2

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


#3

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.


#5

@Teodor looks also nice on Phone!

Hows the Shadow done?


#6

Hi Freddy,

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

#7

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