Форум

Dilettante_Pro · #11 (**permalink**) 20.01.2016, 17:46

Вариант с запуском анимации только при прокрутке в зоне анимации

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .anim-1 {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 2.5s linear alternate forwards ;
       }

       @keyframes dash {
            0% {
               stroke-dashoffset: 1000;	
            }

            90% {
                fill-opacity: 0;
            }

            100% {
                stroke-dashoffset: 0;
                fill-opacity: 1;
            }
       }

       .anim-2 {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash2 4.5s linear alternate forwards ;
       }

      @keyframes dash2 {
         0% {
             fill-opacity: 0;   
         }

         50% {
            fill-opacity: 0;
            stroke-dashoffset: 1000;
         }

         100% {
            stroke-dashoffset: 0;
            fill-opacity: 1;
         }
      }  
    </style>
    <script type="text/javascript">
        function goSVG() {
           var buff = document.getElementById('svgBlock');
           buff.innerHTML = buff.innerHTML;
  
        }
    </script>
</head>
<body>
   <div style="height:100px;"></div>
   <div id="svgBlock" style="height:100px; overflow: auto;" onscroll="goSVG();">
      <svg width="450px" height="160px"> 
         <text id="svgText" class="anim-1" x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" fill-opacity="0">WEB</text> 
     </svg>
      <svg width="300px" height="20px"> 
         <line class="anim-2" fill-opacity="0" stroke="#000" stroke-width="1" x1="20" x2="300" y1="18" y2="18"/>	
      </svg>
   </div>
</body>
</html>

[/quote]

dima-kruglyak · #12 (**permalink**) 20.01.2016, 19:43

А есть вариант еще варианты как еще можно сделать, не очень хочется привязываться в высоте, постольку блок может находится на разной высоте.

Dilettante_Pro · #13 (**permalink**) 21.01.2016, 10:39

dima-kruglyak,
Я наконец вроде осознал, что вам нужно: запуск анимации при появлении объекта в видимой области.
Кстати, на упомянутом вами сайте для управления используется библиотека https://github.com/Prinzhorn/skrollr

dima-kruglyak · #14 (**permalink**) 21.01.2016, 11:48

Вы можете с этим помочь? Я думал делать сделать запуск вот так, но не получается

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Untitled Page</title>
  <style type="text/css">
    body {
      height: 2000px;
    }
    
    .anim-1 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 2.5s linear alternate forwards;
    }
    
    @keyframes dash {
      0% {
        stroke-dashoffset: 1000;
      }
      90% {
        fill-opacity: 0;
      }
      100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
      }
    }
  </style>


  <script type="text/javascript">
    $(document).ready(function() {
      var show = true;
      var countbox = "#my-block";
      $(window).on("scroll load resize", function() {

        if (!show) return false; // Отменяем показ анимации, если она уже была выполнена

        var w_top = $(window).scrollTop(); // Количество пикселей на которое была прокручена страница
        var e_top = $(countbox).offset().top; // Расстояние от блока со счетчиками до верха всего документа

        var w_height = $(window).height(); // Высота окна браузера
        var d_height = $(document).height(); // Высота всего документа

        var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками

        if (w_top + 200 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height) {
          function goSVG() {
            var buff = document.getElementById('svgBlock');
            buff.innerHTML = buff.innerHTML;
          }

          show = false;
        }
      });
    });
  </script>

</head>

<body>
  <div style="height:1000px;"></div>

  <div id="my-block">
    <div id="svgBlock">
      <svg width="450px" height="160px">
        <text id="svgText" class="anim-1" x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" fill-opacity="0">WEB</text>
      </svg>
    </div>
  </div>
</body>

</html>

dima-kruglyak · #15 (**permalink**) 21.01.2016, 12:03

А если делать через skrollr.js то как можно сделать запуск автоматически
http://codepen.io/sarahtully/pen/Eeawk

Dilettante_Pro · #16 (**permalink**) 21.01.2016, 14:53

ну вот как-то так

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>SVG</title>
    <style type="text/css">
 
      @keyframes dash {
        0% {
          stroke-dashoffset: 1000;	
        }

        90% {
           fill-opacity: 0;
        }

        100% {
           stroke-dashoffset: 0;
          fill-opacity: 1;
        }
     }
    </style>
</head>
<body>
    <div style="height:500px;"></div>
    <svg width="650px" height="160px"> 
       <text id="svgText"  x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" data-0="stroke-dasharray:1000;stroke-dashoffset:1000;animation:dash 2.5s linear alternate forwards ;"  style="fill-opacity:0;">WEB</text> 
    </svg>
	<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
	<script type="text/javascript">
	    skrollr.init();
	</script>
</body>
</html>

Dilettante_Pro · #17 (**permalink**) 21.01.2016, 16:56

В принципе, skrollr работает так

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>SVG</title>
 </head>
<body>
    <div style="height:200px;"></div>
    <svg width="650px" height="160px"> 
       <text id="svgText" class="skrollable skrollable-between" x="0" y="158px" font-size="70px" stroke="#222121" stroke-width="1" data-top="stroke-dasharray:1000;stroke-dashoffset:1000;fill-opacity:0;" data-bottom="stroke-dasharray:1000;stroke-dashoffset:1000;fill-opacity:0;" data-center="stroke-dasharray:1000;stroke-dashoffset:0;fill-opacity:1" >WEB</text> 
    </svg>
	<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
	<script type="text/javascript">
	    skrollr.init();
	</script>
</body>
</html>

На большом окне лучше видно, чем на маленьком окошке здесь.

dima-kruglyak · #18 (**permalink**) 21.01.2016, 17:40

Спасибо

Dilettante_Pro · #19 (**permalink**) 22.01.2016, 17:40

Ваш вариант в исправленном и доработанном виде (скрещивать svg со skrollr - все равно, что ужа и ежа)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SVG</title>
  <style type="text/css">
    body {
      height: 2000px;
    }
    .anim-1 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 2.5s linear alternate forwards;
    }
    @keyframes dash {
      0% {
        stroke-dashoffset: 1000;
      }
      90% {
        fill-opacity: 0;
      }
      100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
      }
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
      var svgHTML = '<svg width="450px" height="160px"><text id="svgText" class="anim-1" x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" fill-opacity="0">WEB</text></svg>';
      var countbox = "#svgBlock";
      var show = true;
      $(window).on("scroll load resize", function () {
          var w_top = $(window).scrollTop(); // Количество пикселей на которое была прокручена страница
          var e_top = $(countbox).offset().top; // Расстояние от блока со счетчиками до верха всего документа
          var w_height = $(window).height(); // Высота окна браузера
          var d_height = $(document).height(); // Высота всего документа
          var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками

          if ((w_top + w_height) > e_top && w_top < (e_top + e_height)) {
              if (show) {
                  $(countbox).html(svgHTML);
                  show = false;
              }
          } else {
              show = true;
              $(countbox).html("");
          }
      });

  </script>
</head>
<body>
  <div style="height:1000px;"></div>
    <div id="svgBlock">
    </div>
   <div style="height:1000px;"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript