Webデザイン 2013年02月07日 背景に奥行きが出る、jQueryを使ったパララックス効果！ jQueryすごいなぁ。 どうも！ PCで見ていた方はお気づきだと思いますが、ブログの背景を変えました。 桜をみていたらそんな気分になったので、以前からやりたかった「パララックス効果」とあわせて実装！ 「パララックス効果」とは、画像のスクロール速度を変え、疑似的に奥行きを感じるようにする効果です。 実際見て頂くと、背景の桜が若干違うスピードで動くと思います。 概念図はこちら こんな感じで階層を分けて、それぞれスクロールのスピードを変えます。 こちらを参考に実装しました。 jQueryを利用しているので、かなりカンタンに実装できます。記述はかなりシンプル。 ほぼコピペしかしていない PCで見た場合、一番キレイにスクロールしてくれるのはFirefox。やはりお利口さんです。 Androidブラウザは、背景が若干遅れてついてくる感じはしますが、一応動いております。 さらに面白いこともできるんだろうと思います。 いろいろやってみねば！ では、また明日！ コメント 2 タグ ：パララックス効果背景jQuery桜スクロール Tweet
Webデザイン 2013年01月18日 これ便利！CSS3のボタンが簡単に作れるWebサービス 直打ちでは結構面倒なので。 どうも！ 今日はWebのお話でございます。 CSS3が出てきて久しい昨今。ボタンなんかもそれで作ることが多くなってきました。 また、スマートフォンのページは表示速度、レンダリングのキレイさの関係で大体CSS3で組むようになってきてるようです。 CSS3、いろいろできるのはいいのですが、書くことが多く、コードを見るだけだとイメージしづらいと個人的に思っています。Dreamweaverのプレビューではちゃんと表示されないので、ちょっと苦労します。 何かいいのないかなと探してみると、いいものがありました！ CSS3 Button Generator ブラウザ上で簡単にCSS3のボタンが作れちゃいます！ 背景色、グラデーション、余白、ドロップシャドウ、文字色などが指定できて、上にプレビューが表示されます。 同時にコードも発行されます。手打ちでこれだけ書くのは大変…。 あとはページにあわせてちょいとスタイルをいじって実装！こりゃ簡単！ さらに「SAVE+SHARE」を押すと、自分の作ったボタンがWeb上に保存されます。 さらにさらに、人の作ったボタンも見ることができるんです。 みてるだけでも楽しいです。 「これ、どうやってるんだろう？」と思ったら、そのボタンのコードを見ることもできます。 これはとても便利っす！ これからいろいろと活用、応用していきたいと思います！ では、また明日！ コメント 0 タグ ：CSS3Webボタン便利CSS3 Button Generator Tweet
画像一覧 
