私が現在取り組んでいる Wordpress サイトで、私のクライアントは、ワイプまたはスライド トランジションのように、フロント ページのさまざまなセクションを下から上にスライドさせて、前のセクションを覆うことを望んでいました。http://johnpolacek.github.com/superscrollorama/にあるスーパースクロールラマを使用して、望ましい結果を得ることができました。
次に、フロント ページのみにナビゲーション メニューを作成する必要がありました。私はそうし、ページのさまざまなポイントにアンカーを設定しました。また、ナビゲーション メニューのリンクをクリックしたときのスクロール アニメーションに scrollTo ライブラリを使用しました。ただし、私が遭遇したいくつかの問題があります。
- 上部にある [ショーケース] をクリックすると、ショーケース セクションに移動しますが、製品セクション (その直後の div) が重なっています。
- 他の div には、次の div が現在の div と重なるという同じ問題があるようです
- 前方にしか移動できません。戻ろうとしても戻らない（「ホーム」以外）
- div の CSS の「top」プロパティに関係があるのではないかと思い、クリック機能が作動するたびにリセットしてみましたが、うまくいきませんでした。ということで、とりあえず外しました。
- 現在、javascript を設定して、アンカーまでスクロールするデフォルト アクションを防止し、代わりに実際の div 自体までスクロールするように設定しています。しかし、私はまだ同じ問題を抱えています。
編集:上記の問題はすべて解決しましたが、新しい問題が発生しました。サイトをスクロールし、ブラウザ ウィンドウのサイズを変更して上にスクロールすると、下部の一部が切り取られていることに気付くでしょう。スーパースクロールラマのページを見ましたが、同じ問題があります。誰かがこれを修正する方法を知っていることを望んでいました。
ここに私が現在取り組んでいるサイトがあります: http://breathe.simalam.ca/
スクロール用の JavaScript は次のとおりです。
$(document).ready(function() {
jQuery('.home-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#products_content', 1000, {queue:true});
});
jQuery('.about-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#about_content', 1000, {queue:true});
});
jQuery('.locator-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#locator_content', 1000, {queue:true});
});
jQuery('.contact-link').click(function(e){
e.preventDefault();
jQuery(window).scrollTo('#contact_content', 1000, {queue:true});
}); });
スクロールラマコード:
$(document).ready(function() {
$('#wrapper').css('display','block');
var controller = $.superscrollorama();
var pinDur = 4000; /* set duration of pin scroll in pixels */
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append([
TweenMax.to($('#showcase'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#products'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#about'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#locator'), .5, {css:{top:0}})
], .5)
.append([
TweenMax.to($('#contact'), .5, {css:{top:0}})
], .5)
.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
controller.pin($('#examples-pin'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#examples-pin').css('height','100%');
},
onUnpin: function() {
$('#examples-pin').css('height','2000px');
}
}); });
すべてのセクション div は、親 div 内にあります。セクション div はすべて、高さ、幅、および上部が 100% です。
これらすべてのセクション div を含む親 div は次のとおりです。
#examples-pin {
position: relative; /* relative positioning for transitions to work? */
width: 101%; /* max width */
height: 2000px; /* height of 2000px for now */
overflow: hidden; /* hide the overflow for transitions to work */
margin-bottom: -200px; /* negative bottom margin */
}