表題の通り本記事は『花咲かじいさん』に関する技術ブログです
AI (artificial intelligence さん)に聞いてみると
『親切な老夫婦と欲張りな隣人夫婦が不思議な力を持つ犬のシロを介して幸運と不幸に見舞われる教訓的な日本昔話』だそうです
人・物を思いやる心は大事！欲張ることは不幸を招く！という勧善懲悪の教訓を伝えている童話ですが仕事やSEO の上でも相通じるものがありそうですね٩(๑❛ᴗ❛๑)۶
では早速『親切な老夫婦』の生い立ちから掘り下げたいと思いま・・・・・・・
私の過去記事を見返してみると結構な割合で【svg】関係の記事があります
元々【html・css】を1行も書けなかったのに『Flash が好き！』という理由だけでこの業界に入ったので動くモノには目がない・ベクターデータ最高！ということもありますが昔から存在していて高性能な技術でありながら軽視されているような気がして…コツコツと布教活動をしているからですw
とても奥が深く幅が広く様々な表現方法が可能になるモノなのですが…如何せん私が愛した『Flash』が某巨大企業CEO の発言をキッカケに絶滅へ追いやられてからは『javascriptライブラリ』などの台頭により手軽に動的パーツ・インタラクティブサイトが作れるようになったおかげもあり益々影が薄くなった印象です…
まぁもちろん流行り廃りに左右されやすい業界ということもありますね
※あくまでも個人的意見だらけです
まず手始めに【svg+textPath+animate】を使用して🌳を植えます
【css】を覗いていただければ分かりますが『動き』に関する記述はありません
もちろん【javascript】の記述もありません
このウネウネとした少しだけワクワクする『動き』自体は【html】のみで完結しています…というか【svg】だけで完結しているというのが正しいですね(｀･ω･´)ｼｬｷｰﾝ
更にこのウネウネはただの『線』ではなく🌳の質感(ゴツゴツした感じ)を出すために『文字』で作られています (超拡大するかソースを読み解いてみてください)…何か気の利いた文章でも書こうと思ったのですが結構な文章量になることと元々壊滅的に私に文才がないこともあり、なんとなく敗北感はありますが一番手近にある【css】を記述しました
まぁそのせいでソースを読む際に軽～く混乱するというお粗末さです( ꒪⌓꒪)
技術的にはとてもシンプルです
【svg】にて書いたパスに沿ってテキストをアニメーションさせるってだけです
実際に使用している下記ソースでサラっと解説します
div(class='🌳')
svg(viewBox=`0 0 960 860`)
path(id=`branch01` d=`M 231 527 C 231 527 221 491 176 486 C 131 481 -5 490 -5 490 `)
text
textPath(xlink:href=`#branch01` startOffset='500px') ここに表示させるテキストを入力
animate(attributeName=`startOffset` from=`500px` to=`0px` dur=`4s` begin=`2s` fill=`freeze`)まず世の中のマークアッパーの多くが【svg】を使用するのは画像表示の代替として【グラフィック表示】する時かなって思います…企業ロゴだったりアイコン・ピクトグラムだったりを表示することがメインになっている気がします
画像を使用するよりもメリットが多いのが理由ですね…下記過去記事参照
『アイコン色をフワっと可変させる件＠svg-css:hover』
ようするにマークアップを生業としている方々でも『svg自体どのようなことが出来るの？』って感じている方が絶対数いる気がするのでそれなりに詳細解説していきます
解説は上記の通りです
ポイントとなるのは 6行目の【animate】ですね！
【css・javascript】を記述することなく独自でアニメーション設定をすることが出来るのが【svg】の大きな特徴・優れているところです！
今回は【startOffset】の値を可変させることでテキストを動かしているだけですが【attributeName】の指定次第でイロイロな要素をアニメーションすることが可能です
とても面白いので是非とも svgの沼にハマってみてください！
上記を同僚に見ていただいたところ『ドラマチック性がないっ！』とダメ出しを受けたので…安直ではありますが【css+animation】を使用して🌸を咲かせてみました
まず🌳を植えるではなく🌳が生える 感を出すために幹・枝の動きを逆にしました…個人的にはとっても生えた感が出たように感じます
続いて🌸を咲かせるワケですが
まず花びらをどうやって表示するか問題ですが当初は『svgに関する記事なのだから当然 svgでしょ！』と思っていたのですが拡張性・コントロール性・ソース自体の可読性などなどを考慮した結果…絵文字をチョイスしましたw
決して手抜きではありません…熟考した結果です٩(๑❛ᴗ❛๑)۶
まず【html】は見ての通りですね
前述・宣言した通り絵文字の『🌸』を350個ほどズラズラ～っと表示させているだけです
ul(class='🌸')
- for (var x = 0; x < 350; x++)
li 🌸最終的に使用した【css】に関しては下記の通りです(該当部分のみ)
まず🌸を表示させる位置を設定します
当初は幹・枝を絵画した【svg】のパスに【textPath:xlink:href】を使って【startOffset】にて位置調整をする想定でした
※1つのsvg パスに対して複数のテキスト表示設定できます
ですが…この方法だと🌸が綺麗に並びすぎて物凄く不自然なモノになりました＞＜
それで熟考に熟考を重ねた結果…1つ1つの🌸全てを【position:absolute】で浮揚要素にして絶対位置指定する…というクラシカルかつ工数肥大な方法に…そう350個分全部コツコツと( ꒪⌓꒪)
.🌸{
list-style:none;
li{
position:absolute;
opacity:0;
text-shadow:1px 1px 12px #fff;
&:nth-child(1){ // 本来は350個指定してます
top:106px;
left:312px;
}
@for $i from 0 to 350{
&:nth-child(#{$i + 1}){
font-size:#{($i * .05) + 16}px;
transform:rotate(#{$i * 3}deg);
animation:🌸 3s ease #{($i * .05) + 11}s forwards;
}
}
}
}
@keyframes 🌸{
0%{opacity:0}
100%{opacity:.6}
}解説は上記の通りです
強烈に時間はかかりましたが大したことはしていませんねw
いかがでしょうか
あまり世に広まっていない気がする【svg+animate】ですがアイディア次第でかなり広範囲に使える面白い技術だと思います
ん？逆かしら…面白い技術だから良いアイディアが生まれる可能性があるのか…
まぁ兎にも角にも動きだったり見た目的なインパクトは結構あるのでイロイロと使えるはずです
で…本来ならこの辺りで技術的なことではなく精神論的なことをズラズラと書くところですが…
🌳は🌸が咲いたら終わりでしょうか…いえ
散りぬべき 時知りてこそ 世の中の 花も花なれ 人も人なれ
🌸は散ってこそ儚く美しいのでは？
ってことで次回は今回咲かせた🌸を見事散らせてみせましょう٩(๑❛ᴗ❛๑)۶
