0

3D効果を利用したCSSアニメーションでフォトギャラリー

3D効果を利用したCSSアニメーションでフォトギャラリー

 

CSS3の3D効果を使って動きのあるフォトギャラリーを作ってみたいと思います。現状ChromeやSafariなどのwebkit系ブラウザでのみの対応なのでなかなか実装できるシーンは少ないかもしれませんが、そこはひとまず置いておいてチャンレンジしてみましょう。

 

▼素材のダウンロード元はこちら

 

【使い方】

1.画像を用意

 

今回は「Oleg Oprisco」氏の写真を6枚使用させて頂きました。

Oprisco

 

2.jQuery本体とjsを読み込む

 

 jQuery本体と「jquery.transiton.js」と「modernizr.custom.70748.js」を</body>の直前で読み込みます。

 

 3.CSSを読み込む

 

共通のスタイル「common.css」を読み込みます。(ダウンロード素材の中では「demo.css」という名前になっています。)

 

4.HTMLを記述

 

いくつかアニメーションの違いにより記述が変わってきますが、基本となるHTMLは下記のようになります。

 ここまでが基本ベースになり、アニメーション方法によりCSSとHTMLを書き換えていきます。

 

↓ それではいくつか、サンプルを見ていきましょう。

 

  1. Flip
  2. Rotation
  3. Multi-flip
  4. Cube
  5. Unfold
  6. Others

 

 

SAMPLE1【Flip】

 

▼縦捲れ

 縦捲れ

▼縦スクロール

縦スクロール

▼横回転扉

横回転扉

▼横スクロール

横スクロール

 

デモサンプル1

 

HTMLを記述

 

CSSを記述

  •  画像サイズによって「.te-cover」のwidthとheightを調整します。
  • スクロールに関しては「flip2」の600pxとなっているところ、横スクロールに関しては「flip4」の600pxとなっているところを画像サイズに調整します。

 

 

SAMPLE2【Rotation】

 

▼前倒れ回転

前倒れ回転

▼前倒れ

前倒れ

▼右横捲れ

右横捲れ

▼左横回転扉(バウンス)

左横回転扉(バウンス)

▼左カレンダー捲れ

左カレンダー捲れ

 

デモサンプル2

 

HTMLを記述

 

CSSを記述

  •  画像サイズによって「.te-cover」のwidthとheightを調整します。

 

 

SAMPLE3【Multi-flip】

 

▼前倒れ

前倒れ

▼後ろ滑り込み

後ろ滑り込み

▼横ブラインド

横ブラインド

 

デモサンプル3

HTMLを記述

  • Multi-flipに関してはHTMLの<div class=”te-transition”>~</div>内が大きく変わりますのでご注意ください。
  • サンプルは6等分しているためflip6まで用意してありますが、その数は何等分するかによって調整してください。

 

CSSを記述

  •  画像サイズによって「.te-cover」のwidthとheightを調整します。
  • また何等分するのかによって「.te-transition .te-flip1~6 img」と「.te-multiflip1 .te-flip1,.te-multiflip2 .te-flip1,.te-multiflip3 .te-flip1{left: 0px;}」以下を調整してください。
  • 横ブラインドに関しては「keyframes multiflip3_1」~「keyframes multiflip3_1」の「translate3d」の-30px、-100pxとなっているところを調整してください。

 

 

SAMPLE4【Cube】

 

▼前転がり

 前転がり

▼後転がり

後転がり

▼左転がり(バウンス)

左転がり(バウンス)

▼右転がり

右転がり

 

デモサンプル4

 

HTMLを記述

  •  Cubeに関してもHTMLの<div class=”te-transition”>~</div>内が大きく変わりますのでご注意ください。

 

CSSを記述

  •  画像サイズによって「.te-cover」のwidthとheightを調整します。
  • すべてのパターンにおいて「translate3d」の300pxとなっているところを使用する画像の半分の値に調整します。

 

 

SAMPLE5【Unfold】

 

▼縦折りたたみから展開(バウンス)

縦折りたたみから展開(バウンス)

▼横折りたたみから展開(バウンス)

縦折りたたみから展開(バウンス)

 

デモサンプル5

 

HTMLを記述

  •  Cubeに関してもHTMLの<div class=”te-transition”>~</div>内が大きく変わりますのでご注意ください。

 

CSSを記述

  •  画像サイズによって「.te-cover」のwidthとheightを調整します。
  • すべてのパターンにおいて「.te-back」「.te-back2」「.te-back3」の横幅もしくは高さを画像の半分と何回折にするかで調整します。

 

 

SAMPLE6【Others】

 

▼フェード

フェード

▼左スライド

左スライド

▼ポイッと

ポイッと

▼後ろへスライド

後ろへスライド

▼カシャッと切り替え

カシャッと切り替え

▼拡大フェードアウト

拡大フェードアウト

▼クルッと切り替え(バウンス)

クルッと切り替え(バウンス)

 

デモサンプル6

HTMLを記述

 

CSSを記述

  •  画像サイズによって「.te-cover」のwidthとheightを調整します。
  • 左スライドに関しては「keyframes example2Front」「keyframes example2Back」の-600px、600pxとなっているところを使用する画像サイズ値に調整します。
  • 後ろへスライドに関しては「keyframes example4Front」のtranslateXの-630pxになっているところを使用する画像サイズ-30px程度に調整します。

 

以上になります。

 

「3D Transforms」がChomeやSafari等のwebkit系ブラウザのみの対応状況ですので、まだまだ利用できる機会は少ないかもしれませんが紹介させて頂きました。

 







コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 3D効果を利用したCSSアニメーションでフォトギャラリー