• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

Masonry

[CSS]マウスオーバーで立方体が回転する3Dアニメーションギャラリーサンプル

[CSS]マウスオーバーで立方体が回転する3Dアニメーションギャラリーサンプル

今回は、前回の「マウスオーバーで平面が回転する3Dアニメーション」の応用編、グリッドレイアウトで並べた画像コンテンツを、立方体に見立てたキューブとして回転して別の面が表示されるパターンのCSSのtransformを利用した3Dアニメーションサンプルをご紹介。 前回のTipsは以下をご覧ください。 それでは、前回の平面パ…
[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSSのtransformを利用した3Dアニメーションの実装例をご紹介します。 タイル状のグリッドレイアウトは、定番jQue…
自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」

自動タイルレイアウト用プラグイン「Masonry」にフィルター機能を付ける「Multiple Filter Masonry」

タイルのように可変グリッドレイアウトを自動で表示してくれる、超定番&超便利なjQueryプラグイン、「Masonry」。 しかし、この「Masonry」には残念なことにフィルター機能がありません。 フィルター機能とは、例えばショップサイトで画像付きの商品一覧ページをタイルレイアウトで表示している場合、商品の色や…
CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル

CSS(Flexbox)だけでタイルレイアウト(Masonry)を表示するサンプル

ギャラリーサイトなどでよく見かける、画像を敷き詰めてタイル状に並べたグリッドレイアウトを実現するには、「Masonry」に代表されるjQuery/Javascriptプラグインを利用することで、表示幅を計算して簡単に自動で配置することができますが、Javascriptを利用するという点で、少々敷居が高く感じてしまう方も…
Return Top