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

関連記事

  1. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  2. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

  3. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  4. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  5. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  6. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP