Tính phần trăm thanh scroll (ok)
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
Last updated
<!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>