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. ボヤージュブレンド
  2. 紫陽花とセミの抜けがら
  3. クラブハウスサンド 石窯カンパーニュ
PAGE TOP