3D Portfolio Template

JavaScript

立体的に回転するテンプレート「3D Portfolio Template」

滑らかに、立体的に回転するテンプレートを実装することができる「3D Portfolio Template」をご紹介します。CSSの3D TransformsとCSS transitionを組み合わせることで多彩な表現が可能になるので、とても参考になりますね。

3D Portfolio Template

デモ

画面上部にはFilterボタンが3つ設置されていて、ここがトリガーとなっています。Filterボタンをクリックすると、コンテンツが立体的に回転して切り替わる仕組みです。

各Filterごとにコンテンツは縦に3つ並んでいます。回転する際は、上の段から順番に動き始めるので、より立体感が増すように見えますね。

また、各コンテンツの段をクリックすると、スライドダウンでコンテンツが展開されます。それと同時に、右上には「×」ボタンが表示されるので、閉じたい場合にはこれをクリックすればOKです。

デモページはレスポンシブにも対応しているので、画面を縮小してもそれに合わせてレイアウトも最適化されるのがいいですね。

サクサク滑らかに動作するので、操作性もよくストレスなくコンテンツを楽しめると思います。

というわけで、立体感あふれる動きを取り入れたテンプレートを活用したい人は、ぜひ試してみてはいかがでしょうか?

3D Portfolio Template

Choreographer-js多彩なCSSアニメーションを実現できる「Choreographer-js」前のページ

カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」次のページjQuery cardslider

関連記事

  1. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  2. responsive-flip-pricing-table

    JavaScript

    レスポンシブでフリップによる価格表示の切り替えができる「Responsive Flip Pricin…

    レスポンシブに対応し、フリップによる価格表示の切り替えもできるテーブル…

  3. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  4. PIGNOSE-ParallaxSlider
  5. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  6. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP