パララックスを活用した一見の価値ありなサイト２１:phpspot開発日誌
21 Examples of Parallax Scrolling in Web Design | Inspiration パララックスを活用した一見の価値ありなサイト２１。 パララックスは視差という意味ですが、マウスとかスクロールの位置によって、背景などが立体的に見えるというものです。 どれもうまい具合作られていて、みるだけでも勉強になります。 普通につくると、当たり前のように平面ですが、立体的にすることでインパクトを上げて覚えてもらいやすくなったり、よりプロダクトなどを魅力的にみせることができるのかも。 関連エントリ デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集 奥行きをうまく使ったサイトデザイン集３０ 次のサービスに使えるかもしれないロゴデザイン集２２ なんとなく和むイラストベースのWEBデザイン集60 黒ベースのクールなWEBサイトデザイン集
webdesignkeys CSSのみで表現されるパララックス効果「Pure CSS 3D Meninas」
以下のサイトを見てみてください。 トップの画像にマウスを被せ左右に動かすと、自分が移動して、中を覗き込んでいるような感覚になります。 「Pure CSS 3D Meninas」 実は、このデモでは、ＨＴＭＬとＣＳＳのみで構成されています。以下のページのソースコードを見るとjsなどのスクリプトを読んでいないことがわかります。またブラウザのjavascriptを無効にしても確かめられると思います。 「Pure CSS 3D Meninas」 では、実際には、どのようにして作っているのか 利用している画像は、以下の3点だけです。 ■パララックス素材① ■パララックス素材② ■パララックス素材③ 覗き込んでいるような印象を与えるためには、背景画像の幅の引き延ばしに よって表現します。これをCSSの疑似クラス[hover]によって少しずつ ずらしています。 人物などは、引き延ばしされないように素材③
パララックス効果を使ったウェブデザイン | | DesignWalker
パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
