Увеличение до максимального числа, а затем уменьшение до минимума - PullRequest
0 голосов
/ 20 июня 2019

Я хочу создать функцию Javascript, которая в конечном итоге будет вызывать анимацию div, обновляя вычисления по мере прокрутки пользователем.

Моя цель состоит в том, чтобы сделать это путем увеличения числа, первоначально с 0 до 20.Как только 20 является значением, это число должно быть распознано, а затем значение должно быть уменьшено с 20 до -20 (например)

В данный момент у меня есть функция, которая будет подсчитыватькогда я прокручиваю страницу вниз, а затем, когда я прокручиваю вверх, снова начнется обратный отсчет, но я не уверен, как лучше получить значения, которые также будут обновляться, когда числа достигают 20 и -20 по мере прокрутки пользователем.

let scrollCount = 0;

window.addEventListener("mousewheel", function(e){

  if(e.wheelDelta < 0 && scrollCount < 20){
    scrollCount++
  }
 else if(e.wheelDelta > 0 && scrollCount > -20){
    scrollCount--
  }


  let x = scrollCount * window.innerWidth
  let y = 30 * window.innerHeight

  moveEye(irisLeft, x, y)
  moveEye(irisRight, x, y)

  console.log(scrollCount)

});

Ответы [ 2 ]

0 голосов
/ 20 июня 2019

Я думаю, что использование PageOffset было бы лучшим вариантом.

var scrollTop = window.pageYOffset;

Это даст вам абсолютное px значение позиции прокрутки. Хотя он не находится в диапазоне [-20,20], вы можете масштабировать его математически (минимальное или максимальное масштабирование).

Здесь указано масштабирование

Округлите масштабированные значения до целых, и все готово.

0 голосов
/ 20 июня 2019

Как я уже сказал в своем комментарии - это поведение очень странное, так как после достижения 20 ваш div начнет дрожать / подпрыгивать и повергать вашего пользователя в эпилептический шок.

let scrollCount = 0;
let direction = 1;

window.addEventListener("mousewheel", function (e) {

  if (e.wheelDelta < 0) {
    scrollCount += direction
    if (scrollCount === 20 || scrollCount === -20) {
      direction *= -1
    }
  }
  else if (e.wheelDelta > 0) {
    scrollCount -= direction
    if (scrollCount === 20 || scrollCount === -20) {
      direction *= -1
    }
  }


  let x = scrollCount * window.innerWidth
  let y = 30 * window.innerHeight

  // moveEye(irisLeft, x, y)
  // moveEye(irisRight, x, y)

  console.log(scrollCount)

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...