menu

Web制作のTipsとかアレコレ。

skrollrでのパララックスサイト制作をほんの少し効率的に。

2014.03.11

今やってる案件がパララックスのワンページなサイトなんですけど、ひと通りコンテンツを並べたらheightがやはり7000~8000pxぐらい。

とりあえずskrollrでやってますが、いま各ページに相当するコンテンツを仮置きしてる状態でこれから調整なんですが、各ページの切り替わりのタイミングとか、調整がかなり面倒臭そうだということで、ちょっと一手間加えてみました。

 

短納期の案件を爆速開発している最中で、そこまでちゃんと考えたわけではありませんが(爆)、今のところやっておいて良かった的な感じです。

 

やることは、ただこれだけ。

<?php
$section1 = 0;
$section2 = $section1 + 500;
$section3 = $section2 + 1300;
$section4 = $section3 + 1900;
$section5 = $section4 + 1600;
$section6 = $section5 + 1600;
?>

 

とまあ、こういう感じで各ページの始点のscrollTopを指定しておくだけです。

前後のコンテンツとの関連でこのあたりの数値は変わりますので、こうしておくとなかなかいいですよ。

 

そんで、htmlは

<div class="hogehoge" 
    data-<?php echo $section2 ;?>="opacity:0;left:-1000px"
    data-<?php echo $section2 + 500 ;?>="opacity:1;left:0;"
 ・・・>
<!-- コンテンツ -->
</div>

 

と記述。

 

っていうか、ホントはskrollr.jsの「Relative Mode」を覚えれば済む話しなのです(爆)。

実はまだskrollr.jsをそれほど掘り下げてないだけという・・・。

まあRelative Modeについてあんまり情報無かったし、英語ドキュメントも簡潔過ぎて、テストサイトでも作ってみないとなかなかクライアントワークでいきなりやるってわけにもいきませんので。

 

 

ちなみに、パララックスとか作るときは、コンソールに常にscrollTopが表示されてる状態が捗ります。

どこでもいいので

$(function(){
	$(window).scroll(function(){
		var y = $(window).scrollTop();
		console.log(y + 'px');
		
	});
});

とか書いておけば良いのではないでしょうか。

 

というわけで、以上!!

Comments

please leave your comment...

▲ Page Top