<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 */