jQuery Plugins › jQuery Slider Plugins ›

Easy jQuery Page Slider with CSS3 Transitions

File Size: 2.85 KB
Views Total: 6643
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE10+, FireFox, Opera, Safari#page slider#page transition#Presentation
Easy jQuery Page Slider with CSS3 Transitions

A nice, stylish jQuery based fullscreen page slider / presentation which allows the visitor to switch between page sections with smooth transition effects based on CSS3 transitions, transforms and keyframes.

How to use it:

1. Include the Ionicons icon font for navigation arrows.

<link rel="stylesheet" href="ionicons.min.css">

2. Build the html structure for the page slider and specify the transition effect for each page sections using data-transition attribute as shown below.

<div class='easytransitions'>
  <div class='easytransitions_transition'>
    <div class='div easytransitions_transition__part-1 none'></div>
    <div class='div easytransitions_transition__part-2 none'></div>
    <div class='div easytransitions_transition__part-3 none'></div>
    <div class='div easytransitions_transition__part-4 none'></div>
    <div class='div easytransitions_transition__part-5 none'></div>
    <div class='div easytransitions_transition__part-6 none'></div>
    <div class='div easytransitions_transition__part-7 none'></div>
    <div class='div easytransitions_transition__part-8 none'></div>
  </div>
  <div class='easytransitions_navigation'>
    <div class='easytransitions_navigation__left'>
      <i class='icon ion-arrow-left-c'></i>
    </div>
    <div class='easytransitions_navigation__right'>
      <i class='icon ion-arrow-right-c'></i>
    </div>
  </div>
  <section class='active_slide' data-transition='none'>
    <div class='center'>
      <h1>Slide 1</h1>
    </div>
  </section>
  <section data-transition='split_diagonal'>
    <div class='center'>
      <h1>Slide 2</h1>
      <span>%section{'data-transition' => 'split_diagonal'}</span>
    </div>
  </section>
  <section data-transition='split_diagonal_alt'>
    <div class='center'>
      <h1>Slide 3</h1>
      <span>%section{'data-transition' => 'split_diagonal_alt'}</span>
    </div>
  </section>
  <section data-transition='split_diamond'>
    <div class='center'>
      <h1>Slide 4</h1>
      <span>%section{'data-transition' => 'split_diamond'}</span>
    </div>
  </section>
  <section data-transition='split_vertical'>
    <div class='center'>
      <h1>Slide 5</h1>
      <span>%section{'data-transition' => 'split_vertical'}</span>
    </div>
  </section>
  <section data-transition='split_horizontal'>
    <div class='center'>
      <h1>Slide 6</h1>
      <span>%section{'data-transition' => 'split_horizontal'}</span>
    </div>
  </section>
  <section data-transition='wipe_left'>
    <div class='center'>
      <h1>Slide 7</h1>
      <span>%section{'data-transition' => 'wipe_left'}</span>
    </div>
  </section>
  <section data-transition='wipe_right'>
    <div class='center'>
      <h1>Slide 8</h1>
      <span>%section{'data-transition' => 'wipe_right'}</span>
    </div>
  </section>
  <section data-transition='wipe_top'>
    <div class='center'>
      <h1>Silde 9</h1>
      <span>%section{'data-transition' => 'wipe_top'}</span>
    </div>
  </section>
  <section data-transition='wipe_bottom'>
    <div class='center'>
      <h1>Last Slide</h1>
      <span>%section{'data-transition' => 'wipe_bottom'}</span>
    </div>
  </section>
</div>

3. The primary CSS styles for the page slider.

body {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

body span, body h1 { margin: 0; }

body .easytransitions_transition div {
  width: 200px;
  height: 200px;
  background: white;
  position: absolute;
  -webkit-transform: scale(0);
  transform: scale(0);
  z-index: 1;
}

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: 'roboto';
  right: 0;
  text-align: center;
  color: white;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

4. The core CSS / CSS3 rules for the page transitions.

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);
}
}

5. Style the slider navigation.

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;
}

6. Include the needed jQuery JavaScript library at the bottom of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

7. The jQuery script to active the page slider.

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

  })
}

This awesome jQuery plugin is developed by jcoulterdesign. For more Advanced Usages, please check the demo page or visit the official website.