© Style-5.net
 

全画面を横にスライド推移させる

全画面を横にスライド推移させるプラグイン Alessandro Ferrini FerroSlider jQuery Plugin

DEMOページ


rink Alessandro Ferrini FerroSlider jQuery Plugin からファイルをダウンロード。

<link rel="stylesheet" href="jquery.ferro.ferroSlider.css" media="all" /> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.ferro.ferroSlider.min.js"></script>

script
$(function(){
	$('.slidingSpaces').ferroSlider({
		easing		: 'easeOutExpo', //easingプラグインの設定
		createMap	: true, //いま何枚目かを表示するかどうか
		mapPosition	: 'bottom_center', //現在地を表示する場所
		feedbackArrows: true //どこに遷移したかを表示するか
	});
});

html
<div id="div1" class="slidingSpaces" title="Page 1">
    first page
</div>
<div id="div2" class="slidingSpaces" title="Page 2">
    second page
</div>
<div id="div3" class="slidingSpaces" title="Page 3">
    third page 
</div>
<div id="div4" class="slidingSpaces" title="Page 4">
    fourth page
</div>
<div id="div5" class="slidingSpaces" title="Page 5">
    fifth page 
</div>


※注) 何故か同梱されている jquery.ferro.ferroSlider CSSファイルでは正しく表示されなかった為、下記を作り入れ替えましたが適所を編集してお使いください。
html, body
{
	height: 100%;
	width:100%;
	overflow:hidden;
font-family:"Century Gothic", Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
	font-size:22px !important;
}
pre,code{padding: 0;margin: 0;}
.slidingSpaces{
background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
	height:90%;
	padding: 5%;
	}
	.demo0 {	padding-top:15%;
	text-align:center !important;
	font-size:22px !important;
	font-weight:bold;}
	
.slidingSpacesNavigation{
	position: absolute;
	left:0;
	bottom:0;
	background:black;
	opacity:0.8;
	width:100%;
	text-align:center;
	height:50px;
}

#slidingSpacesNavigationMap{
	position: fixed;
	/*background:black;*/
	opacity:0.5;
	text-align:center;
	float:right;
	line-height:10px;
	padding:5px;
	/*-moz-box-shadow: 0px 0px 10px #ffffff;
  	-webkit-box-shadow: 0px 0px 10px #ffffff;
  	box-shadow: 0px 0px 10px #ffffff;*/
}

#slidingSpacesNavigationMap a{
	float:left;
	width:10px;
	height:10px;
	margin:2px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}

.slidingSpacesNavigationMap{
	position: absolute;
	bottom:0;
	right:0;
	background:black;
	filter: alpha(opacity = 50);
	opacity:0.5;
	text-align:center;
	float:right;
	line-height:10px;
}

.slidingSpacesNavigationDot{
	position: relative;
	background:white;
	filter: alpha(opacity = 40);
	opacity:0.4;
}

.slidingSpacesNavigationDotActual{
	position: relative;
	background:#333;
	filter: alpha(opacity = 80);
	opacity:0.8;
	float:left;
}

.slidingSpacesNavigationDotEmpty{
	position: relative;
	background-color:none;
	filter: alpha(opacity = 0);
	opacity:0;
	float:left;
}

.slidingSpacesNavigation ul li{
	display:inline;
	margin-right:5px;
}

.slidingSpacesNavigation ul li:last-child{
	display:inline;
}

#slidingSpacesNavigationFeedback{
	position:fixed;
}
※もしもDLしたファイルの中にeasing.1.3がない場合は http://demo.style-5.net/js/ferroSlider/easing.1.3.js からコピペでどうぞ。