<div class="box slide"><span>Full Screen Slider (linear) #1</span></div>
<div class="box slide"><span>GSAP Timeline</span></div>
<div class="box slide"><span>Responsive</span></div>
<div class="box slide"><span>Super Simple</span></div>
<div class="box slide"><span>What else you want ! ;)</span></div>
<div id="nav">
  <div id="prevtBtn" class='fa fa-chevron-circle-left'></div>
  <div id="nextBtn" class='fa fa-chevron-circle-right'></div>
</div>
<div id="Dots"></div>

<img id='logo' src="http://gravatar.com/avatar/5a224f121f96bd037bf6c1c1e2b686fb?s=256" height="70" width="70">



body,html{  width: 100%;  height: 100%;}
body {
  background-color: #222;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#nav{ position: relative; z-index:5000; text-align: center; }

#Dots{ 
  position: absolute; 
  z-index:5000;
  bottom:40px; left:50%;
  transform:translate(-50%,0%);    
}

.Dot{
 width:8px; 
 height: 8px; 
 border-radius: 50%;
 position: relative;
 float: left; 
 background-color: #fff;
 opacity:1;
 margin:5px; margin-bottom:0px;
 cursor: pointer;
 border:2px solid rgba(255,255,255,0.7);
}

#prevtBtn,#nextBtn{
  color: white;
  font-size: 45px;
  margin: 15px 15px 0px 15px;
  position: relative;
  cursor: pointer;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  font-size: 40px;
  color: white;
  font-family:'Oswald', arial; 
  top:0px;
  left:0px;
}
.slide span{
  display:block;
  position:absolute;
  transform:translate(-50%,-50%);
  left:50%; top:50%;
}

.box:nth-child(1) {
  background-color: #ff002f;
}
.box:nth-child(2) {
  background-color: #00718b;
}
.box:nth-child(3) {
  background-color: #4a5619;
}
.box:nth-child(4) {
  background-color: #ff002f;
}
.box:nth-child(5) {
  background-color: #444;
}

#logo {
  border-radius: 50%; 
  position:absolute;
  z-index:5000;
  top:20px; left:20px;
}



#DiacoDesignLink,#pens{
  color: #fff;
}
/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */

TweenLite.set('body',{perspective:700});
var slides=document.querySelectorAll('.slide'),tl=new TimelineLite({paused:true});
for(var i=0;i<slides.length;i++){
    var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i;
    D.addEventListener('click',function(){ tl.seek(this.id).pause() });
    document.getElementById('Dots').appendChild(D);
    if(i!=0){tl.addPause('Dot'+i)};
    if(i!=slides.length-1){
      tl.to(slides[i],0.5,{scale:.8,ease:Back.easeOut})
        .to(slides[i],0.7,{xPercent:-100,rotationY:80},'L'+i) 
        .from(slides[i+1],0.7,{xPercent:100,rotationY:-80},'L'+i)
        .to('#Dot'+i,0.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)
        .from(slides[i+1],0.5,{scale:.8,ease:Back.easeIn})
    };
};
function GO(e){
  var SD=isNaN(e)?e.wheelDelta||-e.detail:e;
  if(SD<0){tl.play()}else{tl.reverse()};
};

document.addEventListener("mousewheel",GO);
document.addEventListener("DOMMouseScroll",GO);
document.getElementById('nextBtn').addEventListener("click",function(){GO(-1)});
document.getElementById('prevtBtn').addEventListener("click",function(){GO(1)});

/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */

External CSS

  1. https://fonts.googleapis.com/css?family=Oswald
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
  3. https://codepen.io/MAW/pen/XVRpEE.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
  2. https://codepen.io/MAW/pen/XVRpEE.js