縦横無尽にページをスクロール/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!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" lang="ja-JP" xml:lang="ja-JP"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>scrollsmoothly.js</title> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<style type="text/css"> 
<!--
*{padding:0; margin:0;}
* {
	margin: 0;
	padding: 0;
}
html,body{overflow: hidden; height:500px; width:665px;}


ul{
  position:fixed;
  top:480px; .top:500px; left:0px; 
  z-index:2; 
  width:665px; 
  height:20px;
  list-style:none;
  background-color:#000;
}
*:first-child+html ul{
  top:480px;
}
ul li{
  width:73px;
  height:20px;
  float:left;
}

ul li.last{
  width:8px;
  height:20px;
  float:left;
}

ul li a{
  width:73px;
  height:15px;
  padding-top:5px;
  display:block;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  color:#FFF;
  background-color:#000;
  text-decoration:none;
}

ul li.last a{
  width:8px;
}

ul li a:hover{
  color:#FFF;
  background-color:#333;
}

h2{
  font-family:"Times New Roman", Times, serif;
  font-style:italic;
  font-size:36px;
  color:#FFF;
  margin-bottom:15px;
}

p{
  line-height:150%;
}

div.panel {
	position: absolute;
	width: 605px;
	height: 440px;
	padding:30px;
	overflow: auto;
}

div#panel1 {
	top:0;
	left:0;
	background-color: #999;
}

div#panel2 {
	top:0;
	left:665px;
	background-color: #888;
}

div#panel3 {
	top:0;
	left:1330px;
	background-color: #777;
}

div#panel4 {
	top:500px;
	left:0;
	background-color: #666;
}

div#panel5 {
	top:500px;
	left:665px;
	background-color: #555;
}

div#panel6 {
	top:500px;
	left:1330px;
	background-color: #444;
}

div#panel7 {
	top:1000px;
	left:0;
	background-color: #333;
}

div#panel8 {
	top:1000px;
	left:665px;
	background-color: #222
}

div#panel9 {
	top:1000px;
	left:1330px;
	background-color: #111;
}
--> 
</style> 
<script type="text/javascript" charset="UTF-8" src="scrollsmoothly.js"></script> 
</head> 

<body> 

<div class="panel" id="panel1"> 
  <h2>The first category near prison</h2>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
  <p>The person who is not baptized passes the time away through all eternity though is hope either though is compunction alone. At the entrance of the hell, judge [mi-nosu] of the netherworld allocates dead' hells where it should go. </p>
</div>

<div class="panel" id="panel2"> 
  <h2>The Secundus category sphere lust person's hell</h2>
  <p>The drowned person blows to the rampaging storm and it is thrown into the lust. </p>  
</div> 

<div class="panel" id="panel3"> 
  <h2>The third category Hell of avarice</h2>
  <p>Cerberus tears up the person who infringed the sin of gluttony, and it writhes and it turns round mud. </p> 
</div> 

<div class="panel" id="panel4"> 
  <h2>The fourth category Avaricious person's hell</h2>
  <p>The person who piled up the corruption of stinginess and waste mutually abuses it rolling the bag of a heavy gold coin. </p> 
</div> 

<div class="panel" id="panel5"> 
  <h2>The fifth category Indignation person's hell</h2>
  <p>In the marsh of suteiju that does the color of blood, the person who forgets oneself because of anger mutually tortures it. It is a toroidal alcazar in an eternal flame where red was heated in putting the fallen angel and major criminals. The sphere of the hell below is on this inside here. </p>
</div> 

<div class="panel" id="panel6"> 
  <h2>The sixth category Heretic's hell</h2>
  <p>The founder of a religion and the follower of the heterodoxy of all sects are buried to the grave hole of the flame. </p> 
</div> 

<div class="panel" id="panel7"> 
  <h2>The seventh category Violence person's hell</h2>
  <p>The person who behaved violently for others and the self is distributed according to the kind of violence. </p> 
</div> 

<div class="panel" id="panel8"> 
  <h2>The eighth category Malice person's hell</h2>
  <p>The person who committed ..malice.. crime is distributed to Ma-reboruje of ten (vesica of evil) respectively. </p> 
</div> 

<div class="panel" id="panel9"> 
  <h2>The ninth category Hell of rat</h2>
  <p>Ice hell aroused, Cocytus. It is delimited to four yen of this mind, and the heaviest crime and the person who betrays and did  are the ice pickles through all eternity. Even the neck soaks in ice, and tears also ..freezing cold.. sound teeth the rat. </p> 
</div> 


 <ul> 
   <li><a href="#panel1">Step1</a></li> 
   <li><a href="#panel2">Step2</a></li> 
   <li><a href="#panel3">Step3</a></li> 
   <li><a href="#panel4">Step4</a></li> 
   <li><a href="#panel5">Step5</a></li> 
   <li><a href="#panel6">Step6</a></li> 
   <li><a href="#panel7">Step7</a></li> 
   <li><a href="#panel8">Step8</a></li> 
   <li><a href="#panel9">Step9</a></li> 
   <li class="last"><a href="index2.html#panel9">2</a></li> 
 </ul> 
 
</body> 
</html>

	KAZUMiX memo

ページを縦横斜めに、滑らかにスクロールすることが出来るjavascript。
普通は縦方向のみのスクロールの場合が多いが、これを使用することで、その使用用途も変化してくる。
実装方法はとても簡単で、製作元サイトから「scrollsmoothly.js」をダウンロードしてきて、ヘッダーに読み込ませればOK。
滑らかかつ縦横無尽にスクロールする快感を実現できる。
「scrollsmoothly.js」を実装しているページなら、別ページへのマーカーへも滑らかに移動できる。（2をclick）
（このページのサンプルはiframeに読み込んでいるため、最初ちょっと違和感を感じるかもしれない）

ポイント

スクリプトの使用方法についてのポイントは特にないと思う。
設定は主にCSSに注力する。

考え方として、一つのhtmlファイルに複数のページを作る、といった感じがイメージしやすいかもしれない。
製作もとのサンプルはまさにそれであると思う。
もちろんページ全体を一つの移動先として指定しなくても良い。

普通にtableでセル分けして、それぞれにIDを指定し移動先としてやれば全体の動きが分かりやすいかも。
もちろんサイズはページの大きさ以下でなければいけないが。

サンプルのソース内にCSSの設定も書き込んであるので、そちらを参考にする。