webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comment

コメントの投稿













管理者にだけ表示を許可する
 

CSSのみで表現されるパララックス効果「Pure CSS 3D Meninas」

css_3d_parallax_e36_00.jpg
パララックスというのは、視差のことであり、二地点での観測地点の位置の違いにより、対象点が見える方向が異なるという意味です。

以下のサイトを見てみてください。
トップの画像にマウスを被せ左右に動かすと、自分が移動して、中を覗き込んでいるような感覚になります。

「Pure CSS 3D Meninas」

実は、このデモでは、HTMLとCSSのみで構成されています。以下のページのソースコードを見るとjsなどのスクリプトを読んでいないことがわかります。またブラウザのjavascriptを無効にしても確かめられると思います。

「Pure CSS 3D Meninas」

では、実際には、どのようにして作っているのか
利用している画像は、以下の3点だけです。

■パララックス素材①
css_3d_parallax_e36_01.jpg

■パララックス素材②
css_3d_parallax_e36_02.jpg

■パララックス素材③
css_3d_parallax_e36_03.png

覗き込んでいるような印象を与えるためには、背景画像の幅の引き延ばしに
よって表現します。これをCSSの疑似クラス[hover]によって少しずつ
ずらしています。
人物などは、引き延ばしされないように素材③のように透過PNGで別に画像を用意しています。

■感想
jsを利用したパララックス効果は何度か見たことがありましたが、
CSSのみを利用した例をみたのは初めてですごく驚かされました。
CSSの記述量はかなり多く、ごり押しな気もしなくもないですが、
普通では考えられない素晴らしいアイデアだと思いました。


Comment

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

 
Other Links
 
 
 
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。