Easy jQuery Page Slider with CSS3 Transitions
File Size: | 2.85 KB |
---|---|
Views Total: | 6675 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.