svg animate / skrollr.js 讓svg以遮罩動態出場

發表在 Others 中 by

緣由是看到這教學：http://pepsized.com/merry-scrolling-with-skrollr-js/

後來又搜尋到更簡化的教學：http://prinzhorn.github.io/skrollr/examples/path.html

於是如法炮製完成版：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Drawing a path</title>
</head>

<body style="text-align:center;">
<div id="skrollr-body">
<h1>SVG IS AWESOME (so is skrollr)</h1>
<p>Scroll down for details</p>
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="800px" height="1000px" viewBox="0 0 800 1000" style="enable-background:new 0 0 800 1000;" xml:space="preserve">

<path style="fill:none;stroke:#F39800;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;" d="
M399,39c0,0-173,29-101,140c76.381,117.754,340,102,277,182s-342,146-350,66c-9.258-92.576,322-108,311,33s-141,204-43,191
s183.163-51.777,203,10c35,109-111,246-305,176s-252-128-276-76s157,145,157,145"/>
</svg>
<script type="text/javascript" src="skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
forceHeight: false
});
</script>
</body>

</html>

另外畫好的svg圖：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="800px" height="1000px" viewBox="0 0 800 1000" style="enable-background:new 0 0 800 1000;" xml:space="preserve">

<path style="fill:none;stroke:#F39800;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;//從這邊開始增加那段內容//" d="
M399,39c0,0-173,29-101,140c76.381,117.754,340,102,277,182s-342,146-350,66c-9.258-92.576,322-108,311,33s-141,204-43,191
s183.163-51.777,203,10c35,109-111,246-305,176s-252-128-276-76s157,145,157,145"/>
</svg>

本則範例修改重點：當我同樣話了一條曲折的線svg圖，之後加上：

stroke-dasharray:6000;stroke-dashoffset:0"
data-0="stroke-dashoffset:6000;" data-end="stroke-dashoffset:0;"

雖然現在不是非常清楚，但是朦朧的猜測必須給個「開始排列」至「結束排列」的設定值吧？！

後來才找到github上的原始skroller作者，更新之後多了很多東西耶：https://github.com/Prinzhorn/skrollr.git

發表留言