ロゴアウトラインアニメーション | 動くWebデザインアイディア帳

ローディング
-ロゴアウトラインアニメーション-

デモページを見る

See the Pen 4-1-5ロゴアウトラインアニメーション by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

vivus.js というSVG アニメーションを表示するライブラリを使ってアウトラインのアニメーションを作成する。
jQuery でローディング画面のフェードアウトやアニメーションのタイミングを操作する。

［使用するライブラリ］
＊ jQuery
＊ vivus.js（https://maxwellito.github.io/vivus/）

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/4-1-5.css">
</head>

body内のローディングを表示させたい場所に以下のHTMLを記載します。

<div id="splash">
<div id="splash_logo">
<svg version="1.1" id="mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
www.w3.org/1999/xlink" x="0px" y="0px" width="1856.5px" height="321.8px"
viewBox="0 0 1856.5 321.8" style="enable-background:new 0 0 1856.5 321.8;" xml:
space="preserve">.................. SVGのタグ...............</svg><!--このSVGタグの作り方は下記に記述-->
<!--/splash_logo--></div>
<!--/splash--></div>
<div id="container">
<p>ローディング後、この画面が見えます。</p>
<!--/container--></div>

body終了タグ直前に jQueryとvivus.js、動きを制御する自作のJSの3 つを読み込みます。

<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.4/vivus.min.js"></script>
<script src="js/4-1-5.js"></script>
</body>

【SVGタグの作り方】

HTML内にあるsvg タグは以下の手順で作成します。

Adobe Illustratorで制作したテキストやアイコンをアウトライン化する。
＊テキストの場合（テキストを選択→「書式」→「アウトラインを作成」）
＊パスで書いたアイコンの場合（アイコンを選択→「オブジェクト」→「パス」→「パスのアウトライン」）
テキストエディタを開き、1.で制作したテキストやアイコンを選択してCtrl+Cでコピーする。
テキストエディタにCtrl+Vで貼り付けをすると<svg version=”1.1″….という文字列に変換される。
<svg version=”1.1″ の後に id=”mask”というid名を追記して上記のsvgコード部分と差し替える。

自作のCSS内の書き方

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#eee;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:300px;
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #333;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: #333;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}

自作のJS内の書き方

※アニメーションの時間設定やフェードイン・アウトの時間設定はアニメーションによって適宜変更をしてください。

//SVGアニメーションの描画
var stroke;
stroke = new Vivus('mask', {//アニメーションをするIDの指定
    start:'manual',//自動再生をせずスタートをマニュアルに
    type: 'scenario-sync',// アニメーションのタイプを設定
    duration: 10,//アニメーションの時間設定。数字が小さくなるほど速い
    forceRender: false,//パスが更新された場合に再レンダリングさせない
    animTimingFunction:Vivus.EASE,//動きの加速減速設定
},
function(){
       $("#mask").attr("class", "done");//描画が終わったらdoneというクラスを追加
}
);

$(window).on('load',function(){
  $("#splash").delay(3000).fadeOut('slow');//ローディング画面を3秒（3000ms）待機してからフェイドアウト
	$("#splash_logo").delay(3000).fadeOut('slow');//ロゴを3秒（3000ms）待機してからフェイドアウト
        stroke.play();//SVGアニメーションの実行
});