jQueryで実装するスクロールに伴う演出

Javascript

スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。

なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。

慣性スクロール

こちらは以下のサイトに実装方法が書いてありましたので、そちらをそのままご紹介です。

参考JSソース


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.easie.js"></script>
<script type="text/javascript">
$(function() {
	var scrolly = 0;
	var speed = 100;
	$('html').mousewheel(function(event, mov) {
		if(jQuery.browser.webkit){
			if (mov > 0) scrolly =  $('body').scrollTop() - speed;
			else if (mov < 0) scrolly =  $('body').scrollTop() + speed;
		} else {
			if (mov > 0) scrolly =  $('html').scrollTop() - speed;
			else if (mov < 0) scrolly =  $('html').scrollTop() + speed;
		}
		$('html,body')
			.stop()
			.animate({scrollTop: scrolly}, 'slow',$.easie(0,0,0,1));
			//イージングプラグイン使わない場合
			//.animate({ scrollTop: scrolly }, 'normal');
		return false;
	});
		
});
</script>

使用するJS

var speed = 100;の数値を変えるとスクロールスピードが変化します。

デモは以下からどうぞ。

横スクロール（ナビゲーション付き）

こちらも上記に続いて同じサイトからのご紹介です。

参考JSソース

こちらはHTMLの構造によって太字の箇所を変更する必要があります。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
	
	var cont = $('#content');//コンテンツの横サイズ
	var contW = $('.box').outerWidth(true) * $('div',cont ).length;
	cont.css('width', contW);
	var speed = 50;//スクロールスピード

	//マウスホイールで横移動
	$('html').mousewheel(function(event, mov) {
		//ie firefox
		$(this).scrollLeft($(this).scrollLeft() - mov * speed);
		//webkit
		$('body').scrollLeft($('body').scrollLeft() - mov * speed);
		return false;	//縦スクロール不可
	});

	//ナビゲーションが必要な場合はここから
	$('#nav a').click(function(event) {
		var $anchor = $(this);
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 500);
		event.preventDefault();
	});
		
});
</script>

こちらもvar speed = 50;でスクロールスピードが変更できます。

HTMLソースなど含めたデモは以下からどうぞ。

iOS見たいなスクロールバーと慣性スクロールができるプラグインNiceScroll

これはスクロールバーを変更できるプラグインです。iOSみたいな見た目以外にもいろいろ改造できます。変更できるパラメーターも以下の配布ページに書いてありますのでそちらを 参考にして下さい。

デモは以下からどうぞ。

スクロールに遅れてついてくるコンテンツ

画面にfixedしてついてくるメニューやコンテンツがありますが、それがスクロールしたら少し遅れてやってくる方法です。

以下のサイトからのご紹介。

参考JSソース

こちらも太字の箇所を適宜変更して下さい。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.exscrollevent.js"></script>
<script type="text/javascript">
$(function() {	
	$(window).scroll(function(){	
		$(window).exScrollEvent({
			delay : 10,
			callback : function(evt,param){
				if(param.status == 0){
					$('#nav2').queue([]).animate({
						top : 10 + param.scroll.top
					},1000)
				}
			}
		});
	});
	
});
</script>

ちなみにこのプラグインを使うと、スクロールの方向・開始・終了・スクロール中か・スクロール位置の状態を判別してくれるので、 他にもいろいろ使えそうです。

デモは以下からどうぞ。

途中からスクロールについてくる

最初は特定の位置に配置されていますが、スクロールしてウインドウがある程度動くとfixedになるものです。

参考JSソース

こちらはjQuery本体以外に他のプラグインは使用しません。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {	
	
	var navPos = $("#nav1").offset();

	$(window).scroll(function(){
		var y = $(this).scrollTop();

		if(y > navPos.top - 10 ){
			$("#nav1").css({"position":"fixed","top":"10px"});
		} else {
			$("#nav1").css({"position":"absolute","top": navPos.top + "px"});	
		}
		
	});
	
});
</script>

最初にその固定したい要素の位置を取得して、それをスクロール量が超えたらfixedにするという感じです。上記のソースで-10してるのはfixedしたときに ウインドウ上部から10px離れたところに配置したいので、ウインドウ上部がコンテンツの上10pxに来た時にfixedになるように指定しています。

デモは以下からどうぞ。