───解放しろ、全てを。
豆腐
Better Touch Tool
取引所
2018年冬アニメ記事サムネイル
高円寺観光客向け飯屋記事サムネイル
Made In Abyss
五飛

ブログに貼っても重くならない、クリックで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で全部出せねえwwwwってなったのでgif使っちゃいました(出せる)

onclick使ってクリックしても1個の要素しか動かせないと思ったんだよな〜〜〜(というかonclickで複数要素動かすという発想がなかった)

だからgifで色んな要素出したように見せてたンゴねえ

まあ砕け散るエフェクトとかはgifでしか無理だと思うけど…とか思ったけどcssでできそうな気するな

 



書き方はこんな感じだと思う

onclick="this.src='置換したい.png'; [id名].src='2個目'; [id名].src='3個目'"


時間差のとこはcssのなんとかdelayで

 

おわり