jquery wordpress

余韻の残るマウスホイール移動と任意の要素への移動

投稿日:2015年3月5日 更新日:

マウスホイールで移動する際、スイーンと余韻の残る動きを付けたかったので、jQueryでマウスホイールの上下イベントを取得 + 余韻をつけたイージングスクロールを実装する実験の記事を参考にさせて頂きました。

スクリプトは、下記の通りです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).on(mousewheelevent,function(e){
		e.preventDefault();
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta < 0){
			// マウスホイールを下にスクロールしたときの処理を記載
		} else {
			// マウスホイールを上にスクロールしたときの処理を記載
		}
	});
});
</script>

これを参考に、任意の要素へ移動させるには、$(window).scrollTop()で現在位置を把握して、その位置から上と下それぞれ移動したい箇所の高さを取得して、スムースに移動させています。

<script>
$(function(){

	scrSpeed = 800;
	scrEasing = 'easeOutCirc';

	var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).on(mousewheelevent,function(e){
		e.preventDefault();
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta < 0){

           if($(window).scrollTop() >= $("#cont6").offset().top){
             scrSet = $("#cont6").offset().top + 200;
           }else if($(window).scrollTop() >= $("#cont5").offset().top){
             scrSet = $("#cont6").offset().top;
           }else if($(window).scrollTop() >= $("#cont4").offset().top){
             scrSet = $("#cont5").offset().top;
           }else if($(window).scrollTop() >= $("#cont3").offset().top){
             scrSet = $("#cont4").offset().top;
           }else if($(window).scrollTop() >= $("#cont2").offset().top){
             scrSet = $("#cont3").offset().top;
           }else{
             scrSet = $("#cont2").offset().top;
           }
		} else {
			
           if($(window).scrollTop() >= $("#cont6").offset().top){
             scrSet = $("#cont5").offset().top;
           }else if($(window).scrollTop() >= $("#cont5").offset().top){
             scrSet = $("#cont4").offset().top;
           }else if($(window).scrollTop() >= $("#cont4").offset().top){
             scrSet = $("#cont3").offset().top;
           }else if($(window).scrollTop() >= $("#cont3").offset().top){
             scrSet = $("#cont2").offset().top;
           }else if($(window).scrollTop() >= $("#cont2").offset().top){
             scrSet = $("#header").offset().top;
           }

		}
		$('html,body').stop().animate({scrollTop:scrSet},scrSpeed,scrEasing);
		return false;

	});

});
</script>

特にパララックスサイトには、スムースな移動と任意の位置へのマウスホイール設定は合うと思います。

宜しければ、ご参考までに。

-jquery, wordpress

執筆者:

関連記事

wp_mail関数の添付ファイル$attachmentsの使用方法

wordpressのメール関数であるwp_mailを使って添付ファイルを送る時の$attachmentsの設定は、$attachmentsに添付ファイルとしたい情報のurlを指定するだけで送れます。配 …

phpのIE分岐処理

IEだけは、条件分岐させる必要があるケースは多々あります。 そんな時に重宝するのが、下記のスクリプト。 <?php $ua = $_SERVER[‘HTTP_USER_AGENT’]; if ( …

レスポンシブにも利用可能、要素の高さを揃えるjquery.matchHeight.jsが便利!

ホームページの制作で任意の要素を横並びでレイアウトしたい場面は多々ありますよね。 そんな時、簡単に横並びする要素の高さを揃えるのに便利なjQueryプラグインがjquery.matchHeight.j …

wordpressでのサイトを作成します

wordpressを使用したホームページを制作します。デザイン・機能ともにあらゆるカスタマイズをお引き受け致します。