Запустить анимацию, когда элемент виден после прокрутки - PullRequest
Новая
       14

Запустить анимацию, когда элемент виден после прокрутки

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

Я пытаюсь вызвать анимацию, когда панель становится видимой с помощью прокрутки.

Итак, как мне стабилизировать этот триггер анимации, чтобы он действовал только тогда, когда на экране появляется золотая панель, и сбрасывать / останавливать анимацию, когда она не видна. Или переверните анимацию или управляйте ориентацией прокрутки - поэтому, если вы прокручиваете вниз, окно перемещается вниз - если вы прокручиваете назад вверх, оно сбрасывается в исходное положение 

$(function() {

  function myMove() {
    var elem = document.getElementById("myPerson");
    var pos = 0;
    var id = setInterval(frame, 10);

    function frame() {
      if (pos == 350) {
        clearInterval(id);
      } else {
        pos++;
        elem.style.top = pos + 'px';
        elem.style.left = pos + 'px';
      }
    }
  }


  var header = $("#vision");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      header.removeClass('clearHeader').addClass("darkHeader");
      myMove()
    } else {
      header.removeClass("darkHeader").addClass('clearHeader');

    }
  });
});

enter image description here http://jsfiddle.net/v8g7m51j/2/

Ответы [ 2 ]

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

Я поставлю код здесь 

function myMove(type) {
  let element = document.getElementById('animate');
  element.removeAttribute('class');
  element.classList.add(type);
}

let count = false;
let position = document.documentElement.scrollTop;

window.addEventListener('scroll', e => {
  let scrolls = document.documentElement.scrollTop;
  let element = document.getElementById('animate');
  const mystage = document.querySelector('.myStage');

  if (!isViewport(mystage)) {
    if (scrolls > position) {
      myMove('down');
    } else {
      myMove('up');
    }
  } else {
    element.removeAttribute('class');
  }

  position = scrolls;
});


function isViewport(element) {
  let rect = element.getBoundingClientRect();
  return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
}
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}

.down {
  animation: down 1s ease-in-out forwards;
}

.up {
  animation: up 1s ease-in-out forwards;
}

@keyframes down {
  0% {
    transform: translate(0%, 0%)
  }

  100% {
    transform: translate(350px, 350px)
  }
}

@keyframes up {
  0% {
    transform: translate(350px, 350px)
  }

  100% {
    transform: translate(0%, 0%)
  }
}

.container {
  width: 100%;
  height: 1500px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}
<div class="container red "></div>

<div id="container" class="myStage">
  <div id="animate"></div>
</div>

<div class="container blue"></div>
0 голосов
/ 21 июня 2019

Вы можете использовать getBoundingClientRect и проверить, находится ли элемент в представлении страницы. 

function isViewport (element) { 
   var rect = element.getBoundingClientRect ();
   return rect.bottom <0 || rect.right <0 || rect.left> window.innerWidth || rect.top>      
   window.innerHeight;
}
...