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. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  2. no-image
  3. jQuery-Simple-MobileMenu
  4. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  5. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  6. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP