はてなブログで「パララックススクロール」を実現してみた⊂(＾ω＾)⊃：追記しました。
大晦日にも関わらず会社にきてます。
もちろん休日です。
というか休みの日はほぼ会社にきてます。
むしろ現時点ではお金を払ってでも勉強をしないとダメなんで
運営しているサイトのデザインを修正してみたり、軽量化してみたり。
昨日はデザインの方にサイトロゴを作成してもらったので、それに併せてサイトリニューアルもしたい気分。
そんな中で最近ハマってるのがパララックスなんですが
「パララックスとはなんぞや？」
って方はコチラをお読みください。
「パララックス」をはじめとする「スクロールエフェクト」の魅力とは | コラム・研究会 - 株式会社マイクロウェーブ
背景とかメニューバーとかがうにょんうにょんしてますよね。
こんな効果が与えられます。
ぶっちゃけ最近まで全然知らなかったんですが、facebookの友人からの一言で興味を持ちました。
で、実験的に自分のはてなブログの背景画像にパララックスを実装してみようと思ったんですが
はてなブログではhtmlを弄ることができない⊂(＾ω＾;)⊃
この時点で心が折れそうになったんですが色々と調べてみると、フッター部分にhtmlを記述できる場所を発見。
ココさえ発見できればなんとかなりそう！ってことでそれとなくやってみたら成功しました。
はてなブログでパララックススクロールを実現させる手順
まず下記のコードを挿入する。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://bulldra.github.io/parallax.js" charset="utf-8"></script>
.background-parallax { background-image: url('背景画像'); background-color: transparent; background-repeat: repeat; position: fixed; width: 100%; height: 300%; top: 0; left: 0; z-index: -1; }
これで上手く実装できるはずです⊂(＾ω＾)⊃
意外とあっさりしてました。
むしろこの記事を書いてる時間のほうが長かった。
無料版のはてなブログはファイルのアップロードが出来ないので、僕はdropboxにファイルを上げて画像を使ってます。
はてなブログでちょっと凝ったデザインをしてみたいな～と思ってる方など如何でしょうか。
