This is related to a previous post here. However, I think it was a bit of a momentous task. So I am breaking it down to smaller chunks.
I have made a simple SVG image that includes one "path" and one "rect" element. The user can draw the lines on and off the window by scrolling up and down the page (scroll down the page for on and up the page for off/"undraw). However, both elements "draw"/animate at the same time. What I want to do is as the user scrolls down the page, the line path draws on, then the "rect" element draws (after), so it's more fluid and chronological.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>the single line</title>
<link rel="stylesheet" type="text/css" href="line.css">
<style>
svg {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
}
/*.line{
stroke-dashoffset:850;
stroke-dasharray: 850;
}
.box {
stroke-dashoffset:1852;
stroke-dasharray: 1852;
}*/
.all{
stroke-dashoffset:2702;
stroke-dasharray: 2702;
}
.straightLine {
height: 3000px;
position: relative;
width: 360px;
margin: 40vh auto 0 auto;
}
</style>
</head>
<body>
<main role="article" title="line">
<div class="straightLine">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1280 800" style="enable-background:new 0 0 1280 800;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:8;stroke-miterlimit:10;}
</style>
<g class="all">
<path class="st0" d="M54,178h509.6c49.9,0,90.4,40.5,90.4,90.4V428"/>
<rect x="498" y="428" class="st0" width="308" height="162"/>
</g>
</svg>
</div>
</main>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="line.js"></script>
<script>
$(document).ready(function() {
//variable for the 'stroke-dashoffset' unit
var $dashOffset = $(".all").css("stroke-dashoffset");
//on a scroll event - execute function
$(window).scroll(function() {
//calculate how far down the page the user is
var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
//convert dashoffset pixel value to interger
var $newUnit = parseInt($dashOffset, 10);
//get the value to be subtracted from the 'stroke-dashoffset'
var $offsetUnit = $percentageComplete * ($newUnit / 100);
//set the new value of the dashoffset to create the drawing effect
$(".all").css("stroke-dashoffset", $newUnit - $offsetUnit);
});
});
</script>
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
