public
Last active

Full page sliding animation

  • Download Gist
full-page-slider.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<title>Full Page Slider</title>
 
<style type="text/css">
 
html {
min-width: 800px;
}
 
#full-slider-wrapper {
overflow: hidden;
}
 
#full-slider {
position: relative;
width: 800px;
height: 600px;
margin: 0 auto;
}
 
#full-slider .slide-panel {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 600px;
visibility: hidden;
}
 
#full-slider .slide-panel.active {
visibility: visible;
}
 
#full-slider-nav {
position: absolute;
top: 0;
right: 0;
}
 
#full-slider-nav-left, #full-slider-nav-right {
display: inline-block;
height: 0;
width: 0;
margin-left: 15px;
border: 20px solid transparent;
cursor: pointer;
}
 
#full-slider-nav-left {
border-right-color: #BBB;
}
 
#full-slider-nav-left:hover {
border-right-color: #999;
}
 
#full-slider-nav-right {
border-left-color: #BBB;
}
 
#full-slider-nav-right:hover {
border-left-color: #999;
}
 
/* styles below are only for this example */
 
#full-slider .slide-panel {
background-color: #555;
color: #DDD;
}
 
</style>
 
</head>
 
<div id="full-slider-wrapper">
<div id="full-slider">
 
<div class="slide-panel active">
Panel 1 content here
</div>
 
<div class="slide-panel">
Panel 2 content here
</div>
 
<div class="slide-panel">
Panel 3 content here
</div>
</div>
</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript">
$(function() {
function slidePanel( newPanel, direction ) {
// define the offset of the slider obj, vis a vis the document
var offsetLeft = $slider.offset().left;
 
// offset required to hide the content off to the left / right
var hideLeft = -1 * ( offsetLeft + $slider.width() );
var hideRight = $(window).width() - offsetLeft;
 
// change the current / next positions based on the direction of the animation
if ( direction == 'left' ) {
currPos = hideLeft;
nextPos = hideRight;
}
else {
currPos = hideRight;
nextPos = hideLeft;
}
 
// slide out the current panel, then remove the active class
$slider.children('.slide-panel.active').animate({
left: currPos
}, 500, function() {
$(this).removeClass('active');
});
 
// slide in the next panel after adding the active class
$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({
left: 0
}, 500 );
}
 
var $slider = $('#full-slider');
var $sliderPanels = $slider.children('.slide-panel');
 
var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider );
var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap );
var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );
 
var currPanel = 0;
 
$navLeft.click(function() {
currPanel--;
 
// check if the new panel value is too small
if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;
 
slidePanel(currPanel, 'right');
});
 
$navRight.click(function() {
currPanel++;
 
// check if the new panel value is too big
if ( currPanel >= $sliderPanels.length ) currPanel = 0;
 
slidePanel(currPanel, 'left');
});
});
</script>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.