Page Transitions

In this example below you will see how to do a Page Transitions with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by navupawar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright navupawar ©
  • HTML
  • CSS
  • JavaScript
    <html>

<body>
  <div class="pt-page page-1 page-current">
    <p>Page 1</p>
    <button class="nextpage">Next-Page</button>
  </div>
  <div class="pt-page page-2">
    <p>Page 2</p>
    <button class="prevpage">Prev-Page</button>
  </div>


</body>

</html>

/*Downloaded from https://www.codeseek.co/navupawar/page-transitions-VmREgR */
    body{
  overflow:hidden;
}
.page-1 {
  background-color: red;
}

.page-2 {
  background-color: blue;
}

.pt-page {
  top: 0;
  left: 0;
  height: 100vh;
  right: 0;
  position: absolute;
  overflow: hidden;
    -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.page-current {
  visibility: visible;
  z-index: 2;
}

.pt-page-moveFromRightFade {
  -webkit-animation: moveFromRightFade .7s ease both;
  animation: moveFromRightFade .7s ease both;
}

.pt-page-moveToLeftFade {
  -webkit-animation: moveToLeftFade .7s ease both;
  animation: moveToLeftFade .7s ease both;
}

.pt-page-moveFromLeftFade {
  -webkit-animation: moveFromLeftFade .7s ease both;
  animation: moveFromLeftFade .7s ease both;
}

.pt-page-moveToRightFade {
  -webkit-animation: moveToRightFade .7s ease both;
  animation: moveToRightFade .7s ease both;
}

@-webkit-keyframes moveToRightFade {
  from {}
  to {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
  }
}

@keyframes moveToRightFade {
  from {}
  to {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@-webkit-keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
  }
}

@keyframes moveFromRightFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@-webkit-keyframes moveToLeftFade {
  from {}
  to {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
  }
}

@keyframes moveToLeftFade {
  from {}
  to {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
  }
}

@keyframes moveFromLeftFade {
  from {
    opacity: 0.3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}


/*Downloaded from https://www.codeseek.co/navupawar/page-transitions-VmREgR */
    $('.nextpage').on('click', function() {
  $('.page-1').addClass('pt-page-moveToLeftFade ').removeClass("page-current pt-page-moveFromLeftFade");
  $('.page-2').addClass('page-current pt-page-moveFromRightFade').removeClass('pt-page-moveToRightFade');
});
$('.prevpage').on('click', function() {
  $('.page-2').addClass('pt-page-moveToRightFade').removeClass('page-current pt-page-moveFromRightFade');
  $('.page-1').addClass('page-current pt-page-moveFromLeftFade').removeClass('pt-page-moveToLeftFade');
});

Comments