Анимация WordPress Cutsom не запускается при прокрутке - PullRequest
Новая
       17

Анимация WordPress Cutsom не запускается при прокрутке

0 голосов
/ 15 марта 2019

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

Чтобы быть более читабельным, я буду максимально схематизировать свои HTML и CSS.

HTML: 

<div id="svg-1">
  <svg class="svg">
    <path class="svg-path" some-path/>
    <path class="svg-path" some-other-path>
  </svg>
  <h4 class="legende">Some text</h4>
  <p class="legende">Some other text</p>
</div>
<div id="svg-2">
  <svg class="svg">
    <path class="svg-path" some-path/>
    <path class="svg-path" some-other-path>
  </svg>
  <h4 class="legende">Some text</h4>
  <p class="legende">Some other text</p>
</div>
<div id="svg-3">
  <svg class="svg">
    <path class="svg-path" some-path/>
    <path class="svg-path" some-other-path>
  </svg>
  <h4 class="legende">Some text</h4>
  <p class="legende">Some other text</p>
</div>

CSS: 

.svg {
  height: 45mm;
  z-index: 1;
  transform-origin: center;
}

.svg-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
  stroke: #60206F;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1200
  }
  to {
    stroke-dashoffset: 0;
  }
}

.legende {
  margin: auto;
  bottom: 150px;
  position: relative;
  z-index: 2;
  opacity: 0;
}

#svg-1:hover .legende, #svg-2:hover .legende, #svg-3:hover .legende {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 2s;
}
#svg-1:hover .svg, #svg-2:hover .svg, #svg-3:hover .svg {
  opacity: 0.1;
  transform: scale(2);
  transition-property: transform;
  transition-duration: 2s;
  z-index: 1;
}

Javascript: Здесь я сделал несколько попыток: одна с использованием vanilla JS, другие с использованием Waypoints и jQuery, ни одна из них не работала, и в консоли не было найдено сообщение об ошибке ... Я даже пыталсязапись «ping» в консоль в начале кода, чтобы увидеть, был ли он выполнен, и «pong», когда оператор if был истинным, чтобы увидеть, считалось ли оно верным, когда я прокручивал ... я получил «ping» и «pong»"три раза, так как у меня есть три SVG, но я получил три" понга ", когда мои SVG не были видны.Я опубликую эту попытку и одну с Waypoints и jQuery, чтобы показать мои попытки.Ванильный Javascript с «пинг-понгом»: 

console.log("ping");
const isInViewport = function (elem) {
    const bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};
let i;
const an = document.getElementsByClassName('svg');
for (i=0; i<an.length; i++) {
  if (isInViewport(an[i])) {
    console.log("pong");
    an[i].style.animation = "draw 15s 1 ease-out";
  }
}

Javascript с путевыми точками и jQuery: 

(function($){
  $(document).ready(function() {
    $('.svg').waypoint(function() {
      $('.svg-path').css({
        animation: "draw 15s ease-out"
      });
    }, {offset: '0%'});
  })
})(jQuery);

Кроме того, в случае его использования я использую Wordpress и Salient иЯ использую плагин «Head and Footer Scripts Inserter» от Space X-Chimp для связывания моих js-файлов в нижнем колонтитуле.

Лучше всего, Бенджамин

...