[Design] ヘッダバナー切り替えアクション

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBページのデザインは、無限に尽きることがありません。
インターネット黎明期の頃から思い返してみると、パソコンのデザインから、ブラウザのデザイン、ボタンや装飾のデザインの流行り廃りなどが頻繁に変わっている事に気がつきます。
 

今時のベンチャー企業のWEBページなどは、非常に見た目にもかっこいいのが多く、ああいうWEBページデザインで自分のWEBページやサービスを立ち上げたいな〜と日々考えてしまうんですが、隣の芝生はとても青く見える心理で、いいと思ったものをどんどん取り込んでしまえばいいだけの話です。
 

そんなわけで、この間codepenで公開されていた、かっこいいデザインが、WEBサイトのバナーに使えそうだったので、自分用のライブラリとして作っておきました。
 

見かけたcodepenのURLは、こちらです。
https://codepen.io/z-/pen/OBPJKK

どんな機能?

縦並びに並んだバナーっぽい画像が、クリックすると、伸縮して、対象の画像(エリア)が表示されて、内容が明確に見えるというもので、WEBサイトのメインバナーで使うと非常に便利ではないかと思います。
 

アイコンを設置しておく事で、ピクトグラム効果により、ある程度の説明をしなくても、中身が想像できるため、メニューリンクとしての見え方もできて、邪魔にならないデザイン
 

cssアニメーションを使っているので、比較的軽めのソースコードとメモリ消費が抑えられます。

ソースコード

 

 

解説

cssの設定変更でカスタマイズできるように、ソースコードの比率をcssが高めになっています。
 

メニューの基本構造は、ul/liのリスト構造で、数が変更しても動作するような仕様にしていますが、最大幅などに注意をしてもらう必要があります。
 

また、スマートフォンで表示した時と、PCブラウザで表示した時を考えて、768pxを基準にして、レスポンシブ対応するようにしました。
 

WEBページで利用する場合ではこの仕様は必須ですよね。
 

css-animationはliタグに”data-ef”という属性値を”0″または”1″(最初はブランク)で切り替えた時にanimationが発動するようにしており、jsを使ってクリック時に属性の変更を行うようにしています。
 

こうした処理の時に気をつけるポイントとしては、単なるトグル処理ではなく、クリック->ON、残りは全て->OFFという処理をしないと、ちゃんと閉じる処理が実行されないので、理解できない人は自分なりに一度コーディングしてみる事をお勧めします。

画面イメージ

PC表示
 


 

スマートフォン表示
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です