ScrollMagic - индикатор выполнения

Я использую библиотеку scrollMagic на сайте, который мне нужен для отображения индикатора выполнения. Панель будет показывать местоположение пользователя на странице. Ширина индикатора выполнения будет просто меняться по мере того, как пользователь прокручивает страницу вверх или вниз. Я не могу заставить его работать с библиотекой scrollMagic. Это то, что я пробовал среди прочего. Спасибо!

var controller = new ScrollMagic.Controller();
$(function progressBar() {
  var tween = TweenMax.fromTo("#progress", 1, {
    width: "0%"
  }, {
    width: "100%"
  });
  var scene = new ScrollMagic.Scene({
      triggerElement: ".header-wrap",
      duration: "100%"
    })
    .setTween(tween)
    .addTo(controller);
});

javascript jquery scrollmagic
person vtj205    schedule 29.06.2015    source источник
comment
Вы получаете какую-либо ошибку в консоли?   -  person Hanlet Escaño    schedule 29.06.2015

Ответы (3)


arrow_upward
3
arrow_downward

Мне потребовалось некоторое время, чтобы понять, надеюсь, это поможет кому-то, кто ищет решение.

Вам придется использовать метод прогресса магии прокрутки.

.on("progress", function(e) {
    var progressvalue = Math.floor(100 * e.progress);
    $('.scroll-progress').css('width',progressvalue +"%");
})

Вот весь код, как он выглядит

var pin = new ScrollMagic.Scene({
    triggerHook: "onLeave",
    duration: "1100%",
    triggerElement: "#pin"
})
.setPin("#pin")
.setTween(tl)
.setClassToggle("#pin", "active")
// Add this code
.on("progress", function(e) {
    var progressvalue = Math.floor(100 * e.progress);
    $('.scroll-progress').css('width', progressvalue + "%");
})
.addTo(controller);

В html добавьте div, где вы хотите показать прогресс.

<div class="scroll-progress" style="width:0%; height:5px; background:#0090c6; position:fixed; bottom:0; left:0; z-index:9999"></div>
person LegendaryAks    schedule 10.10.2018
comment
привет, я безуспешно пытался заставить этот индикатор работать над сценой с несколькими закрепленными секциями. jsfiddle.net/o0hy1mLs/1 не могли бы вы помочь? - person user173420; 11.12.2019

arrow_upward
1
arrow_downward

Я не знаю, насколько это вам поможет, но вы должны попробовать событие 'mousewheel':

window.addEventListener('mousewheel', function(e){
wDelta = e.wheelDelta < 0 ? false : true;
if(wDelta)
    <mousewheel goes up>
else
    <mousewheel goes down>
});

или есть даже атрибут onscroll, если вам все равно, в каком направлении прокручивается пользователь:

<body onscroll="doStuff()">

Дополнительная информация о onscroll

person user2072826    schedule 29.06.2015
comment
Спасибо за ваш ответ. Я пробовал это перед использованием библиотеки scrollMagic. Я просто поместил $('.progressBar').css(width,+=1%) внутри if и $('.progressBar').css(width,-=1%) внутри else. Проблема с этим заключается в том, что в зависимости от того, насколько быстро я прокручиваю, javascript каждый раз будет отображать анимацию по-разному, и индикатор выполнения достигает конца, прежде чем я доберусь до нижней части страницы :( - person vtj205; 30.06.2015

arrow_upward
0
arrow_downward

Если я вас правильно понял, то вы хотите сделать прогресс-бар в шапке? У меня есть div.page, который содержит всю страницу. И в моем заголовке у меня есть div.header__progress

let progressTween = new TimelineMax()
.to('.header__progress', 1, {
  width: '100%'
});

let progressScroll = new ScrollMagic.Scene({
  triggerElement: '.page',
  triggerHook: 0,
  duration: '100%'
})
.setTween(progressTween)
// .addIndicators()
.addTo(controller);
person Арсений Иванов    schedule 12.05.2020