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.

SEE SHOWCASE HERE

3 Likes

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

1 Like

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.

4 Likes

@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);
}
3 Likes

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

Hi Teodor, any tutorial about this project?

1 Like