進捗30％？(アニメーション4個実装)
つい進捗報告を忘れて作業にのめりこんでしまう。
会社で日報やチームでの共有があるように書いておかないと。
やったこと、できたこと、どうやってできたか、できなかったことはどこでつまづいているか。自分のためにも書く。
コードはこちら。
下書きに残っていた泣き言。
JavaScriptもだけどCSSも分からない。
widthとheightが分からなくなる。
画面の真ん中に配置する方法は、この2つがメイン？
- htmlとbodyともにwidth, heightを100%にする方法。
- position: absoluteでtop: 50%, left: 50%,
transform: translate(-50%, -50%); にする方法。
参考にするサイトさんはposition: absoluteの方法で真ん中にやっている人がほとんど。
時と場合によるのか。
widthとheightの単位に何を使うか迷う。
以前、実務でheightにvwを使っているコードを触ったことがある。
heightに幅の単位を使う＝幅と同じ相対的に高さを決めたいってこと？
vhをLPサイトを作るときに使ったことがある。
safariでおおいに崩れてしまって違う単位にした思い出。
ただ、それは他の部分でレイアウトが崩れる要因があったことが大きい気がする。
iPhone5を基本に作っていて、iPhone6に変えるとずれる。
萎える。iPhone5やiPhoneSE愛好家が根強いことを知っているから切り捨てたくない。
JSでアニメーションを作っていると位置調整が難しい。
検証の仕方が分からない。位置調整はそもそもCSSのほうが楽じゃないか？
background-imageとimgの違い。
基本なのに忘れてた。backgroundでアニメーション画像を指定していたが、私にとってはサイトを構成する大事な要素なので、imgタグかSVGでいくことに。
やったこと＆できたこと
How Come?をシュッと出現させて彼方にやった。
https://howcome.dev/opening.html
こちら↓をお手本に。
See the Pen CSS3 Text Animation Effect by Nick Mkrtchyan (@Sonick) on CodePen.
「？」の挙動をすこし変更。
前に書いてたWeb Animations APIで高さをvhに直した。
https://howcome.dev/opening2.html
まだ微妙な動き。scaleで拡大縮小させると座標が変わって位置の指定が分からなくなる。みんなどうやってるんだ・・・。
ずっとfill: forwardsとopacityで最後「？」よ消えてくれと願っていた。
Web Animations APIでのopacity指定が本当に分からない。単体だといけるんだが、transformと組み合わせると効かない。
諦めてCSSでやるか・・・と思ったら他の人のコードでscale(0)にしたら消えていた。消えた。ありがとう。
letter-glowでintro文を彩った。
https://howcome.dev/opening3.html
最初に見つけていいなと思ったのはこちら。
See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.
こっち↓はそのあとにJavaScriptで書きつつSpanizerとやらをAjaxで呼び出すとこ
settings: {
letters: $(".js-letters")
},
このあたりだけjQueryを使っている？と思ったのでお手本にさせてもらった。
私はJavaScriptの書き方を勉強したいんだ。
でもプラグインを使ったほうが効率良い場合は使う。というかこの文字がキラキラ現れる効果は検索では他に出なかった。みんなこれ使っているようだ。
See the Pen Spanizer: Text Animation by Yunus Ekim (@yunusekim) on CodePen.
というかAjaxとは・・・。
spanで一文字ずつ囲んでいく書き方。
nth-childを文字数分書きたくなかった。for文の書き方を参考にさせていただいた。
letter-glowの効果はとてもいいのだが、字数が多いと画面外に飛び出てしまう。改行で対応しているが、このあとレイアウトうまくいくだろうか・・・。
文字をぶくぶく浮かばせては消え浮かばせては消え。
これをcodepenで見つけた時、歓喜。まさにこれが私の思考に近い。これこれ！
See the Pen Floating text animation by Gleb (@g1eb) on CodePen.
SVGを圧縮。
svgo-guiがいいと知ってインストールしたものの、画像が壊れる。変な切れ目が出来たり、パスがガタガタに壊れたり。
素直にすでに入れてあったgulp-svgminを使ったら綺麗にうまく瞬時にやってくれた。なぜ一度避けたかというと、全然動いてなかったから。頑張ってどこが間違っているのかgulpfile.jsを見たら
.pipe( changed( './assets/images/*' )
の最後に*が抜けていた。解決できてよかった〜。
書き出しにはアウトライン化（Affinity Designerではカーブに置き換える）が望ましいようなのでカーブにしといた。テキストの場合かな？まあカーブにしたところで問題ないので一応しといた。
読んでも分からなかったSVG書き出しのヘルプ。
できなかったこと
promiseでアニメーションを順番に表示させていくこと。
できないので取り急ぎhtmlとJSファイルを分散させて試運転中（涙）
おおかたのことはJavaScriptコードレシピ集とQiitaで解決しているが、できないなあ！
まず書くpromiseを場所が分からない！
アニメーションをどうやって呼び出せばいいかが分からない！
やりたいこと
アニメーションを1個、2個、3個作りたい・・・。
おおもとの超シンプルな経歴とかのページを彩りたい。
