2
そんなことがあります。以下は https://jsfiddle.net/j6u6wp7x/1/scrollMagic - 正しい場所にスクロールするには?
var scene;
var controller;
$(document).ready(function() {
parallaxAuto();
$('.viewer__nav div').click(function(event) {
var num = $(this).attr('data-num');
if (num == 'sticky') {
controller.scrollTo(scene);
}
var scrollPos = controller.info("scrollPos");
});
});
function hideShow(num, block) {
block.find("div.active").removeClass("active").animate({ opacity: 0,},300);
block.find("div.slide"+num).addClass("active").animate({ opacity: 1,},300);
}
// init variables
function parallaxAuto() {
var viewer = document.querySelector('.viewer.active'),
frame_count = 5,
offset_value = 500;
// init controller
controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0,
reverse: true
}
});
// build pinned scene
scene = new ScrollMagic.Scene({
triggerElement: '#sticky',
duration: (frame_count * offset_value) + 'px',
reverse: true
})
.setPin('#sticky')
//.addIndicators()
.addTo(controller);
// build step frame scene
for (var i = 1, l = frame_count; i <= l; i++) {
new ScrollMagic.Scene({
triggerElement: '#sticky',
offset: i * offset_value
})
.setClassToggle(viewer, 'frame' + i)
//.addIndicators()
.addTo(controller);
}
}
ナビゲーションを作成する3個の小さいイメージがあります。私はトップに飛び乗るようにしましたが、2位または3位にジャンプする方法はわかりません。
var scrollPos = controller.info ("scrollPos");
は現在の位置を示していますが、正しく使用する方法はわかりません。
私は背景画像で置き換えられた画像を持っていますか? @SamGhatak –
このような場合には、あなたが 'document.getElementsbByClassName(「クラス名」)を使用することができます。私は、背景画像を見ることができるように' ...要素を取得するためには、CSSクラス – SamGhatak
を通って、クラスがまだされていない場合には追加されます追加?)@SamGhatak –