Tính phần trăm thanh scroll (ok)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="jquery-latest.min.js"></script>
  <script src="jquery.drawsvg.js"></script>
  <title>Document</title>
  <style type="text/css">
  body {
    background: #00838f;
  }

  .wrapper {
    height: 2000px;
  }

  svg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  </style>
</head>

<body>
  <div class="wrapper">
    <svg viewBox="0 0 175 256" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="175" height="256">
      <g stroke="#FFF" stroke-width="2" fill="none">
        <path d="M157.068 33H165c4.77 0 9 4.464 9 9.706v202.758c0 5.243-4.288 9.536-9.524 9.536H10.524C5.288 255 1 250.707 1 245.464V42.707C1 37.464 5.06 33 10.017 33h9.203" />
        <path d="M67 33V22.35c0-11.286 8.974-20.56 20.353-20.56 5.688 0 10.91 2.327 14.574 6.08C105.69 11.547 108 16.66 108 22.35V33" />
        <path d="M103.302 33H157v45H19V33h52.72" />
        <path d="M95.068 25.237c0 4.293-3.474 7.785-7.76 7.785-4.284 0-7.758-3.492-7.758-7.785 0-4.302 3.474-7.785 7.757-7.785 4.287 0 7.76 3.482 7.76 7.785z" />
        <path d="M18.696 103h137.896v.17" />
        <path d="M18.738 127h42.64v.308" />
        <path d="M18.738 155h137.854v.068" />
        <path d="M18.738 178h137.854v-.006" />
        <path d="M18.696 227h137.868v-.21" />
      </g>
    </svg>
  </div>
  <script type="text/javascript">
  // var $svg = $('svg').drawsvg();
  // $svg.drawsvg('animate');
  // ===
  var $doc = $(document),
    $win = $(window),
    $svg = $('svg').drawsvg(),
    max = $doc.height() - $win.height();
	  $win.on('scroll', function() {
	    var p = $win.scrollTop() / max;
	    $svg.drawsvg('progress', p);
	  });
  </script>
</body>

</html>
Previous[SVG ANIMATION] Thực hành: Tự 'Cốt' ảnh động - SVG animation (ok)NextMột phép tính lạ của calc (ok)

Last updated

Was this helpful?