以前、iPhone5sのプロダクトページがリリースした頃に
簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して
1ページをフルスクリーン表示にして、画面全体をスクロールさせることで
1ページ分(1コンテンツ分)を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが
自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。

【2014/08/05 追記】
各ブロック内での横スライド機能を追加しました。

jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法

まずは動作サンプルから。
下記のサンプル画面でマウスホイールスクロールもしくは
画面右側のナビゲーションボタン等を使って
画面(ページ)を切り替えてみてください。

「jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法」サンプルを別枠で表示

以前話題になっていたiPhone5sのプロダクトページのように
1つのコンテンツを1画面内でフルスクリーン表示として
スクロールやボタンクリックで画面全体をスクロールさせて
次の画面を表示(遷移)する構成になっています。

ブラウザのウィンドウサイズをリサイズしても
1コンテンツは1画面内で展開する様になっています。

【2014/08/05 追記】
サンプル内では3~5ブロック目に横スライド機能を付けてあります。
設置する横スライドブロックの個数は自由に増減でき開始位置の設定も可能になっています。

このサンプルファイルの全体構成について
まずはHTMLから。

◆HTML
<div id="container">

<section id="stage1" class="stageBase">
<div class="fieldWrap">
<h1>jQuery OnePage Scroll</h1>
<p>ここは1ページ目</p>
</div><!--/.fieldWrap -->
</section>

<section id="stage2" class="stageBase">
<div class="fieldWrap">
<p>ここは2ページ目</p>
</div><!--/.fieldWrap -->
</section>

<section id="stage3" class="stageBase">
<div class="stageSlide">
	<div class="slidePanel">
	<div class="fieldWrap">
	<p>ここは3ページ目<br>
	スライドエリア【1】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<div class="slidePanel">
	<div class="fieldWrap">
	<p>スライドエリア【2】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<div class="slidePanel">
	<div class="fieldWrap">
	<p>スライドエリア【3】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->
</div><!--/.stageSlide -->
</section>

<section id="stage4" class="stageBase">
<div class="stageSlide">
	<div class="slidePanel">
	<div class="fieldWrap">
	<p>スライドエリア【1】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<div class="slidePanel slideInitial">
	<div class="fieldWrap">
	<p>ここは4ページ目<br>
	スライドエリア【2】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<div class="slidePanel">
	<div class="fieldWrap">
	<p>スライドエリア【3】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

</div><!--/.stageSlide -->
</section>

<section id="stage5" class="stageBase">
<div class="stageSlide">
	<div class="slidePanel">
	<div class="fieldWrap">
	<p>スライドエリア【1】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<div class="slidePanel">
	<div class="fieldWrap">
	<p>スライドエリア【2】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<div class="slidePanel">
	<div class="fieldWrap">
	<p>スライドエリア【3】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<div class="slidePanel slideInitial">
	<div class="fieldWrap">
	<p>ここは5ページ目<br>
	スライドエリア【4】</p>
	</div><!--/.fieldWrap -->
	</div><!--/.slidePanel -->

	<h2>COPYRIGHT &copy; <a href="http://black-flag.net/">BLACKFLAG.NET</a> ALL RIGHTS RESERVED.</h2>
</div><!--/.stageSlide -->
</section>

</div><!--/#container-->

まず、すべてを囲う大枠ブロック要素を用意し(サンプルでは「#container」)
その中に1画面分のベースとなる任意のブロック要素(サンプルでは「.stageBase」)を
作成する画面数分、設置します。
※サンプルでは5画面設定にしてあるのでブロック要素「.stageBase」を5つ設置

◆HTML(縦スクロールブロック枠組)
<div id="container">
<section class="stageBase"></section>
<section class="stageBase"></section>
<section class="stageBase"></section>
<section class="stageBase"></section>
<section class="stageBase"></section>
</div><!--/#container-->

サンプルでは各画面を囲うタグを<section>にしていますが
ここは<div>など別のタグで構成することも可能です。

サンプル内3~5ブロック目の横スライド機能については
以下の様に「.stageSlide」のクラスで囲ったブロック要素を配置し
その中に横スライドさせる画面数分「.slidePanel」のクラスで
ブロック要素を配置します。

◆HTML(横スライドブロック枠組)
<div class="stageSlide">
	<div class="slidePanel"></div>
	<div class="slidePanel"></div>
	<div class="slidePanel"></div>
</div><!--/.stageSlide -->

デフォルトの状態ではページロード時
パネル1枚目(一番左)が最初に表示されるようになっていますが
任意の番号を最初に表示させるには「.slidePanel」に
さらに「.slideInitial」のクラスを追加します。
※上記サンプルHTMLソース参照

サンプル動作内では、横スライドの開始位置を
・3ブロック目は全3スライド中、1つ目のスライド(一番左)
・4ブロック目は全3スライド中、2つ目のスライド(真ん中)
・5ブロック目は全4スライド中、4つ目のスライド(一番右)
といったように開始位置を変えてあります。

【2014/08/31 追記】
現在地のスライドパネル(.slidePanel)には、別途クラス「.activeClass」が付くようになっています。

これに対してCSSは以下の様になっています。

◆CSS
body {
	position: relative;
	overflow: hidden;
	visibility: hidden;
}

/* #container
--------------------------- */
#container {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
	z-index: 1;
}

/* .stageBase
--------------------------- */
.stageBase {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.stageBase .fieldWrap {
	padding: 100px 0 0 0;
	text-align: center;
}
#stage1 {background:#fff;}
#stage2 {background:#eee;}
#stage3 {background:#ddd;}
#stage4 {background:#ccc;}
#stage5 {background:#bbb;}

/* .stageSlide
--------------------------- */
.stageSlide {
	position: relative;
	overflow: hidden;
	visibility: hidden;
}
.stageSlide .slideWrap {
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
}
.stageSlide .slideWrap:before,
.stageSlide .slideWrap:after {
	content: " ";
	display: table;
}
.stageSlide .slideWrap:after {clear: both;}
.stageSlide .slideWrap {*zoom: 1;}

.stageSlide .slidePanel {
	float: left;
	overflow: hidden;
}

.stageSlide .sdPrev,
.stageSlide .sdNext {
	margin-top: -25px;
	top: 50%;
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	z-index: 99;
}
.stageSlide .sdPrev {
	left: 80px;
	background: transparent url(../img/slide_prev.png) no-repeat left top;
}
.stageSlide .sdNext {
	right: 80px;
	background: transparent url(../img/slide_next.png) no-repeat left top;
}

.stageSlide .slideNav {
	bottom: 70px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 98;
}
.stageSlide .slideNav a {
	margin: 0 5px;
	width: 15px;
	height: 15px;
	background: transparent url(../img/nav.png) no-repeat center center;
	display: inline-block;
	overflow: hidden;
}
.stageSlide .slideNav a.pnActive {
	background: transparent url(../img/nav_acv.png) no-repeat center center;
}

/* #pageNav
--------------------------- */
#pageNav {
	top: 0;
	right: 25px;
	width: 15px;
	text-align: center;
	position: fixed;
	z-index: 2;
}
#pageNav ul {
	width: 15px;
	display: block;
}
#pageNav ul li {
	padding-bottom: 5px;
	width: 15px;
	height: 15px;
	display: block;
	overflow: hidden;
}
#pageNav ul li a {
	width: 15px;
	height: 15px;
	background: transparent url(../img/nav.png) no-repeat center center;
	display: block;
}
#pageNav ul li.activeStage a {
	background: transparent url(../img/nav_acv.png) no-repeat center center;
}

/* #pageDown
--------------------------- */
#pageDown {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	text-align: center;
	position: fixed;
	overflow: hidden;
	z-index: 3;
}
#pageDown a {
	margin: 0 auto;
	width: 30px;
	height: 30px;
	background: transparent url(../img/next_arw.png) no-repeat center center;
	display: block;
}

bodyに対して「position: relative;」「overflow: hidden;」「visibility: hidden;」は
必須となっております。

全体を囲うブロック要素「#container」を「position: absolute;」にして
この要素を上下移動させて画面遷移をしている構成になります。

縦に並ぶブロック要素のレイアウト等を指定する部分は「.stageBase」、
横スライドのブロック要素のレイアウト等を指定する部分は「.stageSlide」になりますので
ページネーション部分含め、装飾部分をCSSで調整をしてください。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
	var setWrap = $('#container'),
	setBase = $('.stageBase'),
	scrollSpeed = 1000,
	scrollEasing = 'swing',
	slideSpeed = 500,
	slideEasing = 'linear',
	downBtn = 'show', // 'show' or 'hide'
	urlHash = 'on', // 'on' or 'off'
	setHash = '!page';

	var url = document.URL,
	stageSlide = $('.stageSlide');

	setWrap.append('<nav id="pageNav"><ul></ul></nav>');
	setBase.each(function(i){
		$('#pageNav ul').append('<li class="pagePn'+(i+1)+'"><a href="javascript:void(0);"></a></li>');
	});

	if(downBtn == 'show'){
		setWrap.append('<div id="pageDown"><a href="javascript:void(0);"></a></div>');
	}

	var coreNav = $('#pageNav'),
	setNav = coreNav.find('ul'),
	navList = setNav.find('li'),
	navLength = navList.length;
	setNav.find('li:first').addClass('activeStage');
	$('body').attr('data-page','1');

	$(window).load(function(){
		// StageHeight
		$(window).resize(function(){
			var wdHeight = $(window).height();
			setBase.css({height:wdHeight});

			var resizeContTop = parseInt(setWrap.css('top'));

			if(resizeContTop === 0){
				setWrap.css({top:'0'});
			} else {
				var activeStagePos = setNav.find('li.activeStage');
				activeStagePos.each(function(){
					var posIndex = navList.index(this);
					setWrap.css({top:-(wdHeight*posIndex)});
				});
			}

			coreNav.each(function(){
				var navHeight = $(this).height();
				$(this).css({top:((wdHeight)-(navHeight))/2});
			});
		}).resize();

		// StageSlide
		stageSlide.each(function(){
			var thisSlide = $(this),
			chdPanel = thisSlide.find('.slidePanel'),
			chdPanelLength = chdPanel.length;

			chdPanel.eq('0').addClass('activePanel').end().wrapAll('<div class="slideWrap"></div>');
			thisSlide.append('<a href="javascript:void(0);" class="sdPrev"></a><a href="javascript:void(0);" class="sdNext"></a><div class="slideNav"></div>');

			var thisWrap = thisSlide.find('.slideWrap'),
			thisPrev = thisSlide.find('.sdPrev'),
			thisNext = thisSlide.find('.sdNext'),
			thisPn = thisSlide.find('.slideNav');

			chdPanel.each(function(i){
				thisPn.append('<a href="javascript:void(0);" class="slidePn'+(i+1)+'"></a>');
			});

			var pnPoint = thisPn.find('a'),
			pnFirst = thisPn.find('a:first'),
			pnLast = thisPn.find('a:last'),
			pnCount = thisPn.find('a').length;

			pnFirst.addClass('pnActive');

			pnPoint.click(function(){
				var pnNum = pnPoint.index(this),
				mvWidth = chdPanel.width(),
				wpWidth = thisWrap.width(),
				moveLeft = mvWidth*pnNum;
				thisWrap.stop().animate({left: -(moveLeft)},slideSpeed,slideEasing);
				pnPoint.removeClass('pnActive');
				$(this).addClass('pnActive');
				pnAcvCheck();
			});

			thisPrev.click(function(){
				thisWrap.not(':animated').each(function(){
					thisPn.find('.pnActive').prev().click();
					pnAcvCheck();
				});
			});

			thisNext.click(function(){
				thisWrap.not(':animated').each(function(){
					thisPn.find('.pnActive').next().click();
					pnAcvCheck();
				});
			});

			function pnAcvCheck(){
				var pnAcvNum = thisPn.find('.pnActive');
				pnAcvNum.each(function(){
					var acvIndex = pnPoint.index(this);
					acvCount = acvIndex+1;
					if(1 == acvCount){
						thisPrev.css({display:'none'});
						thisNext.css({display:'block'});
					} else if(pnCount == acvCount){
						thisPrev.css({display:'block'});
						thisNext.css({display:'none'});
					} else {
						thisPrev.css({display:'block'});
						thisNext.css({display:'block'});
					}
					chdPanel.removeClass('activePanel').eq(acvIndex).addClass('activePanel');
				});
			}
			pnAcvCheck();

			$(window).resize(function(){
				var setWrapLeft = parseInt(thisWrap.css('left')),
				setPanelWidth = chdPanel.width(),
				setLeft = setWrapLeft / setPanelWidth;

				var sdWidth = $(window).width(),
				sdHeight = $(window).height();
				thisSlide.css({width:sdWidth,height:sdHeight});
				thisWrap.css({width:(sdWidth*chdPanelLength),height:sdHeight});
				chdPanel.css({width:sdWidth,height:sdHeight});

				var setWidth = chdPanel.width(),
				adjLeft = setWidth * setLeft;
				thisWrap.css({left:(adjLeft)});
			}).resize();

			var thisInt = thisWrap.find('.slideInitial');
			thisInt.each(function(){
				var pnlInt = thisWrap.find('.slideInitial');
				pnlInt.each(function(){
					var intIndex = chdPanel.index(this);
					pnPoint.eq(intIndex).click();
				});
			});
			setTimeout(function(){
				thisSlide.css({visibility:'visible',opacity:'0'}).animate({opacity:'1'},slideSpeed);
			},slideSpeed);
		});

		// MouseWheelEvent
		var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
		$(document).on(mousewheelevent,function(e){
			if(!(setWrap.is(':animated'))){
				e.preventDefault();
				var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
				if (delta < 0){
					motionDown();
				} else {
					motionUp();
				}
			}
		});

		// KeyEvent
		$('html').keydown(function(e){
			if(setWrap.is(':animated') || setWrap.find('*').is(':animated')){
				e.preventDefault();
			} else {
				var acvStgSwP = parseInt($('body').attr('data-page'));
				switch(e.which){
					case 33: // Key[PgUp]
					e.preventDefault();
					motionUp();
					break;

					case 34: // Key[PgDn]
					e.preventDefault();
					motionDown();
					break;

					case 38: // Key[↑]
					e.preventDefault();
					motionUp();
					break;

					case 40: // Key[↓]
					e.preventDefault();
					motionDown();
					break;

					case 37: // Key[←]
					e.preventDefault();
					var dsChkP = $('#stage' + acvStgSwP + ' .sdPrev').css('display');
					if (!(dsChkP == 'none')){
						$('#stage' + acvStgSwP + ' .sdPrev').click();
					}
					break;

					case 39: // Key[→]
					e.preventDefault();
					var dsChkN = $('#stage' + acvStgSwP + ' .sdNext').css('display');
					if (!(dsChkN == 'none')){
						$('#stage' + acvStgSwP + ' .sdNext').click();
					}
					break;
				}
			}
		});

		// FlickEvent
		var isTouch = ('ontouchstart' in window);
		setWrap.on(
			{'touchstart': function(e){
				if(setWrap.is(':animated')){
					e.preventDefault();
				} else {
					this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
					this.topBegin = parseInt($(this).css('top'));
					this.top = parseInt($(this).css('top'));
					this.touched = true;
				}
			},'touchmove': function(e){
				if(!this.touched){return;}
				e.preventDefault();
				this.top = this.top - (this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY));
				this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
			},'touchend': function(e){
				if (!this.touched) {return;}
				this.touched = false;

				if(((this.topBegin)-30) > this.top){
					motionDown();
				} else if(((this.topBegin)+30) < this.top){
					motionUp();
				}
			}
		});

		// ScrollUpEvent
		function motionUp(){
			var stageHeightU = setBase.height(),
			contTopUp = parseInt(setWrap.css('top')),
			moveTopUp = contTopUp + stageHeightU;
			$('input,textarea').blur();
			if(!(contTopUp === 0)){
				setWrap.stop().animate({top:moveTopUp},scrollSpeed,scrollEasing);
				setNav.find('li.activeStage').removeClass('activeStage').prev().addClass('activeStage');

				var acvStageP = parseInt($('body').attr('data-page')),
				setPrev = acvStageP-1;
				$('body').attr('data-page',setPrev);
				if(downBtn == 'show'){
					pagePos();
				}
			}
			if(urlHash == 'on'){
				replaceHash();
			}
		}

		// ScrollDownEvent
		function motionDown(){
			var stageHeightD = setBase.height(),
			contTopDown = parseInt(setWrap.css('top')),
			moveTopDown = contTopDown - stageHeightD;
			$('input,textarea').blur();

			var contHeight = setWrap.height(),
			maxHeightAdj = -(contHeight - stageHeightD);

			if(!(contTopDown == maxHeightAdj)){
				setWrap.stop().animate({top:moveTopDown},scrollSpeed,scrollEasing);
				setNav.find('li.activeStage').removeClass('activeStage').next().addClass('activeStage');

				var acvStageN = parseInt($('body').attr('data-page')),
				setNext = acvStageN+1;
				$('body').attr('data-page',setNext);
				if(downBtn == 'show'){
					pagePos();
				}
			}
			if(urlHash == 'on'){
				replaceHash();
			}
		}

		// SideNaviClick
		navList.click(function(){
			if(!(setWrap.is(':animated'))){
				var crtIndex = navList.index(this),
				crtHeight = $(window).height();
				setWrap.stop().animate({top:-(crtHeight*crtIndex)},scrollSpeed,scrollEasing);
				setNav.find('li.activeStage').removeClass('activeStage');
				$(this).addClass('activeStage');

				$('body').attr('data-page',crtIndex+1);

				if(downBtn == 'show'){
					pagePos();
				}
				if(urlHash == 'on'){
					replaceHash();
				}
			}
		});

		// PageDownBtnClick
		$('#pageDown a').click(function(){
			if(!(setWrap.is(':animated'))){
				var navActive = setNav.find('li.activeStage');
				navActive.each(function(){
					var navIndex = navList.index(this),
					setNav = navIndex+1;
					if(!(setNav == navLength)){
						$(this).next().click();
					}
				});
				if(urlHash == 'on'){
					replaceHash();
				}
			}
		});
		function pagePos(){
			var pnAcv = coreNav.find('li.activeStage');
			pnAcv.each(function(){
				var pnIndexN = navList.index(this),
				pnCountN = pnIndexN+1;
				if(pnCountN == navLength){
					$('#pageDown').css({display:'none'});
				} else {
					$('#pageDown').css({display:'block'});
				}
			});
		}

		// HashReplace
		function replaceHash(){
			var pnAcv = coreNav.find('li.activeStage');
			pnAcv.each(function(){
				var pnIndexN = navList.index(this),
				pnCountN = pnIndexN+1;
				location.hash = setHash + pnCountN;
			});
		}
		if(urlHash == 'on'){
			replaceHash();
		}

		// OpeningFade
		$('body').css({visibility:'visible',opacity:'0'}).animate({opacity:'1'},1000);

		// LoadPageMove
		if(url.indexOf(setHash) !== -1){
			var numSplit = ((url.split(setHash)[1])-1);
			navList.eq(numSplit).click();
		}
	});

	// HashChangeEvent
	if(urlHash == 'on'){
		$(window).on('hashchange',function(){
			var stateUrl = document.URL,
			hashSplit = ((stateUrl.split(setHash)[1])-1);
			navList.eq(hashSplit).click();
		});
	}
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

var setWrap = $(‘#container’) すべてを囲うブロック要素(クラスでも可)
setBase = $(‘.stageBase’) 1画面を囲うブロック要素
scrollSpeed = 1000 スクロール(縦)移動スピード
scrollEasing = ‘swing’ スクロール(縦)移動する際のイージング
slideSpeed = 500 横スライド時の移動スピード
slideEasing = ‘linear’ 横スライド時のイージング
downBtn = ‘show’ 画面下にNEXTボタンの設置有無(表示 = show, 非表示 = hide)
urlHash = ‘on’ ハッシュをつけてのURL操作の有無(有 = on, 無 = off)
setHash = ‘!page’ URLの後ろに付けるハッシュ用テキスト

これらの設定値を変更することで微調整が可能になっています。

サンプル画面で表示している画面下の▼ボタンは
「downBtn」の指定を変えてもらうことで、表示/非表示を切り替えることができます。
※見た目の装飾についてはCSS側で「#pageDown、#pageDown a」を調整します。

画面右側のナビゲーションボタンについては
作成する画面数によって自動でリストを生成するようになっており、
見た目等を変える場合はCSS側で「#pageNav」の部分を調整します。

マウスホイールでのスクロールと別に
フリック(スワイプ?)動作での制御も入れてありますので
iPhone/iPadなどのスマホ・タブレットでも動作すると思います。

【2017/01/09 追記】
キーボードの上下矢印キー操作で画面移動するほかに、左右の矢印キーでも横スライド機能が動作するように追加しました。

「urlHash = ‘on’」ここを“on”にすることで
URLの最後に各画面を個別に判別する為の「#(ハッシュ)」が付与されるようになります。

付与するテキストは「#」だけでなく識別名を入れられるように
「setHash = ‘!page’」の値で設定することが可能です。
※「!」は必須ではないので「#」だけにしたい時は「!」を付けずにテキストのみで記述してください。

ここで設定している「#(ハッシュ)」をhasheventを使うことで、ページ内で画面遷移をした後、
ブラウザでの「戻る」「進む」ボタンでも画面が行き来(スクロール移動)するようになっています。

このページ内でのブラウザの「戻る」「進む」ボタン動作が必要ない場合には
「urlHash」の指定を“off”にしてください。

固有のURLから特定画面(○番目の画面)を指定する場合は
このハッシュの後ろに表示する画面番号を付けたURLを使って指定することが可能です。
※画面表示後、スクロールアニメーションが実行されます。
※この動作に関しては「urlHash」の指定を“off”にしていても実行されます。

サンプルページの3ページ目を表示【http://black-flag.net/devel/jQueryOnePageScroll/#!page3】

スクリプト全体は画面スクロール遷移動作の枠組みのみとなっているので
それぞれ各画面内のレイアウト等については
CSSや別途JSなどのスクリプトを使って形成する形になります。

スクリプト自体はシンプルではないかもしれませんが
HTMLとCSS構成に関してはカスタマイズしやすい形にはなっているかな、、と思っております。

jQueryを使って1ページごとにスクロールして画面遷移させるUIを実装する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (139)

  • peco | 2014.05.29 16:28

    最近この手のサイトを良く見かけカッコいいなと思っていたので
    非常に参考になりました。

  • BlackFlag | 2014.05.30 1:56

    >pecoさん
    コメントありがとうございます。
    このスクロールスクリプトがお役に立ったようで
    嬉しく思っております。

    ほかにもいろいろと紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

  • noko | 2014.06.03 13:25

    まさにこのようなページを作ろうと探していたところでした!
    参考にさせて頂きます。ありがとうございました!

  • BlackFlag | 2014.06.04 0:21

    >nokoさん
    コメントありがとうございます。
    このスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    カスタマイズ等あれこれお試しいただけると幸いです。
    よろしくお願いします。

  • ryu-ya | 2014.06.14 23:49

    こんばんわ!
    こんなスクリプトを求めていました!ぜひぜひ使わせてください!
    ちなみになんですが、このスクリプトを使ってiPhone5Cのページのように途中までスクロールしたらアニメーションを発生させるような仕組みを作ることは可能なんでしょうか??

    もし可能でしたらお聞かせくださいm(_ _)m!

  • BlackFlag | 2014.06.17 2:19

    >ryu-yaさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいているようで
    嬉しく思っております。

    特定のスクロール位置でアニメーションを実行させる仕組みについては
    もちろん実装可能です。

    やり方の一つとしては、
    bodyに「data-page」属性でアクティブなページ番号を付与するようになっておりますので
    スクロールアップとスクロールダウンの処理時に「data-page」ナンバーを見て
    該当番号の時にアニメーションを実行させる、といったイメージになるかと思います。

    もしくは、別の方法として
    当ブログ別記事の
    ————————————
    ・jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験
    http://black-flag.net/jquery/20140128-4943.html
    ————————————
    こちらを見ていただくと参考になるかと思っております。

    お試しください。
    よろしくお願いします。

  • ryu-ya | 2014.06.23 16:43

    なるほどですね!
    恥ずかしながらdata属性系はほぼ触ったことがなくて想像もつかないので、
    jQueryの方法を拝見して検証しながらカスタマイズしてみようと思います!

    ご丁寧にお教え下さいましてありがとうございます!
    今後もお知恵をお借りするかと思いますが、楽しみに拝見しております!

  • yu-ta | 2014.08.06 6:02

    かっこいいサイトを作りたいと思い検索していたところ、こちらのサイトにたどり着きました!
    こちらの(../img/nav.png)の部分の画像を別々のものにする場合はどのようにすればよろしいでしょうか?
    (例えばnav01.png=top nav02.png=profile nav03.png=photo 等です)

  • BlackFlag | 2014.08.07 0:34

    >yu-taさん
    コメントありがとうございます。
    このスクロールスクリプトをご検討いただいているようで
    嬉しく思っております。

    ナビゲーション部分の画像についてですが
    確かに別々の画像を指定するパターンは多くありそうでしたので
    ナビゲーションの<li>一つひとつに個別のクラスをつけるように調整しました。

    それぞれのクラスに対して背景画像を敷いて
    個別に画像を指定することが実現できるかと思います。

    記事内のスクリプトおよびサンプル(ダウンロード)ファイルを
    ご確認ください。

    よろしくお願いします。

  • yu-ta | 2014.08.07 7:10

    早急なお返事、誠にありがとうございます!

    今回追加された部分がこの部分だと思い、

    とりあえず pagePn1.jpg pagePn2.jpg~ の画像を用意しました。(的外れですが……

    >それぞれのクラスに対して背景画像を敷いて
    >個別に画像を指定することが実現できるかと思います。
    http://html-css.aimary.com/stylesheet/css_class.php
    このページを読み、何となくこういうことなのだろうなとは理解したのですが、
    ・どの部分にどのように記述すれば良いのか。
    がわかりません。
    是非ともご教授いただけましたら幸いです。

  • BlackFlag | 2014.08.09 10:58

    >yu-taさん
    ブラウザの開発ツールなどでナビゲーション部分のソースを見ていただくと
    上から「.pagePn1」~「.pagePn5」といった形で
    それぞれクラスがつくようにしてありますので
    CSS側で「.pagePn1」クラスには1つ目に表示する画像を背景画像で指定し
    「.pagePn2」には2つ目に表示する画像を背景画像で指定、
    3,4,5番目も同じように指定するような形になります。

    お試しください。
    よろしくお願いします。

  • yu-ta | 2014.08.12 16:08

    懇切丁寧に教えていただき、本当にありがとうございました!

  • angi | 2014.08.19 11:25

    かっこいいスクリプトを紹介いただきましてありがとうございます!!
    早速自分のポートフォリオサイトに活用させていただいているのですが、
    つまづいております。。

    ページ遷移する際に、右側のページナビが出ないんです。
    その他のナビは出ておりますし、機能もしているのですが。。
    (横スライドの際のナビは出ております)
    CSSもjsも間違いないように思いますが、原因これじゃないか?というのが
    あれば教えていただきたいのですが><

    wordpressに組み込んでいるのも原因でしょうか。。

  • T2 | 2014.08.19 22:35

    いつも参考にさせていただいています。
    本当に有益で貴重な情報をありがとうございます。

    一つご教授いただければと思い、コメントさせていただきます。

    トップstage1の背景に画像を設定した場合、
    複数の画像を設定して、ページをリロードする度にランダムに画像を選択表示するようなことはできないのでしょうか??

    何卒宜しくお願いいたします。

  • T2 | 2014.08.19 22:45

    先ほどの質問に追記させていただきます。

    以下のBlackFlagさんの過去のページにあるように、
    「背景画像をランダムに表示させる」ものを、今回の「1ページごとにスクロールして画面遷移する」ものと合わせたカスタマイズが出来ないかという質問です。

    http://black-flag.net/jquery/20120919-4168.html
    http://black-flag.net/devel/jQueryBgFullScreenImg/index_single_randam.html

    私、javascriptについては全くのシロウトなもので、申し訳ありませんが何かご教授いただければありがたいと存じます。

  • BlackFlag | 2014.08.21 1:06

    >angiさん
    コメントありがとうございます。
    このスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが
    実装されているHTMLやCSSの全体構成を確認させていただかないと
    こちらでは何とも判断できません。。

    当記事のサンプルの構成と
    実装されたHTMLおよびCSSで異なっている部分を
    再度確認してみてください。

    実装に関してはWordPressでも組み込み可能です。

    よろしくお願いします。

  • BlackFlag | 2014.08.21 1:16

    >T2さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました各ブロック内にランダムで画像を表示する動作については
    当スクリプトでも実装可能です。

    やり方は様々あると思いますが、当ブログの
    http://black-flag.net/jquery/20120919-4168.html
    を使用する場合は、
    こちらの記事のランダムサンプルスクリプト10行目の
    「body」のところをstage1のID「#stage1」に変更したりすることで
    実装可能になるのではないかと思っております。

    憶測での回答になってしまいますが
    お試しください。

    よろしくお願いします。

  • T2 | 2014.08.22 11:48

    早速のご返事ありがとうございます。
    ご指摘の通り、「body」→「#stage1」への変更で、きちんとランダム表示になりました!
    流石です!

    追加で申し訳ないのですが、もう一点お伺いしたいことがあります。
    このhttp://black-flag.net/jquery/20120919-4168.htmlページにある
    「スライド」と「ランダム」を混ぜるようなやり方は無いのでしょうか?

    稚拙ながら「スライド」のjsをベースにしながら、画像の読み込み部分のみを下記のようにしたところ、当たり前ですが「画像1枚目はランダム」→その後は「画像1」→「画像2」、、、
    という表示になりました。
    しかし希望としては、全ての画像スライドをランダムにしたいのです。

    毎度のことですが、何かご教授いただければありがたいと存じます。

    ————————–以下js————————–

    var maxNum = 3; // 最大枚数
    var rdm = parseInt(Math.random()*(maxNum))+1;

    $(‘#stage1′).prepend(
    ‘<div id=”fullbg_base”><div id=”fullbg_stretch”>’ +
    ‘<img src=”img/img’ + rdm + ‘.jpg”>’ +
    ‘<img src=”img/bg/img1.jpg”>’ +
    ‘<img src=”img/bg/img2.jpg”>’ +
    ‘</div></div>’
    );

  • BlackFlag | 2014.08.24 12:24

    >T2さん
    フルスクリーン表示がうまく動作したようで
    安心致しました。

    再度ご質問いただいた件についてですが
    表示順をランダムにする方法はさまざまあると思いますが
    当ブログの別記事
    http://black-flag.net/jquery/20130327-4522.html
    こちらの応用編スクリプトの6~19行目辺りを使用して
    imgの順序をランダムに並べるようにすることで
    実現できるのではないかと思っております。
    ※18行目のスクリプトは「.append」の中は<li>を外して
    「.append(array[i])」とする必要があるかと思います。

    お試しください。
    よろしくお願いします。

  • ペペ | 2014.08.27 1:34

    いつも拝見させていただいております。
    横スクロールする際にも、現在地がわかるようにclassか何かを振りたいと思っているのですが、未熟なものでどの部分をカスタマイズすればよいかがわからず。。。
    もしよろしければご教授いただけないでしょうか。
    よろしくお願いいたします。

  • BlackFlag | 2014.08.31 23:39

    >ペペさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    横スライドの現在地の状態についてですが
    必要な場面が多くありそうでしたので
    アクティブなスライドに対して「.activePanel」のクラスが付くように
    記事内のスクリプトを調整してみました。

    サンプルファイルと共にご確認いただければと思います。

    よろしくお願いします。

  • 樋口みちよ | 2014.09.03 12:57

    jQueryOnePageScrollを使用してサイトを作成中です。ほぼ完成に近いのですが、プリントアウトするとcssがはずれてしまうのですが、これはjQueryOnePageScrollと関係があるのでしょうか?今回のサイト作成が初めてで、JavaScriptはいまいち理解しておりません。もしjQueryOnePageScrollが原因で有る場合は、簡単な言葉でご教授願います。

  • BlackFlag | 2014.09.04 2:23

    >樋口みちよさん
    コメントありがとうございます。

    「プリントアウトするとcssがはずれてしまう」とは
    どのようなことを仰っているのかがはっきりとは分からないのですが
    印刷に関しては当スクリプトは関係ないと思われます。

    おそらく印刷する際のブラウザのデフォルトの状態で
    背景色や背景画像を印刷しない設定になっていることで
    CSSが効いていないとご判断されているのではないでしょうか。

    「css 印刷」や「css 印刷 背景」などでGoogle検索すると
    CSSで印刷に関しての記事がたくさん出てくると思いますので
    参考にしてみてください。

    よろしくお願いします。

  • K | 2014.09.05 16:59

    まさにこんなJSを探してました!
    ありがとうございます!

    1点質問なのですが、このJSはIE7も対応させることは可能でしょうか?
    すでにIE7は切り捨ててもいいと思うのですが…

    何卒宜しくお願いいたします。

  • BlackFlag | 2014.09.07 13:13

    >Kさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    IE7(IE6)に関しては
    もう動作確認はしておりません。

    IE7で動作することが必須であれば
    お手数ですが他のプラグイン等をご検討ください。

    よろしくお願いします。

  • FK | 2014.09.10 17:05

    探していたjsが見つかってよかったです。
    実装を試しているのですが、任意のページに移動する、スムーズスクロールも同時に実装したい場合、どうすればよいでしょうか?

  • FK | 2014.09.10 17:27

    何度もすいません。
    普通にリンクを貼ったら、スムーズにスクロールして遷移しました。
    素晴らしいスクリプトです。
    実装を引き続き試してます。
    ありがとうございます。

  • ユーグレナ | 2014.09.30 1:23

    いつも勉強させて頂いています。
    ありがとうございます。

    お伺いしたいのですが、
    各stageごと、cssで背景画像をcover設定すると、
    パソコンではウィンドウサイズにフィットするものの
    最後のstage以外はiphoneやipadでフィットしてきません。
    (iphoneやipadでも、コピーライトがおいてある最後のステージだけは
    背景画像のcover設定が活きています)

    各stageのコンテンツは、画像を均等に並べたりgooglemapを埋め込むなど
    特に珍しいことはしていません。
    背景をリサイズしメディアクエリなどで対応しようと試しましたが、
    うまくいきませんでした。

    こうした現象はスクリプトまたは既存のcssになにか影響されているのでしょうか。

  • BlackFlag | 2014.10.05 0:30

    >ユーグレナさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    CSSの指定に関しては当記事のスクリプトは
    特に影響しないのではないかと思っているのですが
    サンプルデータでも同様の現象が起こっているのでしょうか。

    もし実装後に起こっていることであれば
    テストURL等お知らせいただければ調査も出来るかと思っております。

    よろしくお願いします。

  • さびのら | 2014.10.09 16:30

    はじめまして。
    いろいろjQuery関連のプラグインを検索していて、こちらにたどり着きました。
    古い時代のHTMLしか触った事がないので、サンプルがあるのは大変助かります。
    有難うございます。

    そこで一つ質問があります。
    スクリプトの
    $(function(){
    から
    });
    部分を外部の.jsファイルにしたいと思うのですが、単純にコピーしてxxx.jsとつけて、
    index.htmlの方に
    <script src=”xxx.js”></script>
    と記述するだけでは動かないのですが、どうすれば外部ファイルを読み込ませることができるのでしょうか?

    お手数ですが教えていただければ幸いです。
    宜しくお願い致します。

  • BlackFlag | 2014.10.10 0:14

    >さびのらさん
    コメントありがとうございます。
    このスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    外部ファイル化する場合は
    その様な構成にしていただくことで問題なく動作すると思います。

    うまく動作しない場合は
    jQueryファイルがきちんと読み込まれているか
    外部ファイル化したJSファイルへのパスが合っているか
    など再度確認してみてください。

    よろしくお願いします。

  • さびのら | 2014.10.10 13:16

    回答ありがとうございます。
    パスなど確認しましたが、それでもやはり動かないようです。

    $(function(){
    から
    });
    まで丸コピーしたファイルをjquery.onepagescroll.jsとして、index.htmlと同じ階層におき、
    index.htmlのheadの中の
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
    の下に
    <script src=”jquery.onepagescroll.js”></script>
    を追記しました。
    index.htmlとjquery.onepagescroll.jsはUTF8NとSJISで保存してあります。
    #ローカル環境、IEとsafariで行っています。

    1画面スクロールのお話しとは違う質問ですので、お手すきの時にでも教えていただければと思います。
    とりあえず自分でもう少し調べてみます。

    以上、宜しくお願い致します。

  • BlackFlag | 2014.10.15 1:08

    >さびのらさん
    参考までにスクリプトを外部ファイル化したデータを用意しましたので
    下記URLよりご確認ください。
    http://black-flag.net/devel/jQueryOnePageScroll/jQueryOnePageScrollFile.zip

    IEの場合、ローカルでページを表示後
    スクリプトを実行させるボタンをクリックしないと
    動作しないのでその辺りもご注意ください。

    よろしくお願いします。

  • 手羽チキ | 2014.10.23 13:58

    初めまして、手羽チキと申します。
    上記のコードを利用させていただいて、新たにサイトを構築しようと考えています。

    それで、少しClassの名前を変更させて使ってみようかと考えたのですが……。
    ClassのstageBaseやstageSlideの「stage」のところを「page」に変えてみたところページの上は上手く行くのですが下に移動する際に1段ずれて下に行くことがわかりました。

    そこで、「page」のところを「stage」や「test」などにしたところ正常に動作でき、
    原因としては「setHash」のところも「page」となっていたからのようです。

    恥ずかしながら、なぜ「page」ではダメだったのか。
    よくわからないので、こうなのでは?という解答をいただけないでしょうか?
    よろしくお願いします。

  • BlackFlag | 2014.10.29 1:04

    >手羽チキさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検証いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    修正した際のデータがどのような形になっていたのか
    見れていないので何とも言えないのですが
    ただクラスを変更するだけでは特にスクリプト動作には影響しないと思っております。

    どうしても動作しない場合は
    クラス名を変更せずにそのままでご使用いただけると幸いです。

    よろしくお願いします。

  • masa | 2014.11.03 22:04

    はじめまして。
    前世代のWebから脱皮しようと勉強中です。
    BlackFlagさんのページは分かりやすく勉強にとてもありがたいです。
    ありがとうございます。

    このスクロールスクリプトもとても洗練されていてきれいですね。
    これを頂いてブログに活用させていただきたいと思ってダウンロード
    させていただきました。
    この中で少しカスタマイズしたいと思っているのですが、私の知識では
    どうにもうまく動かないため、ご教示いただきたくご連絡しました。

    私の希望では、1ページ目の中にフロートでグローバルメニューを設け、
    ファーストビューでは1ページ目の中か画面下部に表示されていて、
    ボタンで下のページに移動した場合は、スクロールしてもブラウザウインドウ
    の上辺に固定されて見えなくならないようにしたいというものです。
    そしてまた1ページ目に戻った場合は、ファーストビューの位置に戻ると
    良いと思っています。
    (ご提供スクリプトで用意されている■のナビは位置関係の目印にしたいと
    思っています。)

    これを頂いたソースに実装しようと試行錯誤を繰り返してみたのですが、
    上記のように固定されず、1ページ目と一緒に消えてしまいます。

    ド厚かましいお願いということは重々承知なのですが、誠に恐縮ですが
    このメニューを実現するためのポイントや方法をご教示頂けないでしょうか?

    なお、ブラウザはブログユーザがPCの素人のため、CromeやFFは入ってない
    ことからIE8を想定しています。

    どうか宜しくお願い申し上げます。

  • みかこ | 2014.11.05 14:02

    はじめまして、このスクリプトを使用してサイトを制作しようと思っている者です。

    質問なのですが、画面右と下に表示される四角いメニューは、ひとつひとつ異なる画像にすることは可能でしょうか?
    「TOP」「ABOUT」「LINK」…など、一目でどの項目に飛べるかわかりやすくしたいのです。

    お忙しいところ恐縮ですがよろしくお願いします。

  • BlackFlag | 2014.11.06 2:03

    >masaさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    当記事のスクリプトだとページのスクロール位置は
    最上部「0」の値から変わらない構成になっているので
    「#container」の「top」の値を見て、
    メニューの位置を制御することになるかと思います。

    メニューの位置固定するには「#container」の「top」の値をみて
    メニューブロックの「position」を「absolute」や「fixed」を
    切り替える形になるかと思っております。

    少し複雑なスクリプト制御が必要になるかもしれませんが
    お試しください。

    よろしくお願いします。

  • BlackFlag | 2014.11.06 2:10

    >みかこさん
    コメントありがとうございます。
    このスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    メニュー部分の見た目については
    ブラウザの開発ツールなどでメニュー部分のソースを見ていただくと分かると思いますが
    「pagePn1」~「pagePn5」といった形で
    一つひとつ個別にクラスがつくようにしてありますので
    CSSで背景画像などを使って見た目を変える作りになっております。
    (横スライド用のメニューも同じです)

    お試しください。
    よろしくお願いします。

  • TP | 2014.11.27 14:16

    初めまして。
    今回このUIを使用させていただきました。
    とても素晴らしいもので使用しておりましたが
    PC、スマートフォンでの稼働は問題ありまでした。
    しかしwindows8 Surfaceでの仕様をしたところ
    フリック操作でのスクロールが認識しない状態でした。
    スマートフォンでは認識してスクロールをしたのですが・・・。
    お手数ですが、解決策のご教授宜しくお願いいたします。

  • TP | 2014.11.27 14:44

    すいません解決いたしました。
    2個対策した結果大丈夫でした。
    1.viewportをCSSの方へ記述
    2.イベント名をMS独自のイベント名へ書き換え
    3.1本指ではなく2本指でフリックする

    お騒がせしました。
    ありがとうございます。
    今後とも使用させていただきます。

  • BlackFlag | 2014.11.30 13:11

    >TPさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    Windows8 Surfaceでの検証(想定)については
    行っておりませんでした。

    対策について今後の参考にさせて頂きます。
    ありがとうございます。

    よろしくお願いします。

  • Ayako | 2014.12.05 10:56

    はじめまして。
    こちらの記事を参考にさせて頂いて、自己のホームページを作成しております。
    ありがとうございます。

    ご質問がございましてコメントさせて頂いております。
    初めの1ページのみをこの動きにして、
    1ページ(1回のスクロール)が終わると2ページ目に入ったところからは通常のスクロール(ホイールした分だけスクロールされる)
    にすることは可能でしょうか。1回目のスクロールだけにアクセントを付けて、それ以降は続いたページにしたいと考えております。

    スクリプトの157行目マウスホイールイベントの「:animeted」の指定を「#stage1:animeted」にしてみたところ動きは思ったとおりにならず、初心者のため他の方法が思い浮かばずにいます。
    すみません。

    お時間があります際で結構ですので、お返事・アドバイスを頂けましたら幸いです。

  • ヒロ | 2014.12.06 11:49

    素晴らしいスクリプトをありがとうございます!

    見た瞬間に気に入ってしまい、自分の技量も考えずに
    すぐにサイト構築し始めてしまいましたが
    なんとも初歩的なところでつまってしまいました。

    htmlとcssだけならまだ分かるのですが、
    恥ずかしながらjavascriptについて詳しくないので
    質問させていただきたいと思います。

    htmlファイルの中にある、「fieldWrap」内に、例えば

    <section id=”stage5” class=”stageBase”>
     <div class=”stageSlide”>
     <div class=”slidePanel”>
     <div class=”fieldWrap”>
      <section id=“****”>
       <a href=”http://***.com/“>こちらをクリック</a>
      </section>
     </div>
     </div>
     </div>
    </section>

    とした場合には、テキストをクリックすれば
    「http://***.com/」へジャンプすると思うのですが、
    一方で「内部リンク」への設定方法がわかりません。

    例えば、stage5【スライドエリア2】が画面に表示されていて
    そこから

     (1)stage1(スライドエリアが無い場合)へジャンプ

     (2)stage3【スライドエリア3】(スライドエリアが有る場合)へジャンプ

    させる場合には、どのようにhtmlに記述すれば
    そのテキストをクリックしてジャンプするようになるのでしょうか?

    私のやりたい事は、stage1の上部(ヘッダー部の直ぐ下)に
    プルダウンメニュー型の「グローバルナビ」を設置したので、
    こちらのナビからいろいろなページに「内部リンク」としてジャンプさせたいのです。

    お忙しい中、基本的な質問で本当に申し訳ございませんが、
    どうぞよろしくお願いいたします。

  • BlackFlag | 2014.12.08 1:03

    >Ayakoさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをお試しいただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    当記事のスクリプトではその様な動作を想定した構成にはしていないので
    少々厳しいかと思っております。

    あまり参考にはならないかもしれませんが
    当ブログ別記事の
    ————————————————–
    ・jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法
    http://black-flag.net/jquery/20141028-5428.html
    ————————————————–
    こちらのスクリプトが理想とされている動作に
    少しだけ近いものになるかと感じておりますので
    カスタマイズ等することで組み込めるかもしれません。。

    ご確認いただけると幸いです。
    よろしくお願いします。

  • BlackFlag | 2014.12.08 1:20

    >ヒロさん
    コメントありがとうございます。
    このスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    内部リンクでの画面遷移については
    ハッシュイベントで設定している値を使って制御できるので
    サンプルスクリプトの構成のままで言うと
    他画面から1ページ目へリンクさせるには
    —————————————
    <a href=”#!page1″>1ページ目へ</a>
    —————————————
    このような記述になります。

    因みに指定が可能なのは縦スクロールする範囲のみになりますので
    横スライド画面の特定のページへのリンクは
    別途スクリプトを作る必要があるかと思っております。

    お試しください。
    よろしくお願いします。

  • Ayako | 2014.12.08 19:58

    ご丁寧にアドバイスありがとうございました。
    ご提案頂いたスクリプトを参考に再度考えていきたいと思います!

  • ヒロ | 2014.12.09 14:29

    早速のご回答ありがとうございました!

    こちらでできなかったのはリンク先の指定で、!が抜けていたのが原因だったようです。
    今後ともブログ、楽しみにしています!

    もう一点、もし、横ページへのリンクのスクリプトを作っていただけるとしたら
    どのくらいの費用でできるものなのでしょうか?

    もしご迷惑でなければ、ご回答いただければと思います。
    (内容が内容ですので、ご回答いただける場合にはメールにご回答ただければと思います。)

  • やまもと | 2014.12.24 11:24

    素晴らしいスクリプトをありがとうございます!

    1点質問です。
    スクロールすると、1ページ毎にURLに#page2、#page3と表示されるのはとても嬉しいのですが
    1ページ目にアクセスした場合、#page1と表示しないようにすることはできますでしょうか?
    1ページ目にアクセスした場合、ハッシュがない状態で表示しスクロールしたら#page2、#page3と
    表示するようにしたいです。

  • AD250 | 2014.12.25 16:17

    初めまして。
    こちらのスクリプト大変ありがたく使わせて頂いております。
    1点ご質問なのですが、どうもMacBookAir(Pro)のトラックパッドで操作する際に、SideNaviClickと、スクロール(トラックパッドで)と交互に押していると、画面が1と2、2と3の間などでズレてしまう現象があります。

    多分トラックパッドのスクロールの余韻が何か関係があるのではないかと思われるのですが、こちら何か対応策は無いでしょうか?

    出来れば、スクロールとPageDownBtnClickのように、ナビゲーションボタンを押した際にには他の動作は無効にできるとありがたいです。

    以上宜しくお願い致します!

  • BlackFlag | 2014.12.26 10:55

    >やまもとさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    現状の仕様だとその様な形は想定しておりません。

    その構成での改修ができましたら
    こちらを更新させていただきたいと思います。

    よろしくお願いします。

  • BlackFlag | 2014.12.26 11:14

    >AD250さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご指摘いただいた点についてですが
    その様な事象が起こる手順が明確に分からない為
    もう少し詳しく教えていただけますでしょうか。
    (当方にMacBookAirの環境が無いという点もありますが…)

    よろしくお願いします。

  • AD250 | 2014.12.27 20:26

    >BlackFlag様

    ご返答頂き有難うございます。

    症状が表れる動作ですが、ご用意されているデモサイトでご説明すると、
    1:MacBookのトラックパッドにてホイールしA⇒Bへ移動する

    2:1の移動している途中で右のナビゲーションからAを押す。
    (この時点でA⇒Bの移動が途中でB⇒Aへの動きに変わります。※)

    3:結果完全にAには戻らずにBとAの間でスクロールが止まる。
    (正確な表現としてはちょっとBが見えた状態といった感じです)

    マウスホイールでは上記のような症状は出ず、macbook(又はMacのトラックパッド)
    のみの症状かと思われます。

    初期動作  移動中
    ホイール  ナビ   ⇒ ナビ動作優先   ※
    ホイール  ▼ボタン ⇒ ホイール動作優先
    ナビ    ▼ボタン ⇒ ナビ動作優先
    ナビ    ホイール ⇒ ナビ動作優先
    ▼ボタン  ホイール ⇒ ▼動作優先
    ▼ボタン  ナビ   ⇒ ▼動作優先

    上記のとおり、移動中に別の動作を行い、その移動中の動作※が優先されてしまう場合のみこの症状が起こっているとも考えられます。
    ***********
    参考:jQuery mousewheel を使う時にMacbookだと厄介な事になる
    http://endlab.net/javascript/19/
    ***********
    どうもMacbookのトラックパッドにはスクロール動作の際にメンドーな事が起こる様な場合もあるようですので、トラックパッド云々というよりは、移動中の動作は移動が終わるまでは行わないような工夫が出来ればと思っております。

    何卒宜しくお願い致します。

  • BlackFlag | 2015.01.04 11:39

    >AD250さん
    事象の詳細のご説明、
    誠にありがとうございました。

    ひとまずスクリプト内にて
    画面スクロール移動中はサイドナビをクリックしても
    動作を実行させないように調整しました。

    デモ画面およびサンプルファイル等にて
    ご確認いただければと思います。

    Mac関連のトラックパッドに関しましても
    情報ありがとうございました。
    今後の参考にさせていただきます。

    よろしくお願いします。

  • AD250 | 2015.01.05 11:45

    >BlackFlag様

    新年明けましておめでとうございます。

    デモを画面の方拝見させて頂きました!
    まだMacBookでは確認がとれておりませんが、意図した物になっていたのだ
    たぶんMacBookでも問題無いと思います!

    新年早々ご対応いただきありがとうございました!
    誠に感謝感謝です。

    ありがとうございました!

  • きた | 2015.01.15 18:12

    はじめまして、この記事のスクリプトを利用させて頂いているのですが、一点質問があってコメントさせて頂きました。
    このスクリプトを使用しているとき、inputなどに文字が打ち込めなくなってしまうのですが、これはjsのほうの仕様なのでしょうか?
    jsに関して初心者なものでつまづいております。。

    この記事のデモページのほうでも、要素の検証でinput要素を追加してみたところ、文字が打ち込めませんでした。
    もし解決法などあるようでしたらご教授頂けましたら幸いです。
    よろしくお願い致します!

  • BlackFlag | 2015.01.16 1:27

    >きたさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    inputの入力について動作確認させていただきました。
    画面をキーボードの「↑」「↓」で移動させる際の動作において
    他のキーボード操作を無効にさせてしまっていたので
    スクリプトを再調整させていただきました。
    (input入力のことは想定していませんでした…)

    サンプルファイルダウンロードも更新いたしましたので
    ご確認いただければと思います。

    よろしくお願いします。

  • smm | 2015.01.16 11:55

    はじめまして。
    この記事の横スライド昨日を使用してカタログページを作りたいと思ってます。
    ページにソースを反映するまではできたのですが
    画像の設置がうまくいかず。。。(画像がつぶれてしまいます)
    初心者でしてまったく解決の見当もつかず;
    どこにどのようなhtmlを埋め込めばいいのかを
    もしよろしければ教えていただけませんでしょうか?

  • BlackFlag | 2015.01.17 11:03

    >smmさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実装されている画面を確認できないと何とも言えないのですが
    要素を追加するHTMLソース(タグ)に関しては
    サンプルソース内の各ブロックを囲っている大元のsectionタグの中に
    記述していただく形になります。

    お試しください。
    よろしくお願いします。

  • ntm | 2015.01.18 3:06

    はじめまして、いつも参考にさせていただいております。
    この記事のスクリプトを使用しているのですが、少々躓いてしまったところがありコメントさせていただきました。

    全スライドエリア【1】の部分にgifアニメを使用したいのですが、
    何度直してもスライドエリア【2】の部分に表示されてしまいます。。。

    解決策はあるのでしょうか?
    もしよろしければ教えていただけますでしょうか?

    あまり関係ない質問だったら申し訳ないです。
    何卒宜しくお願いいたします。

  • BlackFlag | 2015.01.18 11:16

    >ntmさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実装されている画面を確認できないと何とも言えないのですが
    HTMLソースの記述方法や挿入箇所の問題かと思われますので
    再度HTML構成を確認してみてください。

    よろしくお願いします。

  • ntm | 2015.01.19 18:48

    早速コメントありがとうございます。
    度々申し訳ありません。

    挿入箇所を確認してみましたがどうもうまくいかず・・・

    <p>タグを画像に変えたのでCSSもその部分を変えればいけるかなぁと思い試してみたのですが、
    うまくいかず・・・。
    スライドがないところはしっかりと表示されました。

    以下htmlになります。。。
    —————————————————————————————
    <section id=”stage2″ class=”stageBase”><!–2ページ目–>
    <div class=”stageSlide”>
    <div class=”slidePanel”><!–2ページのスライドエリア1–>
    <div class=”fieldWrap”>
    <div class=”img”><img src=”gifアニメ”></div>
    </div><!–/.fieldWrap –>
    </div><!–/.slidePanel –>

    <div class=”slidePanel”><!–2ページのスライドエリア2–>
    <div class=”fieldWrap”>
    <div class=”img”><img src=”gifアニメ”></div>
    </div><!–/.slidePanel –>

    </div><!–/.stageSlide –>
    </section>
    —————————————————————————————

    imgタグのcssは以下になります。
    —————————————————————————————
    .img{
    min-height:1000px;
    min-width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:auto;
    }
    —————————————————————————————

    お忙しいとは思いますが、何卒よろしくお願いします。

  • ntm | 2015.01.20 3:30

    度々申し訳ありません。

    HTMLやCSSを拝見し直し、色々と手探りでやってたら画像挿入することができました!
    ご丁寧にアドバイスありがとうございました。

  • th | 2015.01.22 14:11

    こんにちは。とても参考になります。
    横スクロールをした後に上下にスクロールして戻ってくると、横スクロールをしたままの状態になっていますが、motionUp()かmotionDown()をしたら、勝手に先頭に戻ってくれるようにすることは可能でしょうか?

  • BlackFlag | 2015.01.24 12:31

    >thさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    横スライドを最初に戻すやり方は色々あると思いますが
    上下スクロールした後に横スライド用ページネーションの
    先頭リンクをクリックさせる動作を入れることで
    実現することが可能かと思っております。

    スクリプトの226行目と252行目を書き換えた形で
    サンプルファイルを用意しましたので
    下記URLをご参考にしていただければと思います。

    http://black-flag.net/devel/jQueryOnePageScroll/jQueryOnePageScrollSlideReset/

    ご確認ください。
    よろしくお願いします。

  • syk | 2015.02.04 16:40

    はじめまして。
    実務勉強中のWEBデザイナーです。
    縦スクロールを使ったスタイリッシュなページを作成したいと検索したところ、こちらに辿り着きました。
    現在解説を参考にページを作成しているのですが、つまづいており、
    ご相談させていただけないかとコメントを残させていただきました。

    現在作成中のページは
    ┏……………………………┓
       Header_iframe
    ┗……………………………┛
    ┏……………………………┓
      スクロールコンテンツ
    ┗……………………………┛
    ┏……………………………┓
       Footer_iframe
    ┗……………………………┛

    とdiv#containerの中をiframeとスクロールコンテンツのdiv#contentWrapで組み
    こちらのdiv#containerをdiv#contentWrapに置き換えて作成しています。

    div#contentWrap内の動きに問題はないのですが、
    どうしてもiframeの上に重なり、一番下までスクロールしてはじめて
    下記のようにiframeのコンテンツが表示される状態になっております。
    ┏……………………………┓
       Header_iframe
    ┗……………………………┛
    ┏……………………………┓
       Footer_iframe
    ┗……………………………┛

    iframeの間にスクロールコンテンツを表示させる方法はございませんでしょうか?
    お手ほどきいただければ幸いです。
    ※ちなみにスクロールコンテンツはCSSを用いたタブ切り替えの装飾をしております。

  • syk | 2015.02.04 19:36

    はじめまして。
    実務勉強中のWEBデザイナーです。
    一つ前にもコメントを残させていただきましたが、
    htmlを組み立て直しましたので、大変恐縮ですが再度コメントを残させていただきました。

    現在、組み立て直したhtmlはBlackFlagさんのhtmlベースに
    class=stageBaseの中にiframeを挿入しています。
    ┏………………………………………………………………………┓
     {Header_iframe}

     
     
     

     {Footer_iframe}
    ┗………………………………………………………………………┛
    そこにコンテンツ部分をタブで切り替える
    装飾をCSSまたはjQueryで追加したいのですが、可能でしょうか?
    タブごとに縦スクロールのコンテンツがだいたい3・4画面入るのが
    理想的ページです。

    お力添えいただければ幸いです。

  • BlackFlag | 2015.02.06 0:51

    >sykさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    実装されようとしているページ構成がいまいち把握できないのですが
    当記事のスクリプトではマウスホイール操作で
    画面全体の上下移動の動作を実装していることもあって
    その中でiframeなどのインラインフレーム要素を入れ込む構成にはしておりません。

    タブ切り替えのスクリプトに関しては
    画面内に組み込んでいただければ実装することは
    可能だと思います。

    あまり明確な回答になっていないかもしれませんが
    ご確認ください。
    よろしくお願いします。

  • min | 2015.02.16 17:49

    いつも大変参考にさせていただいており、
    ありがとうございます。

    わがままな話なのですが、
    各セクションごとの高さをかえたいです。

    1画面で見えなくてもかまわないのですが、
    教えていただけると幸いです

    よろしくお願いいたします。

  • BlackFlag | 2015.02.18 1:00

    >minさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    当スクリプトはフルスクリーンでの構成になっておりますので
    各セクションごとに高さを変える、といったことは
    ページ構成自体が変わってくることなので
    当スクリプトでは厳しいかと思っております。

    よろしくお願いします。

  • | 2015.03.02 17:11

    はじめまして
    こちらのスクリプトを利用してポートフォリオサイトを作ろうとしているのですが、自分の力不足によりうまく扱えません。
    今やろうとしているのは、画面右側のナビゲーションボタンを消して、代わりに画面左上に各stageに移動できるメニューを作ろうと思っています。右側のナビゲーションボタンと同様にstageに移動してもfixeで表示されて、なおかつ今いるstageがわかるような仕組みにできたらベストです。

    右側のナビゲーションを消して左上にメニューを作るまではできたのですが、メニューを押して移動するとメニューが消えてしまい、なおかつstage1に戻れなくなります。
    現状メニューの記述はstage1内にしてあります。

    何か方法がありましたら教えていただけたら幸いです。
    よろしくお願いします!

  • BlackFlag | 2015.03.05 1:36

    >翔さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    右ナビゲーションの配置位置制御は
    記事内スクリプトの52~55行目「coreNav.each・・・」の部分になるので
    その4行を削除してCSS側で「#pageNav」の部分の位置や見た目を調整することで
    ヘッダー固定ナビゲーションが可能になるかと思っております。

    お試しください。
    よろしくお願いします。

  • min | 2015.03.06 16:51

    はじめまして。
    新たにjQueryを勉強しようと思い、こちらのサイトにたどり着きました。
    わかりやすい記述で大変勉強になります、ありがとうございます!

    今まではHTMLとCSSだけで独学でwebサイトを作成していたのですが、
    今回jQueryとあわせて、スマートフォンやタブレットの画面にも対応したサイトを制作しようと考えています。

    そこで一点つまずいているのですが、
    スマホ(動作確認:iphone5)でスクロールは問題なくできるのですが、
    画面を拡大や縮小できるようにすることは可能でしょうか?

    PCでの文字サイズで表示される場合スマホでは読みずらいので
    上記の解決が難しければ、スマホ閲覧時に文字の大きさが変更される。など解決策がありましたらご教授願います。
    お時間ある際にご返信いただければ幸いです。何卒よろしくお願いいたします!

  • BlackFlag | 2015.03.07 10:57

    >minさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただき嬉しく思っております。

    ページ全体がウィンドウサイズによって
    画面幅や高さを入れ込んでいる構造上、
    拡大縮小は少々厳しいかと思っております。

    文字サイズの変更に関しては
    Mediaクエリーを使って画面幅によって文字サイズを調整するか
    ユーザーエージェントによる判別で
    iPhone、iPad、AndroidはCSSを切り替える、
    などとする方法がよろしいかと思っております。

    【参考】jQueryでiPhone、iPad、Androidのそれぞれ縦・横画面の向きを判別して
    CSSクラスを追加する方法
    http://black-flag.net/jquery/20110816-3411.html

    お試しください。
    よろしくお願いします。

  • matsu | 2015.03.31 9:27

    初めまして。
    新しいHPが作れないか模索していたらこちらの
    ページにたどり着きました。
    早速HPに活用させて頂いているのですが、つまずいている
    所があるのでよろしければ教えて下さい。

    横スクロールした画面の一部の背景をclassで背景を変えたのですが、
    その変えた画面から違う画面に横移動したときに背景が真っ白な状態になります。
    さらに横移動すると背景が表示されるのですが、この問題点はcss側にあるのか
    javascript側にあるのかまったくわかりません。
    何かかしらの解決策がありましたらご教授願います。
    よろしくお願いします。

    html
    <section id=”stage3″ class=”stageBase”>
    <div class=”stageSlide”>
    <div class=”slidePanel”>
    <div class=”fieldWrap”>
    <p></p>
    </div><!–/.fieldWrap –>
    </div><!–/.slidePanel –>

    <div class=”slidePanel”>
    <div class=”fieldWrap”>
    <p></p>
    </div><!–/.fieldWrap –>
    </div><!–/.slidePanel –>

    <div class=”slidePanel sea”>
    <div class=”fieldWrap”>
    <p></p>
    </div><!–/.fieldWrap –>
    </div><!–/.slidePanel –>
    </div><!–/.stageSlide –>
    </section>

    css
    #stage3 {
    background:#92D0C8;
    }

    .sea {
    background: #2595C7;
    }

  • BlackFlag | 2015.04.04 11:01

    >matsuさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    事象についてちょっと把握しきれていないのですが
    「#stage3」に背景を設定するのではなく
    「#stage3 .slidePanel」ごとに背景色を設定してみてはいかがでしょうか。

    お試しください。
    よろしくお願いします。

  • matsu | 2015.04.06 10:58

    返答ありがとうございます。
    実際に「#stage3 .slidePanel」ごとに背景色を変えてみたのですが、
    やはり背景色を変えた部分から違う部分に移動すると背景色が適応されず
    真っ白状態になります。

    http://template3.heartwood.co.jp/
    こちらが実際作ってみたサイトなのですが
    一度見て頂けると有り難く存じます。
    3ページ目の一番右のページから左のページに
    移動した際に背景が真っ白になります。

    一つ説明不足だったのですが、IEでは問題なく
    背景が表示されるのですがSafariとChromeでは
    背景が真っ白になる症状がでます。

    何かかしらの解決策がありましたらご教授願います。
    よろしくお願いします。

  • mm | 2015.04.13 18:58

    素晴らしいスクリプトをありがとうございます。javascript初心者ながら、カスタマイズを進めているのですが、
    ヘッダーの設置でどうしても意図したようにならずそこから抜けられないずにおります。
    厚かましいとは思いながらも、お力をお借りできないかと思いコメントさせていただきました。

    <やりたいこと>
    最初のアクセス時(#!page1)はウィンドウの最下部にヘッダーを固定表示する。
    #!page2へスクロールすると、ヘッダーがするるーーとウィンドウの最上部へ動いて、固定される。
    #!page2以降のページを表示している場合は最上部へ固定したまま。
    #!page2から#!page1へ戻ったら、また「するるーー」とウィンドウの最下部に固定表示すされる。

    #containerがスクロールしておらず位置の取得が出来ないとわかったので、
    ハッシュタグで判別するか、#containerの「top」プロパティの値を取得し判別する方法を思いつきました。
    何度か試したのですがうまくいかなかったので(きっと私の記述がおかしいのでしょう。。。)、
    bodyのdata-page属性を取得して判別するのはどうだろう?と思いついた次第です。
    何度か試しましたが、うまくいかず、もう一度ページをくまなく読んでみたところ、過去のコメントから、

    >やり方の一つとしては、
    >bodyに「data-page」属性でアクティブなページ番号を付与するようになっておりますので
    >スクロールアップとスクロールダウンの処理時に「data-page」ナンバーを見て
    >該当番号の時にアニメーションを実行させる、といったイメージになるかと思います。

    とあったので、やはりこちらの方法でやってみようと思い、
    そこからも何度かトライしましたがうまくいかずの状態でおります。。。

    方法としては、スクロールアップ、スクロールダウンのイベント時に、
    bodyのdata-page属性を取得し、値を判別してheaderのcssを付与する、
    ということであっていますでしょうか?

    $(‘body).data(‘number’)  ←このような書き方ではないのですよね。。。
    data-pageの値の取得とは、具体的にどのようにしたらよいでしょうか?

    また、スクロールアップ、スクロールダウンのイベント時とは、
    下記のスクリプトであっていますでしょうか?

    // ScrollUpEvent
    function motionUp(){
    }

    // ScrollDownEvent
    function motionDown(){
    }

    ご教示くださいますと嬉しいです。
    よろしくおねがいします。

  • matsu | 2015.04.15 10:04

    度々すいません。
    方法変えたら問題解決できました。
    ありがとうございます。

  • BlackFlag | 2015.04.18 20:42

    >mmさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    最初の画面とそれ以外で別の指定をするには
    「data-page」属性を扱うことで処理することが可能です。

    指定の仕方としては下記の様になります。
    ————————————————————————-
    var setDP = parseInt($(’body’).attr(’data-page’));
    if(setDP == 1){
      ~「#!page1」の時のヘッダー用CSSを指定~
    } else {
      ~「#!page1」以外の時のヘッダー用CSSを指定~

    ————————————————————————-
    ※コピペする際には括弧等は半角にしてください。

    スクロールアップ、スクロールダウンのイベント時については
    スクリプトの164行目がスクロールダウン時、
    スクリプトの166行目がスクロールアップ時の処理になります。
    (記載いただいたのは実行されるイベント関数になります)

    以上になりますが、お試しください。
    よろしくお願いします。

  • tana44 | 2015.05.13 20:52

    初めまして。tana44と申します。
    1画面毎にスクロールさせるスクリプトを探していて、
    こちらのサイトにたどり着きました。
    とてもわかりやすい解説で参考にさせていただいております。

    何点か質問させていただきたいのですが、
    画面を増やしていき10ページより画面が多くなると、
    10ページ目以降の挙動がおかしくなるようですが、
    JSの修正が必要なのでしょうか?

    横スライド機能についてお聞きしたいのですが、
    こちらの機能ですが、スライドではなくクロスフェードに変更することは、
    かなり複雑なカスタマイズになるのでしょうか?

    また、横スライドの機能をループさせるというのも複雑でしょうか?

    突然、いくつもの質問失礼いたしました。
    お時間のある時にご教示いただければ幸いです。

  • BlackFlag | 2015.05.15 0:45

    >tana44さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    画面数についてですが
    サンプルファイルにて画面を10個以上に増やして試したところ
    動作の不具合については確認できませんでしたが
    当記事からダウンロードできるファイルでも
    挙動がおかしくなる現象が起きるのでしょうか。

    横スライドをフェードにすることも可能だと思いますが
    スクリプトの改修が必要になります。

    まったく同じ動作ではないですが
    当ブログ別記事の

    ・jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法
    http://black-flag.net/jquery/20141028-5428.html

    にて同様の仕様を実装しておりますので
    こちらのスクリプト等を参考にしていただけますと幸いです。

    よろしくお願いします。

  • tana44 | 2015.05.15 17:12

    ご返答ありがとうございます。

    画面の挙動については解決いたしました。
    urlHashの機能をoffにすると挙動が正常になったことで、
    setHashに設定していた値と、各画面要素に設定していたidが
    10画面目から重複してしまっていたことが原因でした。
    お騒がせいたしました。

    クロスフェードに関しては、
    挙げていただいたページを参考にさせていただきます。
    貴重なお時間ありがとうございました。

  • yama | 2015.06.09 3:50

    初めまして。
    こちらのスクリプトを参考にwebサイトを作らさせていただいています。

    お忙しい中恐縮ですが、質問させていただきます。
    現在1ページ目がというURLにて指定できる状態で、
    下の次のページにいくにつれてこの数字が増えていくという形式になっていますが、
    これを最下部のページをにして上にいくほど数字が増えるという形式に変更することは可能でしょうか。

    またそのときを開いたトップページは今までどおり一番上のページが開かれる
    (数字が一番大きいページが開かれる)状態にさせたいです。

    サイトをつくって、後々一番初めのページに新しくページを追加していきたく、
    そのときにURLを書き換える手間をできるだけ減らしたいと考えています。

    お手数おかけしますが、お時間あるときにご回答いただけると幸いです。
    よろしくお願いします。

  • TOMO | 2015.06.09 16:10

    はじめまして。
    まさに求めていたスクリプトそのものでしたので
    早速実装させて頂きたいと思います。
    ありがとうございます。

    そこで1つご質問なのですが、
    次のページへ進む下矢印ボタンはありますが、
    逆の、ひとつ上のページへ戻るボタンの実装は可能でしょうか。

    何卒ご教示下さいますよう宜しくお願いいたします。

  • BlackFlag | 2015.06.11 1:04

    >yamaさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    理想とされている構成がどのような形なのか
    いまいち詳細を把握できずにおりますが
    上から下ではなく、下から上の動作にするということならば
    可能だとは思いますが大々的にスクリプトを組み直す必要があると思います。

    またそのような構成でサンプルを作る機会がありましたら
    ここで紹介させていただきたいと思います。

    よろしくお願いします。

  • BlackFlag | 2015.06.11 1:20

    >TOMOさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    上のページへ移動するボタンについては
    実装することはもちろん可能です。

    下へ移動するボタンのスクリプト部分をコピーして
    上移動用にカスタマイズする必要がありますが
    ちょっと今すぐにはサンプルを作成する余裕がないので
    時間ができたらサンプルにオプション追加するよう検討させていただきたいと思います。

    よろしくお願いします。

  • yama | 2015.06.11 3:03

    ご返信ありがとうございます。
    説明がわかりにくく申し訳ありません。

    動きを変える必要はありません。

    現在あるhtml(other.htmlとする)にこのスクリプトを適用しているページ(index.htmlとする)のリンクを貼っています。
    その場合、1ページ目にのリンクは「index.html#!page1」になるかと思います。
    同様に数字が増えていくと、Xページ目は「index.html#!pageX」となります。
    これを1ページ目のリンクを「index.html#!pageX」とし、Xページ目のリンクを「index.html#!page1」
    というように昇順ではなく降順にならないでしょうか。

    作品集をまとめるページをつくっておりまして、
    今後徐々に作品を追加していく際、最新作を1ページ目に持ってきたいのですが、
    現在のつくりだと更新するたびすべてのリンクを書き換えていかなくてはならず、
    もしできるのであれば一度の更新で「index.html#!page1」の数字部分をひとつ加えるだけにできたらと思いお聞きしました。

    お手数おかけしてすみません。
    どうぞよろしくお願いします。

  • BlackFlag | 2015.06.15 0:32

    >yamaさん
    動作内容について了解致しました。

    その様な仕様にすることも不可能ではないと思いますが
    全体的に構成を再検討する必要があると考えており
    すぐに実装するのは難しい状況です・・・

    その様なオプション設定については
    今後検討させていただきます。

    よろしくお願い致します。

  • ge | 2015.06.15 19:59

    はじめまして。
    素敵なスクリプトにめぐり逢えて感激です。
    ぜひ使用させていただきたいと思っています。

    そこで一つ質問させていただきたいことがあります。
    スライドエリアの中身の要素を、ブラウザ画面に対し上下中央揃えにすることはできませんでしょうか?
    現在は内容量が少ないと上詰めになってしまうようなので、上のような修正ができるかどうか気になりました。

    お手数ですがご回答いただけますと幸いです。
    お待ちしています。

  • BlackFlag | 2015.06.17 1:06

    >geさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    エリア内の上下中央揃えについては
    スクリプトというよりかはCSSでの設定になります。

    CSSでpositionプロパティ等を使って
    エリア内上下中央揃えをお試しいただければと思っております。

    よろしくお願いします。

  • TOMO | 2015.06.19 16:35

    迅速なご回答ありがとうございました!
    下移動スクリプトのコピペを自分なりに編集してみて
    一応動作はするようになりました。
    一部挙動がおかしい所がありますがぼちぼち修正していこうと思います。
    いずれサンプル内に実装されることをお待ちしています。

  • 訓練生 | 2015.07.22 22:51

    まだまだ初心者で未熟な勉強中の者です。
    現在jqueryを組み込んだサイト作りの勉強をしておりましてこちらに辿り着きました。
    貴重な情報をアップしていただきありがとうございます。

    各ページにbackground-imageにて画像を背景に設定したいと思いまして
    section#stage1やdiv.fieldWrapにbackground-image:url(…)と入れてみたのですが
    表示されないのですが、どのように背景画像を設定すればよいでしょうか。

    ちなみにhtmlのimgタグを入れて画像を見せることはできたのですが、
    できたらcssにてbackground-imageで入れ込みたいと考えております。

    それと、同様に背景に動画を設定することはできますでしょうか。
    自前の動画、youtubeから引っ張ってくる、
    とそれぞれ可能なのでしょうか。
    またその場合、videoタグやjQuery Tubularなどを使用することになるのでしょうか。

    質問ばかりで申し訳ございません。
    お忙しい中お手数ですが、もし気が向いたらお答えいただければ幸いです。

  • 訓練生 | 2015.07.22 23:20

    先ほどの件ですが、background-imageにて設定できました。
    最初に試したときに何が悪かったのがわからないのですが、ためしに
    div.fieldWrapを各ページごとにdiv.fieldWrap1-1のように個別のクラス名をつけてみたら
    背景設定できました。
    もっときちんと試してから質問するべきでした。申し訳ございません。

    動画の件の質問のほうももう少し自分で試してみます。
    ブラックフラッグさんのサイトをささっと巡回してみたのですが
    いろいろと参考になりそうなことが満載なので
    引き続き拝見させていただきます。

  • BlackFlag | 2015.07.25 11:53

    >訓練生さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    ありがとうございます。

    問題も無事に解決したようでよかったです。

    動画のフルスクリーン表示は
    ——————————-
    ・jQueryで背景に動画をフルスクリーンで表示する方法
    http://black-flag.net/jquery/20120718-3984.html
    ——————————-
    こちらのスクリプトも多少参考になるかと思います。。
    (少々古い記事になりFlash実装になっていますが・・・)

    お試しください。
    よろしくお願いします。

  • コマリガオ | 2015.09.03 21:20

    はじめまして
    本日こちらのサイトを発見致しました。
    ワンページスクロールのサイトを制作をしており
    土台になるサンプルがあり凄く助かりました。

    ひとつどうしても前に進めない部分がありお教え頂ければ幸いです。

    こちらのサンプルデータにフッターのエリアを追加したのですが
    どうしても最後のセクションからスクロールして表示をしてくれません。
    *イメージとしてはスカイツリーサイトのフッターエリアのような感じです
    色々試みては見たのですがドツボにハマってしまっています

    どうぞよろしくお願いいたします

  • 練習中 | 2015.09.04 14:45

    はじめまして。
    新たにjQueryを勉強しようと思い、こちらのサイトにたどり着きました。
    わかりやすい記述で大変勉強になります、ありがとうございます!

    コチラのテンプレに新たに、指定量スクロールした時点でメニューが出てくる処理を足そうとしているのですが
    上手くいきません。

    なにか方法はございますでしょうか?
    ご指導よろしくお願いします。。。。

  • 練習中 | 2015.09.07 13:00

    たびたびすみません。
    固定メニュー部分にスクロールに応じて一つclassを追加する方法でも構いまっせん。

  • BlackFlag | 2015.09.08 1:14

    >コマリガオさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    当記事のスクリプトでは画面内でのスクロールは想定しておらず
    そのような仕様にする場合は大きくカスタマイズする必要があります。

    またそのような仕様でのスクリプトが出来ましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • BlackFlag | 2015.09.08 1:22

    >練習中さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    当記事のスクリプトではスクロール動作は
    スクロール値ではなく「#container」の「top」値で制御する仕様になります。

    併せてアクティブ画面の番号に関しては
    bodyタグの「data-page」属性に画面番号を格納しており
    右メニューに関してはアクティブ状態のリンクに「activeStage」のクラスが付けて
    該当位置を判別するようになっておりますので
    ブラウザの開発ツールなどでそのあたりの動作を見ながら
    実装してみてはいかがでしょうか。

    お試しください。
    よろしくお願いします。

  • 練習中 | 2015.09.08 16:54

    返信ありがとうございます。
    一か所は
    ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    併せてアクティブ画面の番号に関しては
    bodyタグの「data-page」属性に画面番号を格納しており
    右メニューに関してはアクティブ状態のリンクに「activeStage」のクラスが付けて
    該当位置を判別するようになっておりますので
    ブラウザの開発ツールなどでそのあたりの動作を見ながら
    実装してみてはいかがでしょうか。
    ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    のアドバイスで動かすことが出来ました!!
    ありがとうございます。!!

  • 山口 | 2015.09.23 21:04

    はじめまして。
    今回このような素敵なサイトが作りたく辿り着きました。
    とても助かりました!

    1点悩んでることがありまして、
    ページ毎に「downBtn」の画像を変更したいと思ってるのですが可能でしょうか?
    1ページ目が白背景で黒色の矢印をdownBtnに設定し、
    2ページ目に黒背景にしてしまうと矢印が消えたようにみえてしまって。。

    お手数おかけいたしますが、ご教示お願いいたします。

  • BlackFlag | 2015.09.27 19:40

    >山口さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    スクリプトの231行目と257行目の部分で
    画面を上下に移動した際にbodyに対して
    data属性にて識別番号をつけるようにしています。

    ここに同じようにして「#pageDown a」に対して
    画面ごとに固有のクラスをつけるようにすることで
    CSS側からの指定で画面ごとに
    ボタンの装飾を変えることが可能になるかと思います。

    お試しください。
    よろしくお願いします。

  • こんの | 2015.11.17 4:11

    はじめまして!

    今回はじめてJqueryを使っての1ページサイトを作ろうと思い至りググっていたところ、こちらの記事をみつけて早速実装させていただきました。目的がマッチしているので非常に嬉しい限りです。

    ただどうしても解決できない動作がありまして、過去の質問でも触れていることなのですが1ページ目の下部にヘッダーを表示させ、2ページ目以降より下に移動するとヘッダーが上部で固定されるような動作を行おうと色々試したのですがうまくいきません…。

    今回は過去にご回答されておりました以下の記述を参考にしています。

    ————————————————————————-
    var setDP = parseInt($(’body’).attr(’data-page’));
    if(setDP == 1){
      ~「#!page1」の時のヘッダー用CSSを指定~
    } else {
      ~「#!page1」以外の時のヘッダー用CSSを指定~

    ————————————————————————-

    「deta-pageが1の場合はヘッダーを下部に表示、1ではない(もしくは1より大きい)場合ヘッダーを上部に固定」といったような方法を取ろうと思い

    var setDP = parseInt($(‘body’).attr(‘data-page’));
    header = $(‘#header’);
    if(setDP == 1){
      header.addClass(‘absolute’)
    } else if(setDP > 1){
      header.removeClass(‘absolute’)
    }

    と記述したところ、class=”absolute”が追加されて1ページ目の下部にヘッダーが表示されるのですが、2ページ目以降に移動してもclass=”absolute”が削除されずにページ上部を過ぎてしまいます…

    今回はじめてjqueryに触れたものなので単なる記述の凡ミスと考えていたのですが、class=”absolute”は追加されているので記述は問題ないのかと…。

    お忙しい中申し訳ありませんが是非ともご教授をお願いいたします!

  • こんの | 2015.11.17 21:12

    お忙しい中たびたび申し訳ありません…

    以前のご回答の中にありました

    var setDP = parseInt($(‘body’).attr(‘data-page’));

    を使用してdata-pageの値を取得するというやり方が紹介されていましたが、実際どのような値が取得されているのか疑問に思いまして

    (function(){
    var setDP = parseInt($(‘body’).attr(‘data-page’));
    $(‘.test’).html(setDP);
    });

    といったような記述にて確認をしたところ、2ページ目に移動してもdata-pageの値が1としか現れませんでした。

    実際のところはページ移動するごとに1以外の数字が取得できるのかどうか知りたいところです…

    前回の質問も含め、上記の記述での取得方法に問題があるのであればどうかご指摘ください!

  • BlackFlag | 2015.11.18 1:03

    >こんのさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをお試しいただいている様で
    嬉しく思っております。

    ヘッダー固定についてはCSSがどのように構成されているか
    確認できていないのでなんとも言えない部分もありますが
    固定する際には「position:absolute」ではなく「position:fixed」でないと
    理想としている動作は実現できないのではないかと思っておりますが
    そのあたり含めご確認ください。

    「data-page」の値の取得は画面遷移するごとに
    値を取り直せば2ページ目以降の数が反映されます。

    この「data-page」の値の変化については
    ブラウザの開発ツールなどを使えば
    ご確認いただけるかと思います。

    お試しください。
    よろしくお願いします。

  • nekomoto | 2016.04.06 9:25

    はじめまして。
    スライドページを簡単に実装できて非常に参考になります。

    一つ気になることがありましたのでご報告いたします。
    chrome(Ver.49)を使用してサンプルファイルをローカルで閲覧すると問題なく動作するのですが、サーバー上にアップして閲覧するとマウスホイールの挙動が何故か変わってしまいます。

    【症状】
    下方向へのホイール回転でスライドすると、ページの表示が徐々にずれていきます。
    ホイールを回転させるとスライドとは別に画面全体がガクッと上にずれるような挙動をしていました。

  • nekomoto | 2016.04.06 10:23

    連投申し訳ありません。

    その後、色々試してみた結果、Chromeにインストールしている拡張機能の「Gestures for Google Chrome」が原因だということが分かりました。
    これのマウスホイール拡張機能が悪さをしていたようです。このオプションをオフにすることで正常にページが動作しました。

    大変お騒がせいたしました。

  • BlackFlag | 2016.04.10 17:43

    >nekomotoさん
    コメントありがとうございます。

    GoogleChromeの拡張機能「Gestures for Google Chrome」がインストールされている環境では
    そのような現象が起こるということ、了解致しました。

    今後の参考にさせていただきます。

    よろしくお願いします。

  • 武藤遊戯 | 2016.04.25 17:21

    こんにちは。

    参考にさせていただいてます。

    要素が見えたタイミングでアニメーションするように

    animate.css と wow.jsを使用しているのですが、
    ページ読み込みと同時にすべてのセクションがアニメーションしてしまいます。

    特殊な構成なので、要素が見えたタイミングの判断ができないのでしょうか。

    お答えいただければ幸いです。

  • きのぴ | 2016.04.28 10:41

    はじめまして
    スライドページのサイトが無いか探しておりました。

    会社のLPでこのようなサイトを作りたいと思いました。
    参考というかほとんどコピペに近い状態になるかと思いますがご利用させてください。

    ブックマークさせて頂いておりますので、今後もちょくちょく拝見させていただきます。

  • BlackFlag | 2016.05.01 9:49

    >武藤遊戯さん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご検討いただいているようで
    嬉しく思っております。

    特定のスクロール位置でアニメーションを実行させる仕組みについては
    もちろん実装可能です。
    やり方の一つとしては、
    bodyに「data-page」属性でアクティブなページ番号を付与するようになっておりますので
    スクロールアップとスクロールダウンの処理時に「data-page」ナンバーを見て
    該当番号の時にアニメーションを実行させる、といったイメージになるかと思います。

    もしくは、別の方法として
    当ブログ別記事の
    ——————————
    ・jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験
    http://black-flag.net/jquery/20140128-4943.html
    ——————————
    こちらを見ていただくと参考になるかと思っております。

    お試しください。
    よろしくお願いします。

  • BlackFlag | 2016.05.01 9:55

    >きのぴさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいているようで
    嬉しく思っております。

    ご使用の際にはコピペで使用いただいて問題ありません。
    当ブログではその他いろいろとご紹介させていたいておりますので
    あれこれお試しいただけると幸いです。

    今後ともよろしくお願いします。

  • 齋藤R | 2016.05.28 19:39

    はじめまして。
    このようなページを作っていただきありがとうございます。
    ぺージ作成の参考にさせていただいております。

    つかぬところお聞きしますが「jQuery OnePage Scroll」と書かれた部分をスクロールしても上に固定させたままにする方法は御座いますでしょうか。
    もし御座いましたら、その方法を教えていただけますでしょうか。

    よろしくお願いします。

  • BlackFlag | 2016.06.05 10:02

    >齋藤Rさん
    コメントありがとうございます。

    ヘッダ部分の固定はスクリプト制御ではなく
    CSSのみの設定で可能です。

    サンプルデータの場合は
    該当要素h1のCSSに「position:fixed;」「z-index:100;」を
    設定していただければ固定されるかと思います。

    お試しください
    よろしくお願いします。

  • かりん | 2016.06.28 11:46

    初めまして。
    最近、独学でホームページ勉強し始めました。
    このようなフルスクリーンで使用できるものを探しておりました!
    ありがとうございます!

    Web初心者で少し詰まってしまったのですが、スマホとパソコンで表示する画像を変更するようにすると、
    フルスクリーンでの画像表示が難しく・・・
    何かアドバイスいただければ、と思い、コメントいたしました。

    単純に、cssに
    @media screen and ( max-width:479px )
    を書き足したのですが、他にどうすれば良いでしょうか。

    可能でしたら、ご教授お願いいたします。

  • BlackFlag | 2016.07.02 10:46

    >かりんさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    画像をどの様に配置しているか、によって変わってきますが
    簡単な方法としてはCSSの背景画像として指定するのが楽なのではないかと思います。

    CSSのメディアクエリで
    コンテンツエリアの背景画像をスマホとパソコンで切り替えて
    「background-size:cover」のプロパティを追加して
    フルスクリーン表示すれば実現できるのではないかと思います。

    お試しください。
    よろしくお願いします。

  • かずぅ | 2016.09.09 11:30

    初めまして。
    HTML初心者がこのたび友人のHPを作成することになり、
    参考書を見ながら参考に探していたらこのサイトにたどり着きました。

    ほぼコピー&ペーストの状態ですが、使わせてもらってもいいのでしょうか?

    素人がここにたどり着き、勝手にホームページを公開するとなにか問題が生じるのでしょうか?

    本当に素人で発言も幼稚ですが、お返事お待ちしております。

  • BlackFlag | 2016.09.11 10:54

    >かずぅさん
    コメントありがとうございます。

    当ブログのスクリプト等の使用については
    個人・商用問わずフリーとなっております。

    詳細については
    http://black-flag.net/about#ancLicence
    こちらにも記載しておりますので
    併せてご参照いただければと思います。

    よろしくお願いします。

  • sashi | 2016.10.23 9:49

    始めまして、素晴らしい紹介ありがとうございます
    勉強になります^^

    今回ご紹介なさっている
    「jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法」
    の仕様をwordpressに実装してみたのですが・・・

    見た目は問題ないのですが、4ページまでを予定していたのですが
    4ぺージ以降もページ送りしてしまいます

    スキル不足でいろいろ試したのですがわかりません。
    サイトは、本件のテストサイトですが、先入力のURLです

    何か解決のポイントはありませんでしょうか?
    よろしく願いいたします

  • BlackFlag | 2016.10.23 11:33

    >sashiさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    サイトのHTMLソースを確認する限り、
    当記事のサンプルと構成が合っておらず
    スクロールさせるコンテンツエリアの上部に固定ヘッダー分の
    余白が入っている影響かと思われます。

    固定ヘッダーをつける場合は
    コンテンツエリアの前面に重ねるような構成にして
    コンテンツエリア自体はウィンドウに対して
    フルスクリーンで構成されるようにしていただければと思います。

    お試しください。
    よろしくお願いします。

  • sashi | 2016.10.25 13:45

    ご回答ありがとうございました

    ご指摘部分を元に、スタイルシートを0から見直してみましたところ
    無事に意図した動作を得ることが出来ました

    大変感謝しております^^
    今後とも、ヒントを求めてブログを拝読させていただきます
    陰ながら応援させていただきます

  • muno | 2016.11.14 17:17

    初めまして。大変参考になるスクリプトをありがとうございます。
    web初心者ゆえ、僭越ながら質問させていただきます。

    現在、下のページへ移動するボタンは実装されていますが、その逆の「上へスクロールするボタン」を実装するにはどうすればよろしいでしょうか。

    お手数ですが、ご教示いただけると幸いです。
    よろしくお願いいたします。

  • BlackFlag | 2016.11.15 1:43

    >munoさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいているようで
    嬉しく思っております。

    「上へスクロールするボタン」の実装オプション等は用意しておらず、
    実装するには、下にスクロールするボタンと同様の構成で
    上スクロール用のスクリプトを追加する必要があります。

    サンプルスクリプト24行目で、下スクロール用のボタンを生成していますので
    同様に上スクロール用のボタンを任意のIDを付けて追加します。

    287~302行目で下スクロールのクリック動作を設定しているので
    同様に上スクロール用のクリック動作を追加します。

    303~314行目で下スクロールボタンの表示/非表示の設定をしているので
    同様に上スクロール用の表示/非表示の設定を追加します。

    上スクロールボタンの見た目や形状はCSS側で設定します。

    上スクロール用のボタンを追加するには
    上記のようなスクリプト追加が必要になります。

    オプションとしてこのような動作の追加ができましたら
    こちらの記事も更新させていただきます。

    よろしくお願いします。

  • muno | 2016.11.19 15:14

    ご回答ありがとうごさいます。
    恥ずかしながら、どのように動作しているかも今一わからない状態でしたので、大変勉強になり、有難く思っております。
    スクリプトの更新についてもお待ちしております。

  • hinaibu | 2016.12.06 7:54

    はじめまして。
    素晴らしいscriptをありがとうございます。
    私のような未熟な知識でもきれいに動かす事ができました。

    1つご相談に乗って頂いきたいのですが・・・
    http://www.hp-stylelink.com/news/2014/10/20141007.php
    https://github.com/loktar00/JQuery-Snowfall

    このような、雪を降らせたいと考えておりますが、
    読み込み順などがよくわからず、うまく動作しません。

    お忙しいところ大変恐縮ですが、ご教授いただけると
    大変ありがたく存じます。

    どうぞよろしくお願いいたします。

  • BlackFlag | 2016.12.17 10:21

    >hinaibuさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいている様で
    嬉しく思っております。

    併せて実装されようとしている雪を降らせるプラグインですが
    当スクリプトの後で実行するようにすれば動作することを確認できました。

    実装後の動作については
    下記URLよりご確認ください。
    http://black-flag.net/devel/jQueryOnePageScroll/jQueryOnePageScrollSnow/

    サンプルデータは下記よりダウンロードできます。
    http://black-flag.net/devel/jQueryOnePageScroll/jQueryOnePageScrollSnow.zip

    構成等について参考にしていただければと思います。
    よろしくお願いします。

  • ばびぃ | 2017.01.06 10:41

    はじめまして。

    こちらのスクリプトを使用させていただきたいと考えております。

    ただ、jQueryをまだ勉強し始めたばかりなので、
    ご教授いただきたいのですが、
    縦のスクロールは矢印キーで動作されていると思いますが、
    横のスライドも矢印キーで動作させたいと考えておりますが可能でしょうか?

    追加分や書き換えが必要な箇所を教えていただければと思います。
    どうぞよろしくお願いいたします。

  • BlackFlag | 2017.01.09 10:33

    >ばびぃさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいているようで
    うれしく思っております。

    矢印キー動作についてですが
    左右のキー操作でも横スライドが動作するように
    サンプルスクリプトに追加させていただきました。

    該当スクリプトについては
    サンプルスクリプト171~215行目の
    KeyEvent操作個所になりますので
    ご確認いただければと思います。

    よろしくお願いします。

  • minami | 2017.01.27 18:54

    はじめまして。

    いつも使わせていただいております。

    今回こちらのスクロールスクリプトを使わせていただきたいと思っているのですが、
    ひとつ部分があり、もしよろしければ教えていただきたいと存じます。

    上記の回答にもあったと思いますが、
    1ページ目とそのほかのページでの分岐(1ページ目にはヘッダーナビを表示しない/そのほかのページには表示する)を↓のようにしてみたのですが、

    http://portal.moo.jp/pallarax/test.html

    うまく動作しませんでした。

    書き方等間違っているところがありましたらご教授いただけると助かります。

    どうぞよろしくお願いします。

  • BlackFlag | 2017.01.27 19:43

    >minamiさん
    コメントありがとうございます。
    当記事のスクロールスクリプトをご活用いただいているようで
    うれしく思っております。

    ご質問いただきました件についてですが
    実装されているページを確認する限り、
    分岐処理が画面がスクロール移動するたびに
    きちんと実行されていないのだと思います。

    画面の上下スクロール移動の処理は
    「motionUp()」と「motionDown()」の関数で
    それぞれ実行しています。

    ひとまずは当記事内サンプルスクリプトの
    「motionUp()」の265行目と266行目の間と
    「motionDown()」の291行目と292行目の間の
    それぞれ2ヶ所にご自身で書かれた分岐処理を
    そのまま追記してみてください。
    そうすれば動作すると思います。

    最終的には分岐処理を一つの関数にまとめて
    上記箇所でそれぞれ実行させるのが綺麗な形になるかと思います。

    お試しください。
    よろしくお願いします。

  • minami | 2017.01.28 11:14

    早速ご回答ありがとうございます。

    早速試してみたのですが、
    スクロールアップする際は動作したのですが、
    スクロールダウンする際はうまくいきませんでした。
    http://portal.moo.jp/pallarax/test.html

    度々質問で恐縮なのですが、
    スクロールダウンとアップ、内容は同じものでは動作しないのでしょうか?

    大変お手数ですが教えていただけると幸いです。
    どうぞよろしくお願いします。

  • BlackFlag | 2017.01.29 11:26

    >minamiさん
    調整されたページを確認させていただく限り
    スクロールアップでもダウンでも正常に動作していると思われます。
    (スクロールアップでもダウンでも記述内容は同じで大丈夫です)

    動いていないと見えてしまうのは
    ページロード時にメニューの表示・非表示処理がされていない影響だと思われるので
    CSSファイルの「#menu-wrap」に対して「display: none;」をつけて
    デフォルト状態を非表示にすることで正常な動作になるかと思います。

    お試しください。
    よろしくお願いします。

  • minami | 2017.01.30 14:34

    度々ご回答ありがとうございます。

    早速cssで非表示にしたところ、うまく行きました!

    基本的なことだったのですね…失礼しました。
    今回大変勉強になりました。

    ありがとうございました。

  • hatomugi | 2017.07.19 18:47

    こんにちは。はじめまして。
    こちらのサイトを参考に、トップページを構築させていただいております。
    一つアドバイスをいただきたいことがございましてメッセージをお送りしました。
    的外れなご質問でしたらご容赦ください。

    ページ構成として、
    stage1で背景に全画面表示の画像をFadeOutさせており、メニューとスクロールダウンのボタンのみの構成。
    stage2~4では文字要素等を入れた普通の構成。

    これをサーバーにアップすると、stage2の内容がはじめに表示されてしまい、しばらく経って遅れてstage1の背景画像が表示されます。

    どうにかstage1をはじめに表示できないかと思い、頭を悩ませております。
    どうぞよろしくお願いいたします。

  • BlackFlag | 2017.07.23 11:11

    >hatomugiさん
    コメントありがとうございます。

    ご質問いただいた件についてですが
    おそらくページ読み込み時にstage1の高さが「0」になってしまっている、
    といった影響ではないかと考えられますが、
    実際に実装しているテストページなどを拝見させていただかないと
    原因調査もできないと思っております…

    よろしくお願いします。

  • mei | 2017.09.16 13:11

    初めまして、meiと申します。
    こちらのスクリプトを利用させていただいて、ページを作成しようと考えています。

    初心者の為、アドバイスをいただきたくメッセージしました。

    横スクロール部分なのですが、スマホで見た時に
    指のフリックでどんどん横に移動できるようにしたいと考えているのですが、
    どのようにすればよいかご教示いただけますと幸いです。

    よろしくお願いいたします。

  • BlackFlag | 2017.09.17 10:59

    >meiさん
    コメントありがとうございます。
    このスクロールスクリプトをご活用いただいているようでうれしく思っております。

    ご質問いただいた件についてですが
    フリックでのスライド動作の実装も不可能ではないですが
    スクリプトを大きくカスタマイズする必要があります。

    アドバイスにもならないかもしれませんが…
    当ブログ別記事の
    http://black-flag.net/jquery/20130709-4710.html
    こちらでフリック動作を組み込んでいるので
    その動作を応用することで実装させるようになるかと思います。

    よろしくお願いします。

  • mei | 2017.09.19 10:26

    ご返信ありがとうございます。

    教えて頂いた記事を参考にやってみます。
    また何かありましたらご連絡させていただくかもしれません。
    その際はよろしくお願いいたします。

    お忙しい中、ありがとうございました。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner