<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js">
</script>
<style>@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
a {
color: #333;
}
.svganimeblock {
margin: 100px auto;
text-align: center;
}
p {
margin: 20px 0 0 0;
}
/*=============== SVGアニメーション内の指定 =================*/
/*SVGの横幅*/
.svganimeblock {
max-width: 1080px;
width: 100%;
padding: 30px;
}
/*SVGの可変*/
.svganimeblock svg {
width: 100%;
}
/*アニメーション前のパスの指定*/
.svganimeblock svg path {
fill-opacity: 0; /*最初は透過0で見えない状態*/
transition: fill-opacity 0.5s; /*カラーがつく際のアニメーション0.5秒で変化*/
fill: none; /*塗りがない状態*/
stroke: pink; /*線の色*/
}
/*アニメーション後に.doneというクラス名が付与された時のパスの指定*/
.svganimeblock svg.done path {
fill: red; /*塗りの色*/
fill-opacity: 1; /*透過1で見える状態*/
stroke: none; /*線の色なし*/
}</style>
</head>
<body>
<body>
<!--SVG-->
<div class="svganimeblock">
<!-- SVGタグを差し替える-->
<svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2rem" height="auto" viewBox="0 0 546 44.4" style="overflow:visible;enable-background:new 0 0 546 44.4;" xml:space="preserve">
<defs>
</defs>
<g>
<path d="M15.1,8H2.9c-0.5,0-1-0.1-1.4-0.4C0.5,7,0,6,0,4.5c0-1.2,0.4-2.2,1.1-2.9C1.6,1.2,2.2,1,2.9,1h32.4c0.6,0,1.1,0.2,1.6,0.5
c0.9,0.7,1.3,1.7,1.3,3c0,1.3-0.4,2.3-1.2,2.9c-0.5,0.4-1,0.6-1.7,0.6H23.1v32.7c0,1-0.3,1.7-1,2.3c-0.8,0.7-1.8,1-3,1
c-1.7,0-2.9-0.5-3.5-1.6c-0.3-0.5-0.5-1-0.5-1.7V8z" />
<path d="M52.4,24.9v10.5c0,0.7,0.3,1,1,1h20.2c0.8,0,1.4,0.3,1.9,0.8c0.6,0.7,0.9,1.5,0.9,2.6c0,1.5-0.5,2.5-1.5,3.1
c-0.4,0.2-0.8,0.3-1.3,0.3H50c-3.8,0-5.6-1.9-5.6-5.6V6.6C44.4,2.9,46.3,1,50,1h22.7c0.7,0,1.3,0.2,1.8,0.7c0.7,0.7,1,1.6,1,2.7
c0,1.4-0.5,2.4-1.5,3c-0.4,0.2-0.8,0.3-1.3,0.3H53.4c-0.7,0-1,0.4-1,1.1v9.5h17.9c0.6,0,1.2,0.2,1.6,0.6c0.7,0.6,1,1.5,1,2.7
c0,1.3-0.5,2.3-1.4,2.9c-0.4,0.2-0.8,0.4-1.3,0.4H52.4z" />
<path d="M94.3,21.8L82.2,6.6c-0.6-0.7-0.9-1.5-0.9-2.3c0-1.4,0.6-2.4,1.8-3.1c0.8-0.5,1.7-0.7,2.5-0.7c1.3,0,2.4,0.6,3.2,1.7
l10.4,13.8l10.4-13.8c0.9-1.2,2-1.7,3.3-1.7c0.8,0,1.7,0.2,2.5,0.7c1.2,0.8,1.8,1.8,1.8,3.2c0,0.8-0.3,1.6-0.8,2.3l-12.1,15.2
l13.4,15.7c0.7,0.8,1,1.6,1,2.5c0,1.3-0.6,2.3-1.7,3.1c-0.8,0.6-1.7,0.9-2.6,0.9c-1.4,0-2.5-0.6-3.5-1.8L99.3,27.7L87.7,42.2
c-0.9,1.2-2.1,1.8-3.4,1.8c-0.9,0-1.8-0.3-2.6-0.9c-1.2-0.8-1.7-1.8-1.7-3.1c0-0.9,0.3-1.7,1-2.5L94.3,21.8z" />
<path d="M136.1,8h-12.2c-0.5,0-1-0.1-1.4-0.4C121.5,7,121,6,121,4.5c0-1.2,0.4-2.2,1.1-2.9c0.5-0.5,1.1-0.7,1.8-0.7h32.4
c0.6,0,1.1,0.2,1.6,0.5c0.9,0.7,1.3,1.7,1.3,3c0,1.3-0.4,2.3-1.2,2.9c-0.5,0.4-1,0.6-1.7,0.6h-12.2v32.7c0,1-0.3,1.7-1,2.3
c-0.8,0.7-1.8,1-3,1c-1.7,0-2.9-0.5-3.5-1.6c-0.3-0.5-0.5-1-0.5-1.7V8z" />
<path d="M190.9,32.3l-3.4,8.8c-0.7,1.9-2,2.9-3.9,2.9c-0.7,0-1.4-0.2-2.2-0.5c-1.3-0.7-2-1.6-2-2.9c0-0.6,0.1-1.3,0.4-2l13.6-33.9
c1.2-3,3.2-4.5,5.8-4.5c2.7,0,4.7,1.5,5.9,4.5l13.6,33.9c0.3,0.7,0.4,1.4,0.4,2c0,1.2-0.6,2.2-1.9,2.8c-0.8,0.4-1.5,0.6-2.3,0.6
c-1.8,0-3.1-1-3.8-2.9l-3.4-8.8H190.9z M199.3,8.1l-6,17.4h12L199.3,8.1z" />
<path d="M253.7,31.7l-0.5-28.3c0-0.8,0.3-1.5,0.8-2c0.8-0.7,1.7-1,3-1c1.4,0,2.4,0.4,3.2,1.3c0.4,0.5,0.7,1.1,0.7,1.8v35.3
c0,1.5-0.4,2.8-1.2,3.7c-0.8,1-2,1.6-3.5,1.6c-2.3,0-4.2-1.2-5.5-3.5L232.7,9.6l0.5,31.3c0,0.9-0.3,1.6-0.9,2.2
c-0.8,0.7-1.7,1-2.9,1c-1.5,0-2.6-0.5-3.3-1.5c-0.3-0.5-0.5-1-0.5-1.6V6c0-2.2,1-3.9,3-5c0.9-0.5,2-0.7,3.1-0.7
c2.7,0,4.8,1.3,6.3,3.9L253.7,31.7z" />
<path d="M276,6.9h-4.2c-0.6,0-1.2-0.2-1.6-0.6c-0.6-0.6-0.9-1.3-0.9-2.3c0-1.2,0.4-2,1.2-2.5c0.4-0.2,0.8-0.4,1.3-0.4H288
c0.6,0,1.2,0.2,1.6,0.6c0.6,0.5,0.9,1.3,0.9,2.3c0,1.2-0.4,2-1.2,2.5c-0.4,0.2-0.8,0.4-1.3,0.4h-4.2v30.6h4.2
c0.6,0,1.2,0.2,1.6,0.6c0.6,0.5,0.9,1.3,0.9,2.3c0,1.2-0.4,2-1.2,2.5c-0.4,0.2-0.8,0.4-1.3,0.4h-16.3c-0.6,0-1.2-0.2-1.6-0.6
c-0.6-0.5-0.9-1.3-0.9-2.3c0-1.2,0.4-2,1.2-2.5c0.4-0.2,0.8-0.4,1.3-0.4h4.2V6.9z" />
<path d="M306.1,9.1l0.3,31.8c0,0.6-0.1,1.1-0.4,1.5c-0.7,1.1-1.8,1.6-3.4,1.6c-1.2,0-2.2-0.4-3-1.1c-0.5-0.5-0.8-1.2-0.8-2.1V6.6
c0-2,0.7-3.5,2-4.7c1.2-1,2.7-1.5,4.6-1.5c3.3,0,5.6,1.6,6.7,4.9l9.4,27.8L331,5.3c1.1-3.3,3.3-4.9,6.7-4.9c2.2,0,3.8,0.7,5,2
c1,1.1,1.5,2.5,1.5,4.2v34.3c0,0.8-0.3,1.5-0.8,2c-0.7,0.7-1.7,1.1-3,1.1c-1.3,0-2.4-0.4-3.1-1.2c-0.5-0.5-0.8-1.2-0.7-2L337,9.1
l-10.4,30c-0.3,0.8-0.7,1.5-1.1,2.1c-1,1.2-2.3,1.9-3.9,1.9c-2.5,0-4.2-1.3-5.1-3.9L306.1,9.1z" />
<path d="M362.1,32.3l-3.4,8.8c-0.7,1.9-2,2.9-3.9,2.9c-0.7,0-1.4-0.2-2.2-0.5c-1.3-0.7-2-1.6-2-2.9c0-0.6,0.1-1.3,0.4-2l13.6-33.9
c1.2-3,3.2-4.5,5.8-4.5c2.7,0,4.7,1.5,5.9,4.5L390,38.6c0.3,0.7,0.4,1.4,0.4,2c0,1.2-0.6,2.2-1.9,2.8c-0.8,0.4-1.5,0.6-2.3,0.6
c-1.8,0-3.1-1-3.8-2.9l-3.4-8.8H362.1z M370.5,8.1l-6,17.4h12L370.5,8.1z" />
<path d="M407.6,8h-12.2c-0.5,0-1-0.1-1.4-0.4c-1-0.6-1.5-1.6-1.5-3.1c0-1.2,0.4-2.2,1.1-2.9c0.5-0.5,1.1-0.7,1.8-0.7h32.4
c0.6,0,1.1,0.2,1.6,0.5c0.9,0.7,1.3,1.7,1.3,3c0,1.3-0.4,2.3-1.2,2.9c-0.5,0.4-1,0.6-1.7,0.6h-12.2v32.7c0,1-0.3,1.7-1,2.3
c-0.8,0.7-1.8,1-3,1c-1.7,0-2.9-0.5-3.5-1.6c-0.3-0.5-0.5-1-0.5-1.7V8z" />
<path d="M441.4,6.9h-4.2c-0.6,0-1.2-0.2-1.6-0.6c-0.6-0.6-0.9-1.3-0.9-2.3c0-1.2,0.4-2,1.2-2.5c0.4-0.2,0.8-0.4,1.3-0.4h16.3
c0.6,0,1.2,0.2,1.6,0.6c0.6,0.5,0.9,1.3,0.9,2.3c0,1.2-0.4,2-1.2,2.5c-0.4,0.2-0.8,0.4-1.3,0.4h-4.2v30.6h4.2
c0.6,0,1.2,0.2,1.6,0.6c0.6,0.5,0.9,1.3,0.9,2.3c0,1.2-0.4,2-1.2,2.5c-0.4,0.2-0.8,0.4-1.3,0.4h-16.3c-0.6,0-1.2-0.2-1.6-0.6
c-0.6-0.5-0.9-1.3-0.9-2.3c0-1.2,0.4-2,1.2-2.5c0.4-0.2,0.8-0.4,1.3-0.4h4.2V6.9z" />
<path d="M482.3,0c4.3,0,8.1,1.1,11.3,3.4c3.3,2.3,5.7,5.5,7.2,9.5c1.1,2.8,1.6,5.9,1.6,9.3c0,6-1.6,11.1-4.8,15.1
c-3.8,4.7-8.9,7.1-15.5,7.1c-6.9,0-12.2-2.6-16-7.8c-2.8-3.9-4.2-8.7-4.2-14.4c0-4.3,0.9-8.1,2.6-11.5c2.4-4.9,6.2-8.1,11.2-9.7
C477.7,0.3,479.9,0,482.3,0z M482.2,6.6c-3.4,0-6.2,1.4-8.4,4.1c-2.2,2.9-3.4,6.7-3.4,11.4c0,4.1,0.9,7.5,2.6,10.2
c2.2,3.4,5.2,5.2,9.2,5.2c3.8,0,6.8-1.6,8.9-4.8c1.9-2.8,2.8-6.3,2.8-10.5c0-4.9-1.2-8.7-3.5-11.5C488.3,7.9,485.5,6.6,482.2,6.6z" />
<path d="M538.9,31.7l-0.5-28.3c0-0.8,0.3-1.5,0.8-2c0.8-0.7,1.7-1,3-1c1.4,0,2.4,0.4,3.2,1.3c0.4,0.5,0.7,1.1,0.7,1.8v35.3
c0,1.5-0.4,2.8-1.2,3.7c-0.8,1-2,1.6-3.5,1.6c-2.3,0-4.2-1.2-5.5-3.5L517.9,9.6l0.5,31.3c0,0.9-0.3,1.6-0.9,2.2
c-0.8,0.7-1.7,1-2.9,1c-1.5,0-2.6-0.5-3.3-1.5c-0.3-0.5-0.5-1-0.5-1.6V6c0-2.2,1-3.9,3-5c0.9-0.5,2-0.7,3.1-0.7
c2.7,0,4.8,1.3,6.3,3.9L538.9,31.7z" />
</g>
</svg>
<!-- /SVGタグを差し替えここまで-->
<p>※使用したライブラリ<a href="https://maxwellito.github.io/vivus/" target="_blank">https://maxwellito.github.io/vivus/</a>
</p>
<!--/svganimeblock-->
</div>
<script>//SVGの初期設定
var logoVivus1; //SVG設定
//SVG初期設定
function VivusInit() {
logoVivus1 = new Vivus(
"logo",
{
start: "autostart", //アニメーションの自動再生
duration: 100, //アニメーションの時間。数字が小さくなれば速くなり、大きくなれば遅くなる
type: "scenario", // アニメーションのタイプを設定
pathTimingFunction: Vivus.EASE //動きの加速減速設定
},
function (obj) {
$("#logo").attr("class", "done"); //描画が終わったらdoneというクラスを追加
});
logoVivus1.stop();
}
//スクロールをしたらSVGが出現する設定
function VivusAnime() {
//スクロールをしたら id="logo"が出現する設定
var elemPos = $("#logo").offset().top - 50; //要素より、50px上の位置まで来たら出現
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
logoVivus1.play(1); //描画される速さ。数が大きくなるほど速い
}
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
VivusAnime(); /* SVGアニメーション用の関数を呼ぶ*/
});
// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
VivusInit(); //SVG初期設定
VivusAnime(); /* SVGアニメーション用の関数を呼ぶ*/
});
// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
//# sourceURL=pen.js</script>
</body>
</html>