おかゆ++スマートフォン用の表示で見るおかゆ++IT業界の片隅で生き残るブログこの広告は、90日以上更新していないブログに表示しています。JavaScriptこのブログの背景にアニメーションをつけてみました。コードはGitHubで公開しています。github.comはてなブログではhead要素の中に自由に要素を追加できるので、こういうちょっとした改造がすぐできていいですね。自作テーマを作ることでも実現できると思いますが、そこまでは......という気持ちだったので、JavaScriptでゴリゴリやりました。以下のソースを貼り付けます。n=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,t=function(t){n?n(t):window.setTimeout(t,33)},e=function(){try{u(),l()}catch(n){console.log(n)}t(e)};t(e)}}()}]);</script>以上でアニメーションは適用されますが、全面の要素で隠れてしまう場合があります。その場合はCSSで背景を透明にします。設定されており、アニメーションが隠れてしまったので、記事部分の背景を透明にします。部分に以下を追記します。*/</style>このあたりは使用しているブログテーマによってまちまちなので、調整が必要です。簡単にポイントのみ解説します。jQueryを使うかどうかブログテーマによってはjQueryが使用されているものがあり、今使わせてもらっているこのテーマでも読み込まれています。今回は使わずに素のJavaScriptだけにしました。jQueryを使わないと面倒なところが特になかったのと、他のブログテーマに乗り換えたときにも使えるようにしたかったのが主な理由です。canvas要素の生成して、body要素の直下に追加します。画面いっぱいに広げる際に注意が必要なのが、canvasのサイズはcssで設定せず、canvas.widthとcanvas.heightで設定する点です。すると、canvasの解像度はそのままに、横に引き伸ばした表示になってしまいます。今回はウィンドウサイズ=canvasサイズとしたいので、canvas.widthとcanvas.heightを設定します。イベント時があります。イベントで初期化・アニメーション開始としました。startTimer();});アニメーションの描画canvasにアニメーションを描画するために、タイマーを回します。使うのが良いみたいです。代用するようにしておきます。requestFrame(loopFunc);};JavaScriptの圧縮(minify)そのままのコードでだいたい130行くらいになってしまったので、圧縮して短くします。Webにオンラインで圧縮してくれるサービスがいくつもあるので、それを利用するのが一番手軽だと思います。今後のことも考えて、webpack3でminifyするようにしました。minifyプラグインを指定すると出力時に圧縮してくれます。],}まとめブログのカスタマイズは楽しいですね。自由に追加できるということは、実質何でもできると思うので、色々試していきたいです。»プロフィールid:okayu-moka1988年生まれ。愛媛県でエンジニアをやっています。興味があればとりあえず手を出すのが信条です。愛媛リンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!okayu-mokaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。