ローディング
-手書き風ロゴアニメーション-
See the Pen 4-1-6手書き風ロゴアニメーション 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-6.css"> </head> - body内のローディングを表示させたい場所に以下のHTMLを記載します。
<div id="splash"> <div id="splash_logo"> <!-- ベースにするsvgタグを入れる。記述の一部を後程解説する自作のsvgタグと差し替えます。--> <svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="739" height="258.9" viewBox="0 0 739 258.9" style="enable-background:new 0 0 739 258.9;" xml:space="preserve"> <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/text.svg" width="739" height="258.9" mask="url(#clipmask)"></image> <mask id="clipmask" maskUnits="objectBoundingBox"> <path class="st0" d="M124.9,73.4c0,0,57.3-46.5,22.9-66.6c-35.2-20.7-87,8.9-90.1,55.4c-3.1,46.6,48.4,84.2,34.7,130.7 s-59.6,47.3-79.7,39.8c-20.1-7.4-14.9-75.1,5.8-79.5l147.1,10.8c0,0,39.2-11.3,38.4-31.1c-0.8-19.8-4.4-35.8-13-35.7 c-25.3,0.3-45.7,63.3-51.4,95.7c-6,34.8,3,35.9,22.5,29c19.5-6.9,102.7-186.4,133.4-79.5c-20-19.8-51.6-34.7-59.9-0.3 c-8.3,34.4-33.7,68.2-6,68s87-105.9,85.5-98C299.1,153.4,265.3,228,298,221.9c32.7-6.1,74.4-118.2,74.4-118.2 c4.2,56.7,21.2,122.4,0,133.3c-21.2,10.9-51.2,37.6-47.6,9.6c3.6-27.9,126.1-113.8,131.5-118.6c-16.2,48.5-21.8,70.8-0.3,64.9 s46.7-83.1,69.7-71.6c22.9,11.5,27.1,16.3,27.1,16.3s-70.8,32-62.3,72.6s143.6-109.4,151.2-147c7.6-37.7,17.8-50.1-10.8-50.1 c-34.5,0-107.4,268.4-65.2,224c41.9-44.1,140.1-100.1,141.2-124.8c1.1-24.7-11.1-15-25.2-8.5c-14.1,6.5-48.7,31.3-42.3,62.8 s2.8,66.1,26,55.4s73.6-79.8,73.6-79.8"/> <line class="st0" x1="490.5" y1="50.6" x2="459.9" y2="103.6"/> </mask> </svg><!--ベースにするタグここまで--> <!--/splash_logo--></div> <!--/splash--></div> <div id="container"> <p>ローディング後、この画面が見えます。</p> <!--/contaier--></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-6.js"></script> </body>
【SVGタグの作り方】
① Adobe Illustratorを使った作業
→完成データをダウンロード
アウトライン化されたテキストと、テキストを隠すパスの2つをつくります。
パスがvivus.jsで動き、下のテキストが出現する仕組みです。
①-1. テキストを書き、アウトライン化する。
テキストを選択→「書式」→「アウトラインを作成」
①-2. アウトライン化したテキストをSVG形式で「svg」フォルダに保存。（仮に名前をtext.svgとする。）
テキストを右クリック→「選択ファイルを書き出し」→アセットの名前をtextに変更。→書き出し先をHTMLと同じフォルダ内の「svg」フォルダに指定。サブフォルダーを作成のチェックを外す。フォーマット形式はSVG→「アセットを書き出し」
①-3. テキストが書かれたレイヤーに鍵をかけ、その上に新しいレイヤーを作成。
①-4. 新しいレイヤーを選択した状態で、ペンツールを使い、塗りはなし、線のみにしてテキストを上からなぞる。
線の塗りは後から消すのでどんな色でも可。
なるべく一筆書きで書いた方がきれいなアニメーションが実現します。
①-5. テキストが隠れるように線の太さ、線端、角の形状を調整。
※カーブが多いテキストの場合、線の形状を「線端」⇒「丸型線端」「角の形状」⇒「ラウンド結合」にし、
丸みを帯びた形にすると隠れやすくなります。
①-6.線の塗りを無しにして、パスを全選択し、Adobe Dreamweaverなどのエディタソフトに貼り付ける。
エディタソフトに貼り付けるとsvgからはじまるソースコードに変換される。
————
② Adobe Dreamweaverを使った作業
ベースにするサンプルのsvgの赤字部分を自作のsvgファイルの値に差し替える。
<!-- ベースにするsvgタグを入れ、赤字の部分を自作のsvgタグと差し替えます。-->
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="739" height="258.9" viewBox="0 0 739 258.9" style="enable-background:new 0 0 739 258.9;" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/text.svg" width="739" height="258.9" mask="url(#clipmask)"></image>
<mask id="clipmask" maskUnits="objectBoundingBox">
<path class="st0" d="M124.9,73.4c0,0,57.3-46.5,22.9-66.6c-35.2-20.7-87,8.9-90.1,55.4c-3.1,46.6,48.4,84.2,34.7,130.7
s-59.6,47.3-79.7,39.8c-20.1-7.4-14.9-75.1,5.8-79.5l147.1,10.8c0,0,39.2-11.3,38.4-31.1c-0.8-19.8-4.4-35.8-13-35.7
c-25.3,0.3-45.7,63.3-51.4,95.7c-6,34.8,3,35.9,22.5,29c19.5-6.9,102.7-186.4,133.4-79.5c-20-19.8-51.6-34.7-59.9-0.3
c-8.3,34.4-33.7,68.2-6,68s87-105.9,85.5-98C299.1,153.4,265.3,228,298,221.9c32.7-6.1,74.4-118.2,74.4-118.2
c4.2,56.7,21.2,122.4,0,133.3c-21.2,10.9-51.2,37.6-47.6,9.6c3.6-27.9,126.1-113.8,131.5-118.6c-16.2,48.5-21.8,70.8-0.3,64.9
s46.7-83.1,69.7-71.6c22.9,11.5,27.1,16.3,27.1,16.3s-70.8,32-62.3,72.6s143.6-109.4,151.2-147c7.6-37.7,17.8-50.1-10.8-50.1
c-34.5,0-107.4,268.4-65.2,224c41.9-44.1,140.1-100.1,141.2-124.8c1.1-24.7-11.1-15-25.2-8.5c-14.1,6.5-48.7,31.3-42.3,62.8
s2.8,66.1,26,55.4s73.6-79.8,73.6-79.8"/>
<line class="st0" x1="490.5" y1="50.6" x2="459.9" y2="103.6"/>
</mask>
</svg><!--ベースにするタグここまで-->
②-1. ①-1で作成した「アウトライン化したテキスト」のファイル名を「xlink:href=”svg/text.svg“」部分に差し替える。
※サンプルと同じように、svgフォルダ内にtext.svgという名前のファイルを入れている場合はそのままでOK
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/text.svg" width="739" height="258.9" mask="url(#clipmask)"></image>
②-2. ①-6で作成したソースコードの width と height の値を赤字部分に差し替える（8か所）
<svg id="mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="739" height="258.9" viewBox="0 0 739 258.9" style="enable-background:new 0 0 739 258.9;" xml:space="preserve">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/text.svg" width="739" height="258.9" mask="url(#clipmask)"></image>
②-3. <mask>～</mask>の間に ①-6で作成したソースコードの<svg>～</svg>内のソースコードを差し替える
<mask id="clipmask" maskUnits="objectBoundingBox">
<path class="st0" d="M124.9,73.4c0,0,57.3-46.5,22.9-66.6c-35.2-20.7-87,8.9-90.1,55.4c-3.1,46.6,48.4,84.2,34.7,130.7
s-59.6,47.3-79.7,39.8c-20.1-7.4-14.9-75.1,5.8-79.5l147.1,10.8c0,0,39.2-11.3,38.4-31.1c-0.8-19.8-4.4-35.8-13-35.7
c-25.3,0.3-45.7,63.3-51.4,95.7c-6,34.8,3,35.9,22.5,29c19.5-6.9,102.7-186.4,133.4-79.5c-20-19.8-51.6-34.7-59.9-0.3
c-8.3,34.4-33.7,68.2-6,68s87-105.9,85.5-98C299.1,153.4,265.3,228,298,221.9c32.7-6.1,74.4-118.2,74.4-118.2
c4.2,56.7,21.2,122.4,0,133.3c-21.2,10.9-51.2,37.6-47.6,9.6c3.6-27.9,126.1-113.8,131.5-118.6c-16.2,48.5-21.8,70.8-0.3,64.9
s46.7-83.1,69.7-71.6c22.9,11.5,27.1,16.3,27.1,16.3s-70.8,32-62.3,72.6s143.6-109.4,151.2-147c7.6-37.7,17.8-50.1-10.8-50.1
c-34.5,0-107.4,268.4-65.2,224c41.9-44.1,140.1-100.1,141.2-124.8c1.1-24.7-11.1-15-25.2-8.5c-14.1,6.5-48.7,31.3-42.3,62.8
s2.8,66.1,26,55.4s73.6-79.8,73.6-79.8"/>
<line class="st0" x1="490.5" y1="50.6" x2="459.9" y2="103.6"/>
</mask>
②-4．<path>のクラス名を全てclass=”st0″に変更
※<path>や<line>などに直接 styleが指定されていたり、<style>にst0の色指定がされている場合は記述を削除
自作のCSS内の書き方
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定 */
#splash {
/*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#333;
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操作手書き風にするためのCSS ===============*/
#mask .st0{
fill:none;
stroke:#fff;
stroke-width:90;/*線の太さを指定する*/
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray: 1500; /* 線の間隔を指定する */
stroke-dashoffset:1500; /* 線の位置を指定する */
}
自作のJS内の書き方
//SVGアニメーションの描画
var stroke;
stroke = new Vivus('mask', {//アニメーションをするIDの指定
start:'manual',//自動再生をせずスタートをマニュアルに
type: 'scenario-sync',// アニメーションのタイプを設定
duration: 50,//アニメーションの時間設定。数字が小さくなるほど速い
forceRender: false,//パスが更新された場合に再レンダリングさせない
animTimingFunction:Vivus.EASE,//動きの加速減速設定
}
);
$(window).on('load',function(){
$("#splash").delay(1500).fadeOut('slow');//ローディング画面を1.5秒（1500ms）待機してからフェイドアウト
$("#splash_logo").delay(1500).fadeOut('slow');//ロゴを1.5秒（1500ms）待機してからフェイドアウト
stroke.play();//SVGアニメーションの実行
});この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください！
