<div id="bg"></div>
<div id="fg"></div>
<div id="ico"></div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

html, body, #fg, #bg {
  width:100%;
  height:100%;
  color:#fff;
  font-size:35px;
  font-family:'Montserrat', sans-serif;
  overflow:hidden;
}

#ico {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
}

div {
  position:absolute;
  top:0;
}

sub {
  font-size:12px;
  display:block;
}

p {
  padding:12px;
}

var imgs = [
      'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=50',
      'https://images.unsplash.com/photo-1511576661531-b34d7da5d0bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
      'https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
      'https://images.unsplash.com/photo-1502657877623-f66bf489d236?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
      'https://images.unsplash.com/photo-1506361797048-46a149213205?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
  'https://images.unsplash.com/photo-1670348282804-a66da753b87e?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzEwMjUxODc&ixlib=rb-4.0.3&q=50'
    ],
    menuItem = [
      'Главная',
      'О нас',
      'Тренинги',
      'Статьи',
      'С нами',
      'Контакты'
    ],
    menuIcon = [ 'https://images.unsplash.com/photo-1671469905067-9b15f9335d23?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIwNDc5MDY&ixlib=rb-4.0.3&q=80',
'https://images.unsplash.com/photo-1670520616936-e49762d3d3d6?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIwNDc5MDY&ixlib=rb-4.0.3&q=80',
'https://images.unsplash.com/photo-1670258880594-773edec90086?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIwNDc5MDY&ixlib=rb-4.0.3&q=80',
'https://images.unsplash.com/photo-1671394163520-4e0b11125f59?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIwNDc5MDY&ixlib=rb-4.0.3&q=80',
'https://images.unsplash.com/photo-1669734130302-e5832b19af4e?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIwNDc5MDY&ixlib=rb-4.0.3&q=80',
'https://images.unsplash.com/photo-1670147400039-b66e688ea0fe?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzIwNDc5MDY&ixlib=rb-4.0.3&q=80'             
    ],
    n = imgs.length,
    current = n-1,
    closedWidth = Math.floor(window.innerWidth/10)


for (var i=0; i<n; i++){
  
  var bgImg = document.createElement('div');
  bg.appendChild(bgImg);
  
  gsap.set(bgImg, {
    attr:{id:'bgImg'+i, class:'bgImg'},
    width:'100%',
    height:'100%',
    backgroundImage:'url('+imgs[i]+')',
    backgroundSize:'cover',
    backgroundPosition:'center'
  })
  
  var b = document.createElement('div');
  fg.appendChild(b);
  
  gsap.fromTo(b, {
    attr:{id:'b'+i, class:'box'},
    innerHTML:'<p><sub> '+(menuItem[i])+' </sub> '+(i+1)+'</p>',
    width:'100%',
    height:'100%',
    borderLeft:(i>0)?'solid 1px #eee':'',
       n = imgs.length,
    current = n-1,
    closedWidth = Math.floor(window.innerWidth/10)


for (var i=0; i<n; i++){
  
  var icoimg = document.createElement('div');
  bg.appendChild(icoImg);
  
  gsap.set(icoImg, {
    attr:{id:'icoImg'+i, class:'icoImg'},
    width:'40px',
    height:'40px',
    backgroundImage:'url('+ menuicon[i]+')',
    backgroundSize:'cover',
    backgroundPosition:'center'
  })
  
  var c = document.createElement('div');
  fg.appendChild(c);
  
  gsap.fromTo(c, {
    attr:{id:'c'+i, class:'box'},
    innerHTML:'<p><sub> '+(menuIcon[i])+' </sub> '+(i+1)+'</p>',
    width:'100%',
    height:'100%',
    borderLeft:(i>0)?'solid 1px #eee':'', backgroundColor:'rgba(250,250,250,0)',
    left:i*closedWidth,
    transformOrigin:'100% 100%',
    x:'100%'
  },{
    duration:i*0.15,
    x:0,
    ease:'expo.inOut'
  })  
  
  c.onmouseenter = c.onclick = (e)=>{    
    if (Number(e.currentTarget.id.substr(1))==current) return;
      
    var staggerOrder = !!(current < Number(e.currentTarget.id.substr(1)));
    current = Number(e.currentTarget.id.substr(1));
    gsap.to('.box', {
      duration:0.5,
      ease:'elastic.out(0.3)',
      left:(i)=>(i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth),
      x:0,
      stagger: staggerOrder? 0.05:-0.05
    })
    
    bg.appendChild( document.getElementById('bgImg'+current) )
    gsap.fromTo('#bgImg'+current, {opacity:0}, {opacity:1, duration:0.3, ease:'power1.inOut'})
    gsap.fromTo('#bgImg'+current, {scale:1.05, rotation:0.05}, {scale:1, rotation:0, duration:1.5, ease:'sine'}) 
  }
}


window.onresize = (e)=>{
  closedWidth = Math.floor(window.innerWidth/10)
  gsap.set('.box', { x:0, left:(i)=> (i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth) })
}