FREENANCE Ad

スライドアウトボックスメニューという新しいアプローチのご紹介

FREENANCE Ad
DESIGNER

「スライドアウトボックメニュー」とは、グリッド内でスライドするボックス付きの詳細メニューのことです。今回取り上げる例では、グリッドアイテムはページの右上隅から個別にモーション付きで表示されます。

今回はこの小さなメニューを共有したいと思います。 スライドアウトボックスメニューというアイデアは、以前に紹介した拡大グリッドメニューと同様にページの右上隅からグリッドのボックスを個別に表示します。

このエフェクトとスライドショーのレイアウトのアイデアは、Adrián SomozaのデザインとZhenya RynzhukのDribbble shotから生まれました。アニメーションはTweenMaxによって提供されます。

注意:最新のCSSプロパティを使用しているため、古いブラウザではサポートされない可能性があります。ご了承ください。

メニューを紹介するため、今回はGIF動画を作成しました。 以下のように、右上隅の「+detail」ボタンをクリックするとメニューが開きます。

この小さなメニューの効果を、気に入ってくれると嬉しいです。

(著者:Mary Lou 翻訳:Kiyofumi Sato)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship