data-anchor-target и skrollr menu
У меня проблемы с пониманием цели привязки данных, я думаю, или она не выполняет то, что я хочу
У меня есть куча сцен, которые все имеют один и тот же фон, мой pano
элемент.
<div id="pano"
data--0p-top="top:0%; opacity:1; transform: scale(1);"
data--200p-top="top:13%; opacity:0.5; transform: scale(2);"
data--620p-top="top: 20%; transform: scale(3);"
data--1000p-top="top:-100%; opacity:0.2; scale(4);">
</div>
<div id="scene1"
data-anchor-target="#pano"
data--50p-top="opacity:0.3; top: 20%; left: 5%; transform: scale(0);"
data--100p-top="opacity:1; transform: scale(1); top: 10%; left:30%;"
data--150p-top="opacity:0; transform: scale(1.5); top: -10%; left:60%;">
<div class="cloud1"></div>
</div>
<div id="scene2" class="scene-text"
data-anchor-target="#scene1"
data--130p-top="transform: scale(0); opacity: 0.5; top: 27%;"
data--150p-top="transform: scale(1); opacity: 1; top: 27%;"
data--200p-top="transform: scale(1.2);"
data--230p-top="transform: scale(3); opacity: 0;">
<div class="content">
<h2>Text</h2>
<p>This is a excerpt telling a story.</p>
</div>
</div>
Насколько я понимаю scene2
Теги данных должны зависеть от scene1
? но теперь они все еще кажутся зависимыми от pano
как в топе?
Другая моя проблема, когда я пытаюсь реализовать skrollr menu
в этой настройке для привязки якоря к каждой сцене он едва прокручивается в любом месте, даже если я помещаю элемент в конец и делаю привязку к нему. Я тоже пробовал настройку data-menu-top
на сцену, я хотел, чтобы ссылка перейти.
Мой тест ссылки:<a href="#scene2" data-menu-top="700">Passenger Portal</a>
который только прокручивается до верхней части страницы с небольшим смещением. Изменение значения data-menu-top ничего не дает.
Это мое посвящение (и у меня есть JQuery включен ofc)
<script>
var s = skrollr.init({
smoothScrolling: true
/*render: function (data) {
//Log the current scroll position.
console.log(data.curTop);
}*/
});
skrollr.menu.init(s, {
animate: true,
//The easing function to use.
easing: 'sqrt',
//Multiply your data-[offset] values so they match those set in skrollr.init
scale: 2,
//How long the animation should take in ms.
duration: function (currentTop, targetTop) {
//By default, the duration is hardcoded at 500ms.
return 500;
//But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
//return Math.abs(currentTop - targetTop) * 10;
},
//If you pass a handleLink function you'll disable `data-menu-top` and `data-menu-offset`.
//You are in control where skrollr will scroll to. You get the clicked link as a parameter and are expected to return a number.
handleLink: function (link) {
return 400;//Hardcoding 400 doesn't make much sense.
},
//By default skrollr-menu will only react to links whose href attribute contains a hash and nothing more, e.g. `href="#foo"`.
//If you enable `complexLinks`, skrollr-menu also reacts to absolute and relative URLs which have a hash part.
//The following will all work (if the user is on the correct page):
//http://example.com/currentPage/#foo
//http://example.com/currentDir/currentPage.html?foo=bar#foo
///?foo=bar#foo
complexLinks: false,
//This event is triggered right before we jump/animate to a new hash.
change: function (newHash, newTopPosition) {
//Do stuff
}
});
</script>
1 ответ
У меня была та же проблема с скролл-меню, которое только частично пошло вниз. Удаление этой строки из сценария инициации позволило ей прокрутить до нужной якорной ссылки:
handleLink: function (link) {
return 400;//Hardcoding 400 doesn't make much sense.
},