CSS3 - Анимировать SVG, если он отображается в области просмотра (прокрутка страницы) - PullRequest
Новая
       75

CSS3 - Анимировать SVG, если он отображается в области просмотра (прокрутка страницы)

0 голосов
/ 05 мая 2020

Я выдергивал волосы, пытаясь заставить это работать. Такая задача.

Цель состоит в том, чтобы запустить анимацию css, когда объект виден, когда он прокручивается в поле зрения, а не раньше.

Использование Javascript из здесь .

Чтобы упростить задачу, у меня есть ручка с кодом: https://codepen.io/studiotwofold/pen/dyYJWrV

Есть идеи, как это исправить?

HTML: 

<div class="icon-container" style="width:100px;">

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
   <defs>
    <linearGradient id="icon-gradient" gradientUnits="userSpaceOnUse">
        <stop offset="0%" style="stop-color:#E21C79"/>
        <stop offset="100%" style="stop-color:#FC4C02"/>
    </linearGradient>
   </defs>

 <g class="stf-icon">
   <line x1="26" y1="29" x2="32" y2="29"/>
   <path d="M29,25h-3l-0.2-0.5c-0.5-1.6-1.5-3.1-2.7-4.4l0,0c-3.3-3.3-3.2-8.8,0.3-12l0,0c3.2-2.9,8-2.9,11.2,0l0,0
    c3.5,3.2,3.6,8.6,0.3,12l0,0c-1.2,1.2-2.2,2.7-2.7,4.4L32,25"/>
   <line x1="29" y1="3" x2="29" y2="1"/>
   <line x1="19.8" y1="7.3" x2="18.3" y2="6"/>
   <line x1="23.9" y1="4.1" x2="23.1" y2="2.3"/>
   <line x1="40.4" y1="11.3" x2="42.3" y2="10.7"/>
   <line x1="38.1" y1="7" x2="39.6" y2="5.7"/>
   <line x1="34" y1="3.8" x2="34.8" y2="2"/>
   <path d="M17,13H3c-1.1,0-2,0.9-2,2v22c0,1.1,0.9,2,2,2h18l7,4v-4h7c1.1,0,2-0.9,2-2V24"/>
   <line x1="5" y1="21" x2="11" y2="21"/>
   <line x1="14" y1="21" x2="18" y2="21"/>
   <line x1="5" y1="25" x2="13" y2="25"/>
   <line x1="16" y1="25" x2="21" y2="25"/>
   <line x1="5" y1="29" x2="8" y2="29"/>
   <line x1="11" y1="29" x2="23" y2="29"/>
   <line x1="5" y1="33" x2="13" y2="33"/>
   <line x1="16" y1="33" x2="21" y2="33"/>
   <polyline points="30.2,10 27,16 31,15 28.6,21 "/>
 </g>
</svg>
</div>

CSS: 

.stf-icon{fill:none;stroke: url(#icon-gradient);stroke-width:1;stroke-linecap:round;stroke-miterlimit:10;}


.animated-icon {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: icon-animation 6s linear forwards;
  animation-fill-mode: forwards;
}


@keyframes icon-animation {
  from {stroke-dashoffset: 110;}
  to {stroke-dashoffset: 0;}
}

Jquery: 

var $fade =  $(".stf-icon"); //Calling the class in HTML

$(window).scroll(function () { //Using the scroll global variable
    $fade.each(function () {
        fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
        windowBottom = $(window).scrollTop() + $(window).height();
        if (fadeMiddle < windowBottom) {
          $(this).addClass("animated-icon"); //add the animated icon class
        }
    });
});

/* On Load: Trigger Scroll Once*/
$(window).scroll();

Чтобы упростить задачу, у меня есть ручка для кода : https://codepen.io/studiotwofold/pen/dyYJWrV

РЕДАКТИРОВАТЬ

Можно ли это сделать с прямым javascript? 

var wrapper = document.querySelector('.icon-container');

window.onscroll = function (event) {
  if (wrapper.getBoundingClientRect().top < 0) {
    wrapper.className = "icon-container animated-icon";
    window.onscroll = null;
  }
}
...