LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Super Easy Slider/Page Transitions

Go ahead, click the lil arrows

You see that?

%section{'data-transition' => 'split_diagonal'}

So smooth!

%section{'data-transition' => 'split_diagonal_alt'}

Such swag!

%section{'data-transition' => 'split_diamond'}

Easy to implement!

%section{'data-transition' => 'split_vertical'}

Fun to use!

%section{'data-transition' => 'split_horizontal'}

Looks good!

%section{'data-transition' => 'wipe_left'}

Feels good!

%section{'data-transition' => 'wipe_right'}

Another transition

%section{'data-transition' => 'wipe_top'}

Well you got this far, hows about a cheeky follow?

View my other pens
CSS
@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
body {
  margin: 0;
  overflow: hidden;
  padding: 0;
}
body span, body h1, body h2 {
  margin: 0;
}
body h2, body span {
  font-size: 15px;
  font-family: 'nunito';
  color: black;
  margin-top: 10px;
  font-weight: 900;
  opacity: 0.3;
}
body a.download, body a.follow {
  text-align: center;
  margin-top: 40px;
  width: 200px;
  float: left;
  display: inline-block;
  padding: 16px 30px;
  background: #41EFB6;
  color: white;
  font-weight: 900;
  font-family: 'nunito';
  text-decoration: none;
  border-radius: 4px;
  margin-left: 22px;
}
body a.download i, body a.follow i {
  margin-right: 10px;
}
body a.follow {
  float: left;
  padding: 14px 30px;
  background: none;
  color: white;
  border: 2px solid white;
}
body a.follow:hover {
  color: #41EFB6;
  border-color: #41EFB6;
}
body .easytransitions_transition div {
  width: 200px;
  height: 200px;
  background: white;
  position: absolute;
  -webkit-transform: scale(0);
          transform: scale(0);
  z-index: 1;
}
body .easytransitions_transition .split_diagonal, body .easytransitions_transition .split_diagonal_alt, body .easytransitions_transition .split_diamond {
  -webkit-animation: diamond 1.2s;
          animation: diamond 1.2s;
  -webkit-transform: scale(0) rotate(45deg);
          transform: scale(0) rotate(45deg);
}
body .easytransitions_transition .split_horizontal, body .easytransitions_transition .wipe_top, body .easytransitions_transition .wipe_bottom {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
body .easytransitions_transition .split_vertical, body .easytransitions_transition .wipe_left, body .easytransitions_transition .wipe_right {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
body .easytransitions_transition__part-1 {
  left: -100px;
  top: -100px;
}
body .easytransitions_transition__part-1.split_diagonal_alt, body .easytransitions_transition__part-1.split_vertical, body .easytransitions_transition__part-1.split_horizontal {
  display: none;
}
body .easytransitions_transition__part-2 {
  bottom: -100px;
  left: -100px;
}
body .easytransitions_transition__part-2.split_diagonal, body .easytransitions_transition__part-2.split_vertical, body .easytransitions_transition__part-2.split_horizontal {
  display: none;
}
body .easytransitions_transition__part-3 {
  top: -100px;
  right: -100px;
}
body .easytransitions_transition__part-3.split_diagonal, body .easytransitions_transition__part-3.split_vertical, body .easytransitions_transition__part-3.split_horizontal {
  display: none;
}
body .easytransitions_transition__part-4 {
  bottom: -100px;
  right: -100px;
}
body .easytransitions_transition__part-4.split_diagonal_alt, body .easytransitions_transition__part-4.split_vertical, body .easytransitions_transition__part-4.split_horizontal {
  display: none;
}
body .easytransitions_transition__part-5 {
  height: 100% !important;
  display: none;
  left: 0px;
  -webkit-transform-origin: 0px 200px;
          transform-origin: 0px 200px;
  -webkit-animation: vertical 1.2s forwards;
          animation: vertical 1.2s forwards;
}
body .easytransitions_transition__part-5.split_vertical, body .easytransitions_transition__part-5.wipe_left {
  display: block;
}
body .easytransitions_transition__part-6 {
  height: 100% !important;
  display: none;
  right: -200px;
  -webkit-transform-origin: 0px 200px;
          transform-origin: 0px 200px;
  -webkit-animation: vertical_r 1.2s forwards;
          animation: vertical_r 1.2s forwards;
}
body .easytransitions_transition__part-6.split_vertical, body .easytransitions_transition__part-6.wipe_right {
  display: block;
}
body .easytransitions_transition__part-7 {
  width: 100% !important;
  display: none;
  bottom: -100px;
  -webkit-animation: horizontal 1s forwards;
          animation: horizontal 1s forwards;
}
body .easytransitions_transition__part-7.split_horizontal, body .easytransitions_transition__part-7.wipe_bottom {
  display: block;
}
body .easytransitions_transition__part-8 {
  width: 100% !important;
  display: none;
  top: -100px;
  -webkit-animation: horizontal 1s forwards;
          animation: horizontal 1s forwards;
}
body .easytransitions_transition__part-8.split_horizontal, body .easytransitions_transition__part-8.wipe_top {
  display: block;
}
@-webkit-keyframes diamond {
  0% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
  50% {
    -webkit-transform: rotate(45deg) scale(10);
            transform: rotate(45deg) scale(10);
  }
  100% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
}
@keyframes diamond {
  0% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
  50% {
    -webkit-transform: rotate(45deg) scale(10);
            transform: rotate(45deg) scale(10);
  }
  100% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
}
@-webkit-keyframes vertical {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform: scaleX(10);
            transform: scaleX(10);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes vertical {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform: scaleX(10);
            transform: scaleX(10);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@-webkit-keyframes vertical_r {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform: scaleX(-10);
            transform: scaleX(-10);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes vertical_r {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform: scaleX(-10);
            transform: scaleX(-10);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@-webkit-keyframes horizontal {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform: scaleY(10);
            transform: scaleY(10);
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
@keyframes horizontal {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  50% {
    -webkit-transform: scaleY(10);
            transform: scaleY(10);
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
body .easytransitions_navigation {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}
body .easytransitions_navigation i {
  color: white;
  font-size: 28px;
  cursor: pointer;
}
body .easytransitions_navigation__left {
  float: left;
  margin-left: 30px;
}
body .easytransitions_navigation__right {
  float: right;
  margin-right: 30px;
}
body .easytransitions .active_slide {
  display: block;
}
body .easytransitions section {
  height: 100vh;
  display: none;
}
body .easytransitions section .center {
  position: absolute;
  left: 0;
  margin: auto;
  width: 600px;
  font-family: 'nunito';
  right: 0;
  text-align: center;
  color: white;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
body .easytransitions section:nth-of-type(1) {
  background: #ff9681;
}
body .easytransitions section:nth-of-type(2) {
  background: #8ac5c3;
}
body .easytransitions section:nth-of-type(3) {
  background: #c06c84;
}
body .easytransitions section:nth-of-type(4) {
  background: #dfdccd;
}
body .easytransitions section:nth-of-type(5) {
  background: #bfb1d5;
}
body .easytransitions section:nth-of-type(6) {
  background: #f0e0a2;
}
body .easytransitions section:nth-of-type(7) {
  background: #adddcf;
}
body .easytransitions section:nth-of-type(8) {
  background: #ff9681;
}
body .easytransitions section:nth-of-type(9) {
  background: #fed1be;
}
body .easytransitions section:nth-of-type(10) {
  background: #d0c7c2;
}
JS
// Options

var slide_time = 1200; // The time it takes to complete an entire transition
var change_point = slide_time / 2; // Calculates when the slide should change
var right_arrow = $('.easytransitions_navigation__right'); // Element that trigger move right
var left_arrow = $('.easytransitions_navigation__left'); // Element that trigger move left
var slide_amount = $('.easytransitions section').length; // How many slides
var current_slide = 1; // Starting slide
var on = 1;

right_arrow.click(function(){
  if(on == 1){
    on = 0;
    if(current_slide < slide_amount){
      current_slide++;
      var active_slide = $('.active_slide').next()
      set_transition(active_slide);
      setTimeout(function(){
        $('.active_slide').hide().removeClass('active_slide').next().addClass('active_slide').show();
      },change_point);
      setTimeout(function(){
        on = 1;
      },slide_time);
    } else {
      // End
    }
  }
});

left_arrow.click(function(){
  if(on == 1){
    on = 0;
    if(current_slide > 1){
      current_slide--;
      var active_slide = $('.active_slide').prev()
      set_transition(active_slide);
      setTimeout(function(){
        $('.active_slide').hide().removeClass('active_slide').prev().addClass('active_slide').show();
      },change_point);
      setTimeout(function(){
        on = 1;
      },slide_time);
    } else {
      // Start
    }
  }
});

// Set transition type

function set_transition(tran){
  var transition_type = tran.data('transition')
  $('.easytransitions_transition div').each(function(){
    $(this).removeClass(this.className.split(' ').pop());
    setTimeout(function(){
      $('.easytransitions_transition div').addClass(transition_type)
    },100)

  })
}
Host Instantly Drag and Drop Website Builder

 

Description

Erm...yeah :)
Term
Mon, 11/27/2017 - 22:05

Related Codes

Pen ID
Pen ID
Pen ID