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.
        },

Другие вопросы по тегам