とにかく見て！
これっ
コレをやりたい！
いやまぁちょっと急ぎつくったので ちゃっちいですがね...ｗ
文字が書き順に表示されるやりかた...
しかしなかなかできない。
参考にしたページはこちら！
SHIDEN DESIGN BLOG さんのページ (ただし何故かパーミッションかけられてしまいました...)
及び
Qiitaの@AsukaOkochi さんのページ
双方ともとても簡単にちゃちゃっとやっている感じ...
コレなら僕にもできる！
なんて制作に突入！！
おおはまり...
二日時間を費やしたｗ
ということで備忘録として重要な点を再度まとめてみました。
内容はほぼ同じ
要はマスクをかけてそれを書き順に透明化していくだけ？動かしているだけ？
消しているだけ？？
まぁそんなものです。
要はAdobeのAfterEffectsがあれば簡単にできる作業なのですが
そんなバカ高いソフト持ってるわけ無い！
ということで苦肉の策で今回はこちら...
準備
画像
Adobe illustrator コレは何とか準備してくれ
知識
基本的コードの書き方は知っておいたほうが良い
僕はSVGでのコードの書き方とかまったく知らなかったので
苦戦しました。
DrawSVGの設定する位置とかね。
ココで僕はループ状態に陥りました。
では始めましょう
多分既出の参考ブログ双方とかぶっているところがあるかも知れませんが
ご容赦...
画像の用意
イラレでの加工
私のillustratorは9.0というめちゃ古いヴァージョンです。
しかし充分にできました。
とにかく画像の文字の上にマスクをかけていきます。
1.まずはpng形式で背景を透明な状態で画像を保存。
2.それをイラレに配置しロックをかけます。
3.ペンツールを利用しマスクをかけます。
詳しくは
Qiitaの@AsukaOkochi さんのページを参照！
まずはレイヤーをつくりその上にマスクをかけます。
注意）書き順に合わせてペンツールでマスクをかけるという点。
間違えると間違えたとおりに描いてくれますｗ
4.そしてSVG形式で保存をかけるのですが...
ココでの注意点としてオプションを以下のように設定してください。
フォントのサブセット → なし
埋め込まれたフォントの位置 → サブセットフォントへのリンク
ラスター画像の位置 → ラスター画像へのリンク
小数点の位置 → 3
エンコーディング → UTF-8
CSSプロパティの位置 → スタイル属性(エンティティ参照)
5.するとこんな感じのファイルができているはずです。
右クリックでメモ帳で開いてみましょう...
するとこんな感じのコードができているはずです。
SVGのソースコード
折りたたむ
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 9.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd" [
<!ENTITY st0 "filter:url(#SVG_InvertMaskFilter);">
<!ENTITY st1 "fill-rule:nonzero;clip-rule:nonzero;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:4;">
<!ENTITY st2 "fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;">
<!ENTITY st3 "filter:url(#SVG_MaskFilter);">
<!ENTITY st4 "stroke:none;">
]>
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<defs>
<filter id="SVG_InvertMaskFilter" filterUnits="objectBoundingBox" >
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
</defs>
<defs>
<filter id="SVG_MaskFilter" filterUnits="objectBoundingBox" >
<feColorMatrix type="luminanceToAlpha"/>
</filter>
</defs>
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_1" style="&st1;">
<mask x="0" y="9.374" width="130.9995" height="170" id="aimsk1">
<g style="&st3;">
<path style="&st4;" d="M0,9.374v170h131v-170z"/>
<g>
<mask x="0" y="9.374" width="130.9995" height="170" id="aimsk2">
<g>
<path style="&st4;" d="M0,9.374v170h131v-170z"/>
<g>
</g>
</g>
</mask>
<image style="mask:url(#aimsk2);" width="131" height="170" xlink:href="7C0D8353.jpg" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
</g>
</mask>
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-5.207,59.997,10.498"/>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</g>
</svg>
このソースコードはまぁ簡単にいうと...
<svg以下が本体で...
<filter id="SVG_InvertMaskFilter"
<filter id="SVG_MaskFilter"
で二つのフィルターがあるよっていってて
<mask x="0" y="9.374" width="130.9995" height="170" id="aimsk1">
が一つ目のレイヤー
<mask x="0" y="9.374" width="130.9995" height="170" id="aimsk2">
が二つ目のレイヤーをあらわしていて
一つ目のレイヤーが二つ目のレイヤーを内服している(入れ子構造)になっているよ
とここで表現してて
<image width="131" height="170" xlink:href="梵字２.png"
transform="matrix(1 0 0 1 0 9.374)"/>
ココの部分で画像を指定。
<g id="_x0083__x008C__x0083_C_x0083__x0084__
x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-
rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;
stroke-linejoin:round;stroke-miterlimit:4;">
これ以下に実際のマスクの書き順が記載されている構造です。
6.DrowSVGをダウンロード
コチラのページから Download(ZIP) をクリックしてZIPファイルをダウンロードして
任意の位置に解凍してください。
必要なファイルはpublicフォルダ内のjquery.drawsvg.min.jsファイル。
このDrowSVGだけでできないのかね～？
ちょっとわからないです。
続いて
コチラをダウンロード
7.jQuery 3.3.1をダウンロード
ダウンロードはDownload the compressed, production jQuery （バージョン）を右クリックで名前をつけてリンク先を保存でいいです。
先ほどのDrowSVGと同じ場所に解凍してください。
jquery-3.3.1.min.jsなるファイルができてるはずです。
8.htmlファイルの作成。
今回はためしなのでローカルで動くよう設定します。
まずはindex.htmlファイルを作成しましょう。
凄く簡単なものでいいです。
index.htmlソースコード
折りたたむ
<html>
<head>
<title>私のページ</title>
</head>
<body>
hello!world
</body>
</html>
こんな感じ...
コレをindex.htmlで保存します。
9.用意した材料を一つのファイルにまとめましょう。
するとこんな感じになるはずです。
画像のpngファイル
svgファイル
jquery-3.3.1.min.js
jquery.drawsvg.min.js
index.html
コレで必要なファイルは全て揃いました。
ソースの加工
1.svgファイルをコネコネ加工します。
先ほどのSVGコード、この中で必要なのは
黒い太字の箇所のみ！
簡単にいうと、必要な部分はこのファイルがsvgであってその設定がこうである
という部分と、画像の指定部分と書き順の部分だけということです。
それ以外は削除しちゃいましょう。
必要なSVGのソースコードを見る
折りたたむ
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 9.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd" [
<!ENTITY st0 "filter:url(#SVG_InvertMaskFilter);">
<!ENTITY st1 "fill-rule:nonzero;clip-rule:nonzero;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:4;">
<!ENTITY st2 "fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;">
<!ENTITY st3 "filter:url(#SVG_MaskFilter);">
<!ENTITY st4 "stroke:none;">
]>
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<defs>
<filter id="SVG_InvertMaskFilter" filterUnits="objectBoundingBox" >
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
</defs>
<defs>
<filter id="SVG_MaskFilter" filterUnits="objectBoundingBox" >
<feColorMatrix type="luminanceToAlpha"/>
</filter>
</defs>
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_1" style="&st1;">
<mask x="0" y="9.374" width="130.9995" height="170" id="aimsk1">
<g style="&st3;">
<path style="&st4;" d="M0,9.374v170h131v-170z"/>
<g>
<mask x="0" y="9.374" width="130.9995" height="170" id="aimsk2">
<g>
<path style="&st4;" d="M0,9.374v170h131v-170z"/>
<g>
</g>
</g>
</mask>
<image style="mask:url(#aimsk2);" width="131" height="170" xlink:href="7C0D8353.jpg" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
</g>
</mask>
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-5.207,59.997,10.498"/>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</g>
</svg>
必要な部分だけ抽出するとこうなります。
必要なSVGのみ抽出
折りたたむ
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-5.207,59.997,10.498"/>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</g>
</svg>
2.マスクの名前と色設定。
マスクの名前及び色を設定します。
こんな感じ...
<g mask="url(#masking)" fill="#ffffff">
名前はmaskingにしています。そして色は白なので#ffffffです。
それを<svgの直下に配置します。
名前と色の配置場所確認
折りたたむ
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<g mask="url(#masking)" fill="#ffffff">
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-5.207,59.997,10.498"/>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</g>
</svg>
3.マスクIDを明確化
マスクは設定されましたがこのままではどれがマスクだかわかりません。
なのでマスクを設定します。
<mask id="masking" maskUnits="objectBoundingBox">
mask idは先ほど指定したmaskingを使います。
そしてmaskUnitsはobjectBoundingBoxと指定してください。
配置場所は書き順が記載されている箇所の前。
<g id="_x0083__x008C__x0～
の前になります。
コレだけではダメですよね。
当然そのmaskが適応できる範囲を括ってあげなければなりません。
ナノで範囲の末尾に
</mask>
といれなければなりません。
それは書き順の範囲の末ということになります。
マスクID設置場所の確認
折りたたむ
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<g mask="url(#masking)" fill="#ffffff">
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<mask id="masking" maskUnits="objectBoundingBox">
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-5.207,59.997,10.498"/>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</g>
</mask>
</svg>
注意）もし最初の一行しか文字が表示されなかったら
/が抜けている可能性があります。
<path d="M44.898,11.389l20.998,17.999"
/>←この
赤色のところ
この場合は/を付け足してもらうか</path>を各行の最後に付け足してもいいです。
<path d="M44.898,11.389l20.998,17.999"></path>こんな感じ。
index.htmlへの配置
さてここまでできましたらいよいよindex.htmlへの配置に写ります。
1.先ほどのsvgファイルを全てコピーし、index.htmlのbodyに配置します。
その際、hello worldの文字は必要ないので消しちゃってください。
配置場所
折りたたむ
<html>
<head>
<title>私のページ</title>
</head>
<body>
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<g mask="url(#masking)" fill="#ffffff">
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<mask id="masking" maskUnits="objectBoundingBox">
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-
rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-
5.207,59.997,10.498"></path>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</mask>
</svg>
</body>
</html>
2.各スクリプトの配置。
続いて先ほど色々ダウンロードして保存したファイルを配置しておきます。
配置場所はheadの箇所です。
<title>私のページ</title>
はあってもなくてもいいですがとりあえず残しておきました。
スクリプトの配置場所
折りたたむ
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.drawsvg.min.js"></script>
<title>私のページ</title>
</head>
<body>
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<g mask="url(#masking)" fill="#ffffff">
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<mask id="masking" maskUnits="objectBoundingBox">
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-
rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-
5.207,59.997,10.498"></path>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</mask>
</svg>
</body>
</html>
注意）スクリプトは読み込む順番が重要で、順番によっては動作が変になります。
順番を間違えないよう上記のように配置してください。
3.スクリプトタイプの指定となんだかわからんけど色々設定みたいな項目。
まぁ笑 なんだかわからんけどコレをいれてくださいな。
無いと動きませんｗ
<script type="text/javascript">
jQuery(document).ready(function(){
var $svg = $('svg').drawsvg({
duration: 200,
easing: 'linear'
});
$svg.drawsvg('animate');
});
</script>
スクリプトなので入れる場所はheadです。
スクリプトの配置場所
折りたたむ
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.drawsvg.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var $svg = $('svg').drawsvg({
duration: 200,
easing: 'linear'
});
$svg.drawsvg('animate');
});
</script>
<title>私のページ</title>
</head>
<body>
<svg width="131pt" height="187.845pt" viewBox="0 0 131 187.845" xml:space="preserve">
<g mask="url(#masking)" fill="#ffffff">
<image width="131" height="170" xlink:href="梵字２.png" transform="matrix(1 0 0 1 0 9.374)"/>
</g>
<mask id="masking" maskUnits="objectBoundingBox">
<g id="_x0083__x008C__x0083_C_x0083__x0084__x0081__x005B__x0020_2" style="fill-rule:nonzero;clip-
rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:30;stroke-linejoin:round;stroke-miterlimit:4;">
<path d="M76.762,62.849c0,0-29.489,13.745-54.988,12.245c0,0,85.495,29.999-6,62.997c0,0,32.489-
5.207,59.997,10.498"></path>
<path d="M108.567,59.813L87.77,54.095c0,0-9,67.497,0,104.994l34.499,15"/>
<path d="M19.355,34.466c0,0,30.917,37.628,66.916-5.87"/>
<path d="M44.898,11.389l20.998,17.999"/>
</mask>
</svg>
</body>
</html>
と...これで完成！
後は保存して不要なファイル カスとなったsvgファイルを削除すればそれで完了。
index.htmlをクリックしてみてください。
動作しているはずです！
さてコレはあくまでもウエッブでのスタイリッシュなデザインを提供するためのもの...
なのになんでローカルで...？
と思われるかもしれませんが...
この機能、adobeのエフェクトソフトなら簡単にできるのですが
一般の動画編集ソフトではなかなか難しい機能なのです。
文字を書き順に表示するなどは難しいといわざるを得ない。
ということでhtmlで代替し、それを動画キャプチャして
動画ソフトで扱おうと試みたちゃちなやり方なのですｗ
まぁ良かったら利用してみてください。
ウエップでのデザインとしても利用できると思うので楽しんでくれたら幸いです。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/01b8125d.d46be1da.040b6f01.a8934898/?me_id=1213310&item_id=16351368&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F3911%2F9784048913911.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F3911%2F9784048913911.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/15c38c72.08b1639a.15c38c73.623b5cff/?me_id=1214009&item_id=11738453&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fwebby%2Fcabinet%2Fbook%2Fb0404%2F33171050.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fwebby%2Fcabinet%2Fbook%2Fb0404%2F33171050.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/01b8125d.d46be1da.040b6f01.a8934898/?me_id=1213310&item_id=17151545&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1937%2F9781617291937.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F1937%2F9781617291937.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/175f1e13.23bcbcda.175f1e14.aa04c770/?me_id=1332644&item_id=10000010&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fcomponentsource%2Fcabinet%2Fbackup_dvd%2Finputman.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fcomponentsource%2Fcabinet%2Fbackup_dvd%2Finputman.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
0 件のコメント:
コメントを投稿