ブログに貼っても重くならない、クリックでgif動画を再生する方法
オッスオラょぅι ゙ょ！
ょぅι ゙ょのょぅι ゙ょによるょぅι ゙ょのための備忘録シリ〜〜〜ズ
クレイジーサイコクリプトに寄稿したGF（仮）とクリプトカレンシーガールズのパロディ記事 を作った時、ワイの知識ではどうしてもgif動画を使わないと実現できない箇所があったンゴ
そんでgif動画は再生タイミングを制御したかったんけど、それはJavaScriptのonclickイベントを使えばいけるらしい
onclickは「onclick属性が入った要素をクリックするとなんかするやで〜〜〜〜」ってやつ
その方法を使えば「普通に記事にgif動画貼るよりもページの読み込みが早くなる」っていう追加効果もあるから今後gif貼る時も活用しちゃうぞ〜〜〜
画像をクリックするとgif動画と入れ替わる
See the Pen open gif by JavaScript by Seyana (@Seyana) on CodePen.
のトロワをクリックしてみるお！
最初に静止画が表示されてるんだけど、クリックすると静止画がgif動画に置き代わるお！
それでなんで軽くなるかっていうと、ページを開いたときに最初に表示してるのが静止画だからなんすね〜〜〜
動画より静止画の方が軽いやん
やり方は、".jpg"に最初に表示したい静止画を指定、次の'.gif'にクリックしたら表示させたいgifを指定するだけだお☆
はてなブログの場合は、最初に表示させたい静止画を普通に貼り付けた後、html表示に切り替えて貼り付けたimgタグの中に以下を記述すればいいお☆
onclick="this.src='クリックで再生させたい.gif'
gif画像のURLは①普通にgifを貼り付けた後にhtml表示にするか、もしくは②直接はてなフォトライフにアップロードして取得することもできるお〜〜〜
①が分かりやすいかな
onclickでは複数処理を実行できる
onclickでは複数要素をid指定して処理できるっぽい
そもそもなぜgif使おうとしたのかというと、複数要素を動かせないと思ったんすね
GFパロディ記事のバトルのとこ で「10億XRP売り浴びせ」ってボタンをクリックすると、
①手前のガールたちが揺れる
②「ロックアップ」の文字が出る（時間差で文字が砕け散る）
③「解除」の文字が出る
④リップルちゃんがスライドインしてくる
⑤リップルちゃんの影がスライドインしてくる
ってのがあるんだけど、onclickで全部出せねえｗｗｗｗってなったのでgif使っちゃいました（出せる）
onclick使ってクリックしても1個の要素しか動かせないと思ったんだよな〜〜〜（というかonclickで複数要素動かすという発想がなかった）
だからgifで色んな要素出したように見せてたンゴねえ
まあ砕け散るエフェクトとかはgifでしか無理だと思うけど…とか思ったけどcssでできそうな気するな
書き方はこんな感じだと思う
onclick="this.src='置換したい.png'; [id名].src='2個目'; [id名].src='3個目'"
時間差のとこはcssのなんとかdelayで
おわり
