見出し画像

【WEB界隈のポートフォリオ】 サラリーマン投資家の、FIREへの旅路 第72夜

本日は、投資のポートフォリオではなく、WEB制作のポートフォリオのお話

ただいま、製作中のやつでございます!

【ポートフォリオ】

スクリーンショット 2021-06-10 22.10.31

こんな感じの超シンプルなメインヴィジュアルでございます。

この「S.A.P. design」ていう文字は、SVGファイルです。


【手書き文字をアニメーションさせる】

SVGファイルは、画像をコード化したものという理解でいいと思います!

この「S.A.P. design」のコードがこちら(長っ!!!横スクロールできる)

<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 108.52 64.44" style=""><defs>
<style>.cls-1{fill:none;stroke:#4682b4;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2"><g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1"><g id="ã¬ã¤ã¤ã¼_1-3" data-name="ã¬ã¤ã¤ã¼ 1"><path class="cls-1 acZyCSQq_0" d="M10.59,11.42c-.15-3.77-9.47,3.6-8.13,5.74,1,1.51,10.36,1.37,8.82,4.79-.68,1.51-3,2.54-4.38,3.11-.79.33-2.91,1.07-2.56.29"></path><path class="cls-1 acZyCSQq_1" d="M16.83,20.72l.36-.1"></path><path class="cls-1 acZyCSQq_2" d="M21.87,20.43c-1.15.63,1.05-4.36,1.35-5.19.85-2.33,1.58-4.71,2.57-7C26,7.88,27,5,28.07,5.41c2.95,1.23,1.59,10.89,3,13.47"></path><path class="cls-1 acZyCSQq_3" d="M25.13,14.8c2.09-1.15.85-.45,3.68-2.17"></path><path class="cls-1 acZyCSQq_4" d="M36,16.85c.53-.13.32,0,.64-.21"></path><path class="cls-1 acZyCSQq_5" d="M43.87,3.5c-1,3.57-.66,10.36.45,13.75"></path><path class="cls-1 acZyCSQq_6" d="M44.9,3.92C47.58-2,59.69,1.85,49.59,8.87a7.23,7.23,0,0,1-4.17,1.36"></path><path class="cls-1 acZyCSQq_7" d="M55.06,12.61h.19"></path><path class="cls-1 acZyCSQq_8" d="M29.48,36.56c-3.11-4.57-9.06,6.25-5.12,7.55C27.45,45.13,31,34,31.59,31.8c.26-1.07.6-3.24.6-3.24a39.38,39.38,0,0,0-1.12,4c-.55,3-1.89,8.11.33,10.73"></path><path class="cls-1 acZyCSQq_9" d="M37.16,35.8C35,37,43.8,35.21,41.51,32.05c-3.46-4.77-10.19,14.26-.52,7.82a13.65,13.65,0,0,0,1.51-1.34"></path><path class="cls-1 acZyCSQq_10" d="M52.68,29c.62-3-3.59.25-3.67,2.35,0,.22.23.38.39.53,1.34,1.24,6.77,3.21,2.49,5a5.2,5.2,0,0,1-2.82.47"></path>
<path class="cls-1 acZyCSQq_11" d="M59.75,26.65c.77,0-.65,7.24-.75,8.84"></path><path class="cls-1 acZyCSQq_12" d="M60,22.42a1.44,1.44,0,0,1,.64-.12"></path><path class="cls-1 acZyCSQq_13" d="M71.09,25.56c-.17-4.42-8.32,5.43-4.87,7,2.57,1.16,5.69-4.07,6.67-5.49.34-.49,1.16-1.8.58-1.68-1,.22-2.15,4.26-2.38,4.78-1.12,2.47-6.72,20.55-12,16.26-1.51-1.21,2.89-5.8,3.6-6.47,3.18-3,6.91-5.12,10.73-7.22"></path>
<path class="cls-1 acZyCSQq_14" d="M79.4,24.41c6.43-7-.26,9.28-1.84,9.34s1.42-2.5,2.25-3.67c.66-.94,2.4-3.95,4-4s-.48,4.54,1.1,4.73c1.24.14,4.24-2.42,3.53-3.72"></path><path class="cls-1 acZyCSQq_15" d="M1,36c7.9-4.94,18.22-7.18,27-10,11-3.51,22-6.73,33.12-9.85"></path><path class="cls-1 acZyCSQq_16" d="M10.07,63.44c13.82-9,30.06-13.78,45.2-20"></path><path class="cls-1 acZyCSQq_17" d="M72.44,41.06c2.71-1.69,8.85-3.34,11.12-4.11,7.91-2.68,15.94-4.73,24-7"></path></g></g></g>
<style data-made-with="vivus-instant">.acZyCSQq_0{stroke-dasharray:32 34;stroke-dashoffset:33;animation:acZyCSQq_draw 234ms linear 0ms forwards;}.acZyCSQq_1{stroke-dasharray:1 3;stroke-dashoffset:2;animation:acZyCSQq_draw 14ms linear 234ms forwards;}.acZyCSQq_2{stroke-dasharray:32 34;stroke-dashoffset:33;animation:acZyCSQq_draw 234ms linear 248ms forwards;}.acZyCSQq_3{stroke-dasharray:5 7;stroke-dashoffset:6;animation:acZyCSQq_draw 42ms linear 482ms forwards;}.acZyCSQq_4{stroke-dasharray:1 3;stroke-dashoffset:2;animation:acZyCSQq_draw 14ms linear 525ms forwards;}.acZyCSQq_5{stroke-dasharray:14 16;stroke-dashoffset:15;animation:acZyCSQq_draw 106ms linear 539ms forwards;}.acZyCSQq_6{stroke-dasharray:23 25;stroke-dashoffset:24;animation:acZyCSQq_draw 170ms linear 646ms forwards;}.acZyCSQq_7{stroke-dasharray:1 3;stroke-dashoffset:2;animation:acZyCSQq_draw 14ms linear 816ms forwards;}.acZyCSQq_8{stroke-dasharray:48 50;stroke-dashoffset:49;animation:acZyCSQq_draw 347ms linear 830ms forwards;}.acZyCSQq_9{stroke-dasharray:28 30;stroke-dashoffset:29;animation:acZyCSQq_draw 205ms linear 1178ms forwards;}.acZyCSQq_10{stroke-dasharray:19 21;stroke-dashoffset:20;animation:acZyCSQq_draw 141ms linear 1384ms forwards;}.acZyCSQq_11{stroke-dasharray:9 11;stroke-dashoffset:10;animation:acZyCSQq_draw 70ms linear 1526ms forwards;}.acZyCSQq_12{stroke-dasharray:1 3;stroke-dashoffset:2;animation:acZyCSQq_draw 14ms linear 1597ms forwards;}.acZyCSQq_13{stroke-dasharray:72 74;stroke-dashoffset:73;animation:acZyCSQq_draw 518ms linear 1611ms forwards;}.acZyCSQq_14{stroke-dasharray:38 40;stroke-dashoffset:39;animation:acZyCSQq_draw 276ms linear 2129ms forwards;}.acZyCSQq_15{stroke-dasharray:64 66;stroke-dashoffset:65;animation:acZyCSQq_draw 461ms linear 2406ms forwards;}.acZyCSQq_16{stroke-dasharray:50 52;stroke-dashoffset:51;animation:acZyCSQq_draw 362ms linear 2868ms forwards;}.acZyCSQq_17{stroke-dasharray:37 39;stroke-dashoffset:38;animation:acZyCSQq_draw 269ms linear 3230ms forwards;}@keyframes acZyCSQq_draw{100%{stroke-dashoffset:0;}}@keyframes acZyCSQq_fade{0%{stroke-opacity:1;}94.8051948051948%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>

見ても意味はわかりません!何をいうてんねん!

とにかく、こんな風に動く


これ結構、嬉しい(笑)


【手書き文字をSVGに】 Vectornater

さっきの、SVGアニメは、iPadVectornaterっていうアプリを使って

Apple Pencilを使って、「S.A.P. design」と自分で描きました。

保存するときにファイル形式をSVGにします。


【SVGに動きをつける】 Vivus Instant

そして、Vivus Instant ていうWEBサービスを使って

超簡単にアニメーション化します!

▷ vivus-instant:svgデータをドラッグアンドドロップするだけでラインアニメーション化してくれるサービス

そのラインアニメーション化したコードが、先程のコードです。

要するに、SVG画像を、アニメーションさせるための、

CSSを勝手に書いてくれるサービスです!

ありがたいですな〜


【htmlファイルに貼り付け】

アニメーションをつけたSVGのコードをhtmlに貼り付けます!

これだけでの動くのですが、あまりにもコードが長いので、

整理します。

さっきのながーいコードは、

実は、

それぞれの線の座標(数字)が書かれている部分

②その線の特徴(CSS)が書かれている部分に分けられます。


htmlには、①それぞれの線の座標(数字)が書かれている部分

を貼り付けます。それがこちら! (意味わからんよね!!)

<svg>  ・・・・・ </svg> の中身がそれね!

<!--index.html---------------------------------------------->


<main>
 <div class="main-visual">
   <img src="img/main-visual.jpg" alt="main-visual">
    
           <svg class="sap-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.52 64.44" ><defs></defs>
             <g id="ã¬ã¤ã¤ã¼_2" data-name="ã¬ã¤ã¤ã¼ 2">
             <g id="ã¬ã¤ã¤ã¼_1-2" data-name="ã¬ã¤ã¤ã¼ 1">
             <g id="ã¬ã¤ã¤ã¼_1-3" data-name="ã¬ã¤ã¤ã¼ 1">
               <path class="cls-1 acZyCSQq_0" d="M10.59,11.42c-.15-3.77-9.47,3.6-8.13,5.74,1,1.51,10.36,1.37,8.82,4.79-.68,1.51-3,2.54-4.38,3.11-.79.33-2.91,1.07-2.56.29"></path>
               <path class="cls-1 acZyCSQq_1" d="M16.83,20.72l.36-.1"></path>
               <path class="cls-1 acZyCSQq_2" d="M21.87,20.43c-1.15.63,1.05-4.36,1.35-5.19.85-2.33,1.58-4.71,2.57-7C26,7.88,27,5,28.07,5.41c2.95,1.23,1.59,10.89,3,13.47"></path>
               <path class="cls-1 acZyCSQq_3" d="M25.13,14.8c2.09-1.15.85-.45,3.68-2.17"></path><path class="cls-1 acZyCSQq_4" d="M36,16.85c.53-.13.32,0,.64-.21"></path>
               <path class="cls-1 acZyCSQq_5" d="M43.87,3.5c-1,3.57-.66,10.36.45,13.75"></path>
               <path class="cls-1 acZyCSQq_6" d="M44.9,3.92C47.58-2,59.69,1.85,49.59,8.87a7.23,7.23,0,0,1-4.17,1.36"></path>
               <path class="cls-1 acZyCSQq_7" d="M55.06,12.61h.19"></path>
               <path class="cls-1 acZyCSQq_8" d="M29.48,36.56c-3.11-4.57-9.06,6.25-5.12,7.55C27.45,45.13,31,34,31.59,31.8c.26-1.07.6-3.24.6-3.24a39.38,39.38,0,0,0-1.12,4c-.55,3-1.89,8.11.33,10.73"></path>
               <path class="cls-1 acZyCSQq_9" d="M37.16,35.8C35,37,43.8,35.21,41.51,32.05c-3.46-4.77-10.19,14.26-.52,7.82a13.65,13.65,0,0,0,1.51-1.34"></path>
               <path class="cls-1 acZyCSQq_10" d="M52.68,29c.62-3-3.59.25-3.67,2.35,0,.22.23.38.39.53,1.34,1.24,6.77,3.21,2.49,5a5.2,5.2,0,0,1-2.82.47"></path>
               <path class="cls-1 acZyCSQq_11" d="M59.75,26.65c.77,0-.65,7.24-.75,8.84"></path>
               <path class="cls-1 acZyCSQq_12" d="M60,22.42a1.44,1.44,0,0,1,.64-.12"></path>
               <path class="cls-1 acZyCSQq_13" d="M71.09,25.56c-.17-4.42-8.32,5.43-4.87,7,2.57,1.16,5.69-4.07,6.67-5.49.34-.49,1.16-1.8.58-1.68-1,.22-2.15,4.26-2.38,4.78-1.12,2.47-6.72,20.55-12,16.26-1.51-1.21,2.89-5.8,3.6-6.47,3.18-3,6.91-5.12,10.73-7.22"></path>
               <path class="cls-1 acZyCSQq_14" d="M79.4,24.41c6.43-7-.26,9.28-1.84,9.34s1.42-2.5,2.25-3.67c.66-.94,2.4-3.95,4-4s-.48,4.54,1.1,4.73c1.24.14,4.24-2.42,3.53-3.72"></path>
               <path class="cls-1 acZyCSQq_15" d="M1,36c7.9-4.94,18.22-7.18,27-10,11-3.51,22-6.73,33.12-9.85"></path>
               <path class="cls-1 acZyCSQq_16" d="M10.07,63.44c13.82-9,30.06-13.78,45.2-20"></path>
               <path class="cls-1 acZyCSQq_17" d="M72.44,41.06c2.71-1.69,8.85-3.34,11.12-4.11,7.91-2.68,15.94-4.73,24-7"></path>
            </g></g></g>
          </svg>
 </div>

</main>

この、

<path class ="cls-1  acZyCSQq_0" d=・・・・・></path>

の部分が、一本一本の線を意味しているわけですな!

「S.A.P. design」は、アンダーラインを含めると、17画です。

線が途切れたら、1画なので、アンダーラインは3画です。


【CSSに貼り付け】

SCSSで書いているの、使ってない人にはわかりにくいかもです。

申し訳ない!

②その線の特徴(CSS)が書かれている部分を貼り付け

それは、この部分

アニメーション化されたコードの<style>・・・・</style>のコードを

切り取って、CSSに貼り付けて、

見やすく、改行をつけるとこうなる!

/*style.scss ---------------------------------------------*/



    main{
     width: 100%;
     padding-top: 2%;
     position: relative;

     .main-visual{


         .sap-svg{
           width: 60%;
           position: absolute;
           top: 15%;
           left22%;
 
         }


         .cls-1{fill:none;stroke:#3393ca;
                 stroke-linecap:round;
                 stroke-linejoin:round;
                 stroke-width:2px;
               }


         .acZyCSQq_0{
           stroke-dasharray:32 34;
           stroke-dashoffset:33;
           animation:acZyCSQq_draw 234ms linear 1000ms forwards;
         }
         .acZyCSQq_1{
           stroke-dasharray:1 3;
           stroke-dashoffset:2;
           animation:acZyCSQq_draw 14ms linear 1234ms forwards;
         }
         .acZyCSQq_2{
           stroke-dasharray:32 34;
           stroke-dashoffset:33;
           animation:acZyCSQq_draw 234ms linear 1248ms forwards;
         }
         .acZyCSQq_3{
           stroke-dasharray:5 7;
           stroke-dashoffset:6;
           animation:acZyCSQq_draw 42ms linear 1482ms forwards;
         }
         .acZyCSQq_4{
           stroke-dasharray:1 3;
           stroke-dashoffset:2;
           animation:acZyCSQq_draw 14ms linear 1525ms forwards;
         }
         .acZyCSQq_5{
           stroke-dasharray:14 16;
           stroke-dashoffset:15;
           animation:acZyCSQq_draw 106ms linear 1539ms forwards;
         }
         .acZyCSQq_6{
           stroke-dasharray:23 25;
           stroke-dashoffset:24;
           animation:acZyCSQq_draw 170ms linear 1646ms forwards;
         }
         .acZyCSQq_7{
           stroke-dasharray:1 3;
           stroke-dashoffset:2;
           animation:acZyCSQq_draw 14ms linear 1816ms forwards;
         }
         .acZyCSQq_8{
           stroke-dasharray:48 50;
           stroke-dashoffset:49;
           animation:acZyCSQq_draw 347ms linear 1830ms forwards;
         }
         .acZyCSQq_9{
           stroke-dasharray:28 30;
           stroke-dashoffset:29;
           animation:acZyCSQq_draw 205ms linear 2178ms forwards;
         }
         .acZyCSQq_10{
           stroke-dasharray:19 21;
           stroke-dashoffset:20;
           animation:acZyCSQq_draw 141ms linear 2384ms forwards;
         }
         .acZyCSQq_11{
           stroke-dasharray:9 11;
           stroke-dashoffset:10;
           animation:acZyCSQq_draw 70ms linear 2526ms forwards;
         }
         .acZyCSQq_12{
           stroke-dasharray:1 3;
           stroke-dashoffset:2;
           animation:acZyCSQq_draw 14ms linear 2597ms forwards;
         }
         .acZyCSQq_13{
           stroke-dasharray:72 74;
           stroke-dashoffset:73;
           animation:acZyCSQq_draw 518ms linear 2611ms forwards;
         }
         .acZyCSQq_14{
           stroke-dasharray:38 40;
           stroke-dashoffset:39;
           animation:acZyCSQq_draw 276ms linear 3129ms forwards;
         }
         .acZyCSQq_15{
           stroke-dasharray:64 66;
           stroke-dashoffset:65;
           animation:acZyCSQq_draw 461ms linear 3406ms forwards;
         }
         .acZyCSQq_16{
           stroke-dasharray:50 52;
           stroke-dashoffset:51;
           animation:acZyCSQq_draw 362ms linear 3868ms forwards;
         }
         .acZyCSQq_17{
           stroke-dasharray:37 39;
           stroke-dashoffset:38;
           animation:acZyCSQq_draw 269ms linear 4230ms forwards;
         }
         @keyframes acZyCSQq_draw{
           100%{
             stroke-dashoffset:0;
           }
         }
         @keyframes acZyCSQq_fade{
           0%{
             stroke-opacity:1;
           }
           94.8051948051948%{
             stroke-opacity:1;
           }
           100%{
             stroke-opacity:0;
           }
         }
     }
   }

さっき、htmlに貼り付けた、線を表すコード

<path class ="cls-1  acZyCSQq_0" d=・・・・・></path>

<path class ="cls-1  acZyCSQq_1" d=・・・・・></path>

のclass(acZyCSQq_0)が順番に指定されて、

acZyCSQq_1

acZyCSQq_2

と、順番にstyleが指定されていきます。

これによって、順番に線が描画されるわけです!!


もう一度見てね


【まとめ】

今回のSVGアニメーションの作り方は、自分で書いた文字が、

そのままブラウザで動く感動体験ができるものでした!

やり方を簡単にまとめます


① iPadのアプリの「Vectornater」Apple Pencilを使って書きたい文字(絵)を描く 

②描いた文字(絵)を、保存する。この時にファイル形式をSVGにする。

③保存したSVGファイルを、AirDropとかで、mac(pc)に入れる 

④「vivus-instant」を検索!SVGファイルをドラッグ&ドロップ!(ぶち込む)アニメーション化される

⑤そのファイルをダウンロードボタンを押して、ダウンロード!

⑥ファイルを開いてSVGのコードをコピー

⑦自分の編集しているhtmlに貼り付ける!  

⑧ひとまず、これで動く!!(はず)


いつも、そうなんですが、

手順通りにやっても、一発でうまくいかないのが、

WEBの世界と思ってます!!

僕も、調べながらやって、「なんでやねん!!」

という言葉を、幾度となく発し、

デスクを叩き

コーヒーをがぶ飲みし、

休憩と称し、ゲーム(ファークライ5)をし

やっと辿り着いたわけです。

なので、うまくいかないもんなんで、その理由をググり、

自分が本当に理解できた時に、自分のモノになるんだなぁと

思います。

ほんま、日本語が、グローバルな言語やったら

マークアップや、プログラミングは、もっと簡単やったやろうなと

思います!!


最速で失敗を繰り返して、成長しましょう!ではまた!


この記事が気に入ったらサポートをしてみませんか?