今回は、たまたま見つけたソースコード投稿共有コミュニティサイトのアニメーションが色々と面白かったので書いておきたいと思います。
ソースコード投稿共有コミュニティサイトとは?
ざっくり言うとWebエンジニア向けのpixiv (ピクシブ) といった感じでしょうか。
国内で運営されている jsdo.it の紹介内容を見るとわかりやすいですね。
jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。
書いたその場で動かせるオンラインエディターだから、コードはWeb上に保存、作品として公開できます。技術に自信がなくても大丈夫!共有されているコードをアレンジして、最先端のテクニックを手に入れましょう。
jsdo.it – Share JavaScript, HTML5 and CSS
こちらは海外のサイトで一番人気があるサイトのようです。
CodePen – Front End Developer Playground & Code Editor in the Browser
ブログにコードを埋め込んでみる
ソースコード投稿共有コミュニティサイトに投稿されているソースコードはダウンロードできるだけでなく、SNSで拡散したりブログに埋め込むことができるようになっています。
表示画面上部のボタンで各種ソースコードと動作結果を切り替えることができるようになっています。
CodePen の場合
See the Pen WpPmxx by otwo (@otwo) on CodePen.
jsdo.it の場合
HTML5のCanvasを使って桜を降らせるアニメーション
上で紹介した CodePen のコード はブログで詳しい解説がされています。とても分かりやすいので、近いうちに実際に試してみたいと思います。
Canvasで桜を降らせてみました _ 株式会社オーツー|スタッフブログ
https://www.otwo.jp/blog/canvas_sakura/