Smooth Vertical or Horizontal Page Scrolling with jQuery
他のサイトと差をつけて、サイトを横スクロールで作成したいときに便利なjQueryプラグインです。印象的かつスムーズに横スクロールします。
まずはサンプルをご覧ください。
→ Smooth Vertical or Horizontal Page Scrolling with jQueryプラグインサンプル
【設定方法】
Smooth Vertical or Horizontal Page Scrolling with jQueryからファイルを一式ダウンロードします。
<body>部分にスクロールさせたいセクションごとに<div>でくくります。
サンプルでは３セッションに分けています。
<div id=”section1″>
<h2>Section 1</h2>
<p>
“Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking.
</p>
<ul>
<li>1</li>
<li><a href=”#section2″>2</a></li>
<li><a href=”#section3″>3</a></li>
</ul>
</div>
<div id=”section2″>
<h2>Section 2</h2>
<p>
Don’t let the noise of other’s opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.
</p>
<ul>
<li><a href=”#section1″>1</a></li>
<li>2</li>
<li><a href=”#section3″>3</a></li>
</ul>
</div>
<div id=”section3″>
<h2>Section 3</h2>
<p>
They somehow already know what you truly want to become. Everything else is secondary.” — Steve Jobs
</p>
<ul>
<li><a href=”#section1″>1</a></li>
<li><a href=”#section2″>2</a></li>
<li>3</li>
</ul>
</div>
続いて、</body>の直前にスクリプトを設定します。
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.easing.1.3.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘ul.nav a’).bind(‘click’,function(event){
var $anchor = $(this);
$(‘html, body’).stop().animate({
scrollLeft: $($anchor.attr(‘href’)).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
最後にcssの記述を変更します。cssのbody幅を（サンプルではwidth:12000pxの部分）をセクション幅（サンプルではwidth:4000px）の枚数分の値に変更します。
body{
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
}
セクションの右側に背景画像を入れます。
.black{
color:#fff;
background:#000 url(../images/black.jpg) no-repeat top right;
}
.white{
color:#000;
background:#fff url(../images/white.jpg) no-repeat top right;
}
画像を変更することで印象的な演出を作ることができます。背景画像をいろいろ試してみても楽しいですね。
以下、サンプルの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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Website Horizontal Scrolling with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="css/style_horizontal.css" type="text/css" media="screen"/> </head> <body> <div id="section1"> <h2>Section 1</h2> <p> “Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. </p> <ul> <li>1</li> <li><a href="#section2">2</a></li> <li><a href="#section3">3</a></li> </ul> </div> <div id="section2"> <h2>Section 2</h2> <p> Don't let the noise of other's opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. </p> <ul> <li><a href="#section1">1</a></li> <li>2</li> <li><a href="#section3">3</a></li> </ul> </div> <div id="section3"> <h2>Section 3</h2> <p> They somehow already know what you truly want to become. Everything else is secondary.” --- Steve Jobs </p> <ul> <li><a href="#section1">1</a></li> <li><a href="#section2">2</a></li> <li>3</li> </ul> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); event.preventDefault(); }); }); </script> </body> </html> |
あわせてお読みください
「jQuery.dotdotdot」はボックス要素からはみ出た分のテキストを自動的に省略してくれるという地味に便利なjQueryプラグインです。 省略したあとに…
jQuery.mb.YTPlayer メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多い…
今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。 サン…
コメントを残す