👻
SVGのモーフィングアニメーション
前提として、Snap.svgというSVG用のJSライブラリを使用します。
実装したいもの_1
イベントをトリガーに、シンプルな2つのSVG画像をモーフィングさせたい。
画像A→画像Bでモーフィングする。
作業手順
- 公式サイトからjsファイルをダウンロードし、読み込む
<script type="text/javascript" src="snap.svg-min.js"></script>
- SVG画像を用意する
モーフィングに使用するのは、<path> 要素になります。
画像A
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.21 439.79">
<path d="M351.29,424.86l-28.8-65.43-28.08-63.8-33.35-75.74-27-61.31L202.19,86.16l-31.93,70.09-29,63.64-35.68,78.33-28,61.51-29.8,65.42a25,25,0,0,1-45.5-20.73l80.09-175.8,97.48-214A25,25,0,0,1,202.58,0h.16a25,25,0,0,1,22.72,14.93l94.3,214.2,77.29,175.58c5.57,12.64,0,27.84-12.8,33A25.59,25.59,0,0,1,351.29,424.86Z"/>
<path d="M251.45,330H147.73a25,25,0,1,1,0-50H251.45a25,25,0,0,1,0,50Z"/>
</svg>
画像B
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.21 439.79">
<path d="M23.55,441.65A23.55,23.55,0,0,1,0,418.09V23.55a23.56,23.56,0,0,1,47.11,0V418.09A23.56,23.56,0,0,1,23.55,441.65Z"/>
<path d="M290.72,220.53A122.72,122.72,0,0,0,216.56,0H87.13a25,25,0,1,0,0,50H216.56a72.77,72.77,0,0,1,0,145.53s-131.14.05-132,.13a25,25,0,0,0,0,49.75c.84.08,132,.12,132,.12a72.77,72.77,0,0,1,0,145.54H87.13a25,25,0,1,0,0,50H216.56a122.73,122.73,0,0,0,74.16-220.54Z"/>
</svg>
- コードの記述
HTML
<div class="demo">
<!-- モーフィングさせたいSVGにIDを設定 -->
<svg id="js-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.21 439.79">
<!-- path_1の初期値 -->
<path id="path_1" d="M251.45,330H147.73a25,25,0,1,1,0-50H251.45a25,25,0,0,1,0,50Z"/>
<!-- path_2の初期値 -->
<path id="path_2" d="M351.29,424.86l-28.8-65.43-28.08-63.8-33.35-75.74-27-61.31L202.19,86.16l-31.93,70.09-29,63.64-35.68,78.33-28,61.51-29.8,65.42a25,25,0,0,1-45.5-20.73l80.09-175.8,97.48-214A25,25,0,0,1,202.58,0h.16a25,25,0,0,1,22.72,14.93l94.3,214.2,77.29,175.58c5.57,12.64,0,27.84-12.8,33A25.59,25.59,0,0,1,351.29,424.86Z"/>
</svg>
</div>
JavaScript
let $svg = $('#js-svg'), //SVG全体を定義
$path_1 = Snap('#path_1'), //変化させたいpathを定義
$path_2 = Snap('#path_2'), //変化させたいpathを定義
$path_1_after = 'M23.55,441.65A23.55,23.55,0,0,1,0,418.09V23.55a23.56,23.56,0,0,1,47.11,0V418.09A23.56,23.56,0,0,1,23.55,441.65Z', //path_1の変化後の値
$path_2_after = 'M290.72,220.53A122.72,122.72,0,0,0,216.56,0H87.13a25,25,0,1,0,0,50H216.56a72.77,72.77,0,0,1,0,145.53s-131.14.05-132,.13a25,25,0,0,0,0,49.75c.84.08,132,.12,132,.12a72.77,72.77,0,0,1,0,145.54H87.13a25,25,0,1,0,0,50H216.56a122.73,122.73,0,0,0,74.16-220.54Z', //path_2の変化後の値
SPEED = 300, //モーフィングのスピード,
EASING = mina.easeout; //snap.svgに用意されているeasingのparameter
//モーフィングを発火させるイベントを設定
$(window).scroll(function (){
//animateメソッドを設定
$path_1.animate({ d: $path_1_after }, SPEED, EASING);
$path_2.animate({ d: $path_2_after }, SPEED, EASING);
})
Snap.svgのparameterは、公式のdocumentを参照して下さい。
ポイント
実装したいもの_2
イベントをトリガーに、塗りや線形グラデーションも定義されている、2つのSVG画像をモーフィングさせたい。
画像A→画像Bでモーフィングする。
作業手順
- 公式サイトからjsファイルをダウンロードし、読み込む
<script type="text/javascript" src="snap.svg-min.js"></script>
- SVG画像を用意する
- 塗りや線形グラデーションに使用するのは、<linearGradient>要素
- モーフィングに使用するのは、<path> 要素
- <style> 要素は、使わない
画像A
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 351 351" style="enable-background:new 0 0 351 351;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
// 以下略
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="144.6497" y1="-1.9348" x2="144.6497" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st0" d="M166.8,295.8c-43.4-1.4-82.4-27.3-102.7-64.8c-18.8-34.9-18.1-75.7-4.5-106c10-22.5-20.3-33.1-29.2-13
c-16.8,38.1-19.9,92.2,9.3,141.1c25.5,42.7,72,73.4,129.4,74.8c44.6,1,77.9-17.1,95.4-30.5c17.2-13.1-0.7-38.3-19-25.9
C231,281.8,207.7,297.1,166.8,295.8z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="163.5643" y1="-1.9348" x2="163.5643" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st1" d="M217.8,212.3c-9.3,12-28.7,22.1-47.7,21.1c-21.5-1.1-37.4-12.1-47.1-25.7c-13.3-18.9-11.9-39.9-8.6-50.4
c7.3-22.5-24.7-32.8-31.3-11.6c-5.8,18.6-7.9,46.9,8.9,75.1c12.9,21.8,40.9,46.7,82.5,45.7c41.2-0.9,63.7-27.1,68.7-33.2
C259.1,214.6,232.7,193.3,217.8,212.3z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="177.4972" y1="-1.9348" x2="177.4972" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st2" d="M326,187.8c1.9-23.7,1.3-68.5-34.1-112.2c-35.8-44.1-94-64.2-147.9-54.2C84.8,32.4,45.2,75,29.7,113.5
c-8,19.9,21.8,31.4,29.7,12.1c10.3-25.3,38.6-61.7,86.8-71.9c43-9.1,87.9,4.3,118.3,39.3c34.6,39.8,30.7,83,29.6,92.8
C291.6,208.7,324,213.1,326,187.8z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="270.4551" y1="-1.9348" x2="270.4551" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st3" d="M316.6,247.7c-13.6-7.2-17.1-8.9-22.4-11.8c-5.3-2.9-19.5-10.4-30.6-16.3c-6.8-3.6-17.2-9.1-24.1-12.8
c-17.5-9.3-36.6,17.5-15.5,29.2c12.2,6.7,18.1,9.8,24.7,13.4c12.6,6.7,23.7,12.5,34.2,18.2c5.4,2.9,7,3.7,17.4,9.3
C321.8,288.3,336.9,258.5,316.6,247.7z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="173.7367" y1="-1.9348" x2="173.7367" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st4" d="M143.6,120.8c21.4-12.2,48.8-8.5,66.3,6c19.7,16.3,22.8,37,22.3,48.8c-0.9,21.4,32.6,25.5,33.3-0.8
c0.8-33.1-17.5-64.8-45.1-81.2c-25.2-15-58.5-19.3-90.6-3.2c-25.6,12.8-41.4,36.9-46.7,55.5c-7.7,26.6,25.4,31.4,31.1,12.5
C118.7,143.3,126.2,130.6,143.6,120.8z"/>
</svg>
画像B
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 351 351" style="enable-background:new 0 0 351 351;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
// 以下略
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="83.6827" y1="-1.9348" x2="83.6827" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st0" d="M110.2,162.3c-9.1,15.7-15.8,27.3-25.5,44.1c-8.2,14.3-15.7,27-23.2,40c-4.1,7.1-19.3,33.2-32.7,56.3
c-11.5,19.7,16.7,35.6,27.9,15.9C67.4,300,81.2,276.3,90.2,261c8.6-14.7,24.1-41.7,24.1-41.7s16.2-28.2,23.8-40.1
C150.6,159.7,122.1,141.7,110.2,162.3z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="148.9169" y1="-1.9348" x2="148.9169" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st1" d="M184.2,223.7c-8.3-11-13-17.3-16.8-22.6c-3.5-5-10.5-14.8-12-16.8c-3.7-4.9-10.9-15-16.8-23.4
c-12.2-17.7-40.2-2.2-24.7,20.3c8.5,12.2,15.4,22,15.4,22l15.2,21.3c0,0,11.4,15.9,14.5,20.2C171.6,261.8,198.9,243.1,184.2,223.7z"
/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="220.3697" y1="-1.9348" x2="220.3697" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st2" d="M276.9,27c-14.8,4.4-33.4,9.9-41.3,12.2c-7.9,2.3-29.9,8.7-43,12.7c-15.9,4.9-26.9,8-39.4,11.8
C134,69.5,141,101,164.1,93.9c11.6-3.5,29.1-8.7,38.6-11.5c10.1-3,24-7,36.6-10.8c13.4-4,36.3-10.7,46.3-13.9
C308.7,50.2,298.2,20.6,276.9,27z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="296.6271" y1="-1.9348" x2="296.6271" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st3" d="M325.6,168.3c-4.4-19.6-8-38.1-9.4-44.5c-1.2-6-6.2-29.6-8.5-40.5c-2.3-11.3-7.5-36.5-9.2-44.2
c-4.4-20.3-35.3-16.8-31,7.7c2.4,13.9,7.6,36.6,9,43.9c3.2,16,5.6,26.3,8.8,42c2.8,13.7,4.7,23.2,8.9,42.4
C299.2,197.9,330.6,190.8,325.6,168.3z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="210.3596" y1="-1.9348" x2="210.3596" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<path class="st4" d="M186.5,243c8.5-14.7,28.4-49,34.7-59.8c5.3-9.2,13.6-23.3,21.1-36.3c7.6-13.2,15.5-26.6,19.2-33
c11.3-19.8-16.7-34.6-27.1-16.8c-6.2,10.5-15,25.6-17.9,30.8c-6.4,11.6-20.1,34.8-27.6,47.5c-7.3,12.5-20.7,35.5-28.3,48.3
C146.3,247.5,175.8,261.4,186.5,243z"/>
</svg>
- コードの記述
A.HTML
- アニメーションさせるpathの設定、IDを指定する
上から昇順に「path_1」「path_2」「path_3「path_4」「path_5」 - 画像AのlinearGradientタグを全て移植する
- 画像BのlinearGradientタグを全て移植する
- 画像AのlinearGradientタグのIDを変更する
上から昇順に「path_1_linear_before」「path_2_linear_before」「path_3_linear_before」「path_4_linear_before」「path_5_linear_before」 - 画像BのlinearGradientタグのIDを変更する
上から昇順に「path_1_linear_after」「path_2_linear_after」「path_3_linear_after」「path_4_linear_after」「path_5_linear_after」
HTML
<div class="demo">
<!-- モーフィングさせたいSVGにIDを設定 -->
<svg id="js-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399.21 439.79">
<!-- pathの設定 -->
<path id="path_1" d="" fill=""/>
<path id="path_2" d="" fill=""/>
<path id="path_3" d="" fill=""/>
<path id="path_4" d="" fill=""/>
<path id="path_5" d="" fill=""/>
<!-- end pathの設定 -->
<defs>
<!-- linearGradientの設定 -->
<!-- 画像AのlinearGradient -->
<linearGradient id="path_1_linear_before" gradientUnits="userSpaceOnUse" x1="144.6497" y1="-1.9348" x2="144.6497" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_2_linear_before" gradientUnits="userSpaceOnUse" x1="163.5643" y1="-1.9348" x2="163.5643" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_3_linear_before" gradientUnits="userSpaceOnUse" x1="177.4972" y1="-1.9348" x2="177.4972" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_4_linear_before" gradientUnits="userSpaceOnUse" x1="270.4551" y1="-1.9348" x2="270.4551" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_5_linear_before" gradientUnits="userSpaceOnUse" x1="173.7367" y1="-1.9348" x2="173.7367" y2="346.5783">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<!-- end 画像AのlinearGradient -->
<!-- 画像BのlinearGradient -->
<linearGradient id="path_1_linear_after" gradientUnits="userSpaceOnUse" x1="83.6827" y1="-1.9348" x2="83.6827" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_2_linear_after" gradientUnits="userSpaceOnUse" x1="148.9169" y1="-1.9348" x2="148.9169" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_3_linear_after" gradientUnits="userSpaceOnUse" x1="220.3697" y1="-1.9348" x2="220.3697" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_4_linear_after" gradientUnits="userSpaceOnUse" x1="296.6271" y1="-1.9348" x2="296.6271" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<linearGradient id="path_5_linear_after" gradientUnits="userSpaceOnUse" x1="210.3596" y1="-1.9348" x2="210.3596" y2="349.2386">
<stop offset="0" style="stop-color:#73CBFD"/>
<stop offset="1" style="stop-color:#1D5AB1"/>
</linearGradient>
<!-- end 画像BのlinearGradient -->
<!-- end linearGradientの設定 -->
</defs>
</svg>
</div>
B.JavaScript
- 画像Aのpath要素を全て記述する
- 画像Bのpath要素を全て記述する
JavaScript
let $svg = $('#js-svg'), //SVG全体を定義
$path_1 = Snap('#path_1'), //動かしたいpathを定義
$path_2 = Snap('#path_2'), //動かしたいpathを定義
$path_3 = Snap('#path_3'), //動かしたいpathを定義
$path_4 = Snap('#path_4'), //動かしたいpathを定義
$path_5 = Snap('#path_5'), //動かしたいpathを定義
// 画像Aのpath要素
$path_1_before = 'M166.8,295.8c-43.4-1.4-82.4-27.3-102.7-64.8c-18.8-34.9-18.1-75.7-4.5-106c10-22.5-20.3-33.1-29.2-13c-16.8,38.1-19.9,92.2,9.3,141.1c25.5,42.7,72,73.4,129.4,74.8c44.6,1,77.9-17.1,95.4-30.5c17.2-13.1-0.7-38.3-19-25.9C231,281.8,207.7,297.1,166.8,295.8z', //section１でのpath_1
$path_2_before = 'M217.8,212.3c-9.3,12-28.7,22.1-47.7,21.1c-21.5-1.1-37.4-12.1-47.1-25.7c-13.3-18.9-11.9-39.9-8.6-50.4c7.3-22.5-24.7-32.8-31.3-11.6c-5.8,18.6-7.9,46.9,8.9,75.1c12.9,21.8,40.9,46.7,82.5,45.7c41.2-0.9,63.7-27.1,68.7-33.2C259.1,214.6,232.7,193.3,217.8,212.3z', //section１でのpath_2
$path_3_before = 'M326,187.8c1.9-23.7,1.3-68.5-34.1-112.2c-35.8-44.1-94-64.2-147.9-54.2C84.8,32.4,45.2,75,29.7,113.5c-8,19.9,21.8,31.4,29.7,12.1c10.3-25.3,38.6-61.7,86.8-71.9c43-9.1,87.9,4.3,118.3,39.3c34.6,39.8,30.7,83,29.6,92.8C291.6,208.7,324,213.1,326,187.8z',//section１でのpath_3
$path_4_before = 'M316.6,247.7c-13.6-7.2-17.1-8.9-22.4-11.8c-5.3-2.9-19.5-10.4-30.6-16.3c-6.8-3.6-17.2-9.1-24.1-12.8c-17.5-9.3-36.6,17.5-15.5,29.2c12.2,6.7,18.1,9.8,24.7,13.4c12.6,6.7,23.7,12.5,34.2,18.2c5.4,2.9,7,3.7,17.4,9.3C321.8,288.3,336.9,258.5,316.6,247.7z',//section１でのpath_4
$path_5_before = 'M143.6,120.8c21.4-12.2,48.8-8.5,66.3,6c19.7,16.3,22.8,37,22.3,48.8c-0.9,21.4,32.6,25.5,33.3-0.8c0.8-33.1-17.5-64.8-45.1-81.2c-25.2-15-58.5-19.3-90.6-3.2c-25.6,12.8-41.4,36.9-46.7,55.5c-7.7,26.6,25.4,31.4,31.1,12.5C118.7,143.3,126.2,130.6,143.6,120.8z',//section１でのpath_5
// 画像Bのpath要素
$path_1_after = 'M110.2,162.3c-9.1,15.7-15.8,27.3-25.5,44.1c-8.2,14.3-15.7,27-23.2,40c-4.1,7.1-19.3,33.2-32.7,56.3c-11.5,19.7,16.7,35.6,27.9,15.9C67.4,300,81.2,276.3,90.2,261c8.6-14.7,24.1-41.7,24.1-41.7s16.2-28.2,23.8-40.1C150.6,159.7,122.1,141.7,110.2,162.3z', //section２でのpath_1
$path_2_after = 'M184.2,223.7c-8.3-11-13-17.3-16.8-22.6c-3.5-5-10.5-14.8-12-16.8c-3.7-4.9-10.9-15-16.8-23.4c-12.2-17.7-40.2-2.2-24.7,20.3c8.5,12.2,15.4,22,15.4,22l15.2,21.3c0,0,11.4,15.9,14.5,20.2C171.6,261.8,198.9,243.1,184.2,223.7z', //section２でのpath_2
$path_3_after = 'M276.9,27c-14.8,4.4-33.4,9.9-41.3,12.2c-7.9,2.3-29.9,8.7-43,12.7c-15.9,4.9-26.9,8-39.4,11.8C134,69.5,141,101,164.1,93.9c11.6-3.5,29.1-8.7,38.6-11.5c10.1-3,24-7,36.6-10.8c13.4-4,36.3-10.7,46.3-13.9C308.7,50.2,298.2,20.6,276.9,27z',//section２でのpath_3
$path_4_after = 'M325.6,168.3c-4.4-19.6-8-38.1-9.4-44.5c-1.2-6-6.2-29.6-8.5-40.5c-2.3-11.3-7.5-36.5-9.2-44.2c-4.4-20.3-35.3-16.8-31,7.7c2.4,13.9,7.6,36.6,9,43.9c3.2,16,5.6,26.3,8.8,42c2.8,13.7,4.7,23.2,8.9,42.4C299.2,197.9,330.6,190.8,325.6,168.3z',//section２でのpath_4
$path_5_after = 'M186.5,243c8.5-14.7,28.4-49,34.7-59.8c5.3-9.2,13.6-23.3,21.1-36.3c7.6-13.2,15.5-26.6,19.2-33c11.3-19.8-16.7-34.6-27.1-16.8c-6.2,10.5-15,25.6-17.9,30.8c-6.4,11.6-20.1,34.8-27.6,47.5c-7.3,12.5-20.7,35.5-28.3,48.3C146.3,247.5,175.8,261.4,186.5,243z',//section２でのpath_5
// 画像Aのfill要素指定
$path_1_linear_before = "url(#path_1_linear_before)";
$path_2_linear_before = "url(#path_2_linear_before)";
$path_3_linear_before = "url(#path_3_linear_before)";
$path_4_linear_before = "url(#path_4_linear_before)";
$path_5_linear_before = "url(#path_5_linear_before)";
// 画像Bのfill要素指定
$path_1_linear_after = "url(#path_1_linear_after)";
$path_2_linear_after = "url(#path_2_linear_after)";
$path_3_linear_after = "url(#path_3_linear_after)";
$path_4_linear_after = "url(#path_4_linear_after)";
$path_5_linear_after = "url(#path_5_linear_after)";
SPEED = 300, //動く速さ,
EASING = mina.easeout; //snap.svgに用意されているeasing
//スクロールイベント
$(window).on('load scroll', function () {
var scroll = $(window).scrollTop();
var targetPos = $("#target").offset().top;
var targeHeight = $(window).height();
if (scroll > targetPos - targeHeight/5){
// pathアニメーション
$path_1.animate({ d: $path_1_after }, SPEED, EASING);
$path_2.animate({ d: $path_2_after }, SPEED, EASING);
$path_3.animate({ d: $path_3_after }, SPEED, EASING);
$path_4.animate({ d: $path_4_after }, SPEED, EASING);
$path_5.animate({ d: $path_5_after }, SPEED, EASING);
// linearGradientアニメーション
$path_1.attr("fill" , $path_1_linear_after)
$path_2.attr("fill" , $path_2_linear_after)
$path_3.attr("fill" , $path_3_linear_after)
$path_4.attr("fill" , $path_4_linear_after)
$path_5.attr("fill" , $path_5_linear_after)
} else {
// pathアニメーション
$path_1.animate({ d: $path_1_before }, SPEED, EASING);
$path_2.animate({ d: $path_2_before }, SPEED, EASING);
$path_3.animate({ d: $path_3_before }, SPEED, EASING);
$path_4.animate({ d: $path_4_before }, SPEED, EASING);
$path_5.animate({ d: $path_5_before }, SPEED, EASING);
// linearGradientアニメーション
$path_1.attr("fill" , $path_1_linear_before)
$path_2.attr("fill" , $path_2_linear_before)
$path_3.attr("fill" , $path_3_linear_before)
$path_4.attr("fill" , $path_4_linear_before)
$path_5.attr("fill" , $path_5_linear_before)
}
})
Discussion