Slides Layout - Layouts

Here is a simple responsive example with a demo and code for slide layout. You can use this as a starter template to achieve any demanding animation-heavy slides.

DEMO

See the Pen Slides Layout by Puneet Sharma (@webdevpuneet) on CodePen.

HTML

<div class="vim-layout">
    <div class="vim-layout__bg"></div>
    <header class="vim-header">
        <div class="vim-header__left">LOGO</div>
        <div class="vim-header__right">
           <a class="slide-next" onClick="nextSlide();" href="javascript:;">Next</a><a class="slide-prev"onClick="prevSlide();"  href="javascript:;">Back</a>
        </div>
    </header>
    <section class="vim-container vim-container--align-center vim-container--justify-center">
        <div class="vim-slides">
            <div class="vim-slide vim-slide--fade-in-out complete">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                </div>
            </div>
            <div class="vim-slide vim-slide--fade-in-up complete">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                    <div class="box">2</div>
                </div>
            </div>
            <div class="vim-slide vim-slide--left complete">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                </div>
            </div>
            <div class="vim-slide vim-slide--right complete">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                </div>
            </div>
            <div class="vim-slide vim-slide--left-corner complete">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                </div>
            </div>
            <div class="vim-slide vim-slide--right-corner active">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                </div>
            </div>
            <div class="vim-slide vim-slide--bottom">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                </div>
            </div>
            <div class="vim-slide vim-slide--bottom">
                <div class="vim-slide__inner">
                    <div class="box">1</div>
                </div>
            </div>
        </div>
    </section>
</div>

CSS – style.css

body, html, .vim-layout *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
/* Scrollbar CSS */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb {
  background: #ef9191;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ef6f6f;
  border-radius: 50px;
}


/* variables */
:root{
  --resp: 1;
}
@media(min-width:2200px){
  :root{
    --resp: 1.3;
  }
}
@media(max-width:991.98px){
  :root{
    --resp: 0.8;
  }
}


/* Layout */
.vim-layout{
  position: relative;
  inset: 0;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.vim-layout__bg{
  position: absolute;
  inset: 0;
  background-color: #cecece;
  z-index: 0;
}

.vim-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(125px * var(--resp));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(50px * var(--resp));
  z-index: 2;

  > *{
    display: flex;
    align-items: center;
    gap: calc(20px * var(--resp));
  }
}

.vim-container{
  position: fixed;
  left: 0;
  top: calc(125px * var(--resp));
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
}

.vim-container--align-center{
  display: flex;
  align-items: center;
  padding-bottom: calc(125px * var(--resp));
}

.vim-container--align-center{
  display: flex;
  justify-content: center;
  padding-bottom: calc(125px * var(--resp));
}





/* vim-slides */
.vim-slides .box{
  display: block;
  width: 200px;
  height: 200px;
  min-width: 200px;
  min-height: 200px;
  background-color: grey;
  margin-bottom: 20px;
}
.vim-slides{
  position: absolute;
  inset: 0;
  overflow: hidden;

  
}
.vim-slide{
  position: absolute;
  inset: 0;
  transition: 1s ease-in-out;
  width: 100%;
  opacity: 0;
  overflow-y: auto;
  padding: calc(20px * var(--resp)) calc(125px * var(--resp));
}
.vim-slide::-webkit-scrollbar-thumb {
  background: transparent;
}
.vim-slide::-webkit-scrollbar-thumb:hover{
  background: #ef9191;
}
.vim-slide:hover::-webkit-scrollbar {
  display: block;
}
.vim-slide__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - (200px * var(--resp)));
}


.vim-slide--fade-in-out{
  opacity: 0;
  visibility: hidden;
}
.vim-slide--fade-in-out.active{
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.vim-slide--fade-in-out.complete{
  opacity: 0;
  visibility: hidden;
}

.vim-slide--fade-in-up{
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.vim-slide--fade-in-up.active{
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}
.vim-slide--fade-in-up.complete{
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100vw, 0);
}


.vim-slide--bottom{
  transform: translate3d(0, 100vh, 0);
}
.vim-slide--bottom.active{
  transform: translate3d(0, 0, 0);
}
.vim-slide--bottom.complete{
  transform: translate3d(0, -100vh, 0);
}


.vim-slide--left{
  transform: translate3d(0, 100vw, 0);
}
.vim-slide--left.active{
  transform: translate3d(0, 0, 0);
}
.vim-slide--left.complete{
  transform: translate3d(-100vw, 0, 0);
}


.vim-slide--right{
  transform: translate3d(0, 100vw, 0);
}
.vim-slide--right.active{
  transform: translate3d(0, 0, 0);
}
.vim-slide--right.complete{
  transform: translate3d(100vw, 0, 0);
}


.vim-slide--left{
  transform: translate3d(0, 100vw, 0);
}
.vim-slide--left.active{
  transform: translate3d(0, 0, 0);
}
.vim-slide--left.complete{
  transform: translate3d(-100vw, 0, 0);
}


.vim-slide--right-corner{
  transform: translate3d(0, 100vw, 0);
}
.vim-slide--right-corner.active{
  transform: translate3d(0, 0, 0);
}
.vim-slide--right-corner.complete{
  transform: translate3d(100vw, -100vw, 0);
}


.vim-slide--left-corner{
  transform: translate3d(0, 100vw, 0);
}
.vim-slide--left-corner.active{
  transform: translate3d(0, 0, 0);
}
.vim-slide--left-corner.complete{
  transform: translate3d(-100vw, -100vw, 0);
}


@keyframes vimSlideActive {
  0%{
    opacity: 0;
    visibility: hidden;
  }
  5%{
    visibility: visible;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    visibility: visible;
  }
}
@keyframes vimSlideComplete {
  0%{
    opacity: 1;
    visibility: visible;
  }
  50%{
    opacity: 1;
  }
  95%{
    opacity: 0;
    visibility: visible;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}
.vim-slide{
  opacity: 0;
  visibility: hidden;
}
.vim-slide.animating, .vim-slide.animating.complete{
  visibility: visible;
  animation: vimSlideComplete 1s ease-in-out forwards;
}
.vim-slide.active{
  opacity: 1;
  visibility: visible;
  animation: vimSlideActive 1s ease-in-out forwards;
}

JavaScript – scripts.js

// Added by Puneet
  const nextSlide  = () => {
    var currentSlide = document.querySelector('.vim-slide.active');
    var nextSlide = currentSlide.nextElementSibling;
  
    if (nextSlide) {
      currentSlide.classList.add('animating');
      currentSlide.classList.remove('active');
      currentSlide.classList.add('complete');
      nextSlide.classList.add('animating');
      nextSlide.classList.add('active');
      setTimeout(function(){
        currentSlide.classList.remove('animating');
        nextSlide.classList.remove('animating');
      }, 1000);
    }
  
  }
  
  const prevSlide  = () => {
    var currentSlide = document.querySelector('.vim-slide.active');
    var prevSlide = currentSlide.previousElementSibling;
  
    if (prevSlide) {
      currentSlide.classList.add('animating');
      currentSlide.classList.remove('active');
      prevSlide.classList.add('animating');
      prevSlide.classList.remove('complete');
      prevSlide.classList.add('active');
      setTimeout(function(){
        currentSlide.classList.remove('animating');
        prevSlide.classList.remove('animating');
      }, 1000);
    }
  }