Pure CSS Full Window Page Slider with Folder Tab Navigation

Category: CSS & CSS3 , Slider | November 10, 2015
Author: Octavector
Views Total: 1,566 views
Official Page: Go to website
Last Update: November 10, 2015
License: MIT

Preview:

Pure CSS Full Window Page Slider with Folder Tab Navigation

Description:

A cool pure CSS fullscreen page slider concept that enables the visitor to switch between page slides through hovering over the folder tab navigation.

How to use it:

Add full page tabs into the html document.

<div id="tab0"></div>
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>

Make the tabs full window.

html, body {
  height: 100%;
  margin: 0;
}

.tab, #tab0, #tab1, #tab2, #tab3, #tab4 {
  height: 100%;
  position: absolute;
  box-shadow: 6px 0px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}

The primary CSS styles.

.tab:hover ~ div, #tab0:hover ~ div, #tab1:hover ~ div, #tab2:hover ~ div, #tab3:hover ~ div, #tab4:hover ~ div { transform: translateX(-80vw); }

#tab0 {
  width: 100vw;
  background: black;
}

#tab1 {
  width: 95vw;
  background: #31152B;
}

#tab1::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #31152B;
  border-radius: 0 20px 20px 0;
  top: 75%;
  right: -4vw;
}

#tab2 {
  width: 90vw;
  background: #723147;
}

#tab2::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #723147;
  border-radius: 0 20px 20px 0;
  top: 50%;
  right: -4vw;
}

#tab3 {
  width: 85vw;
  background: #CC4452;
}

#tab3::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #CC4452;
  border-radius: 0 20px 20px 0;
  top: 25%;
  right: -4vw;
}

#tab4 {
  width: 80vw;
  background: #E6B098;
}

#tab4::after {
  content: '';
  position: absolute;
  width: 5vw;
  height: 25vh;
  background: #E6B098;
  border-radius: 0 20px 20px 0;
  top: 0;
  right: -4vw;
}

You Might Be Interested In:


Leave a Reply