こんにちは。
モンブランの江藤です。
気づけば年末ですね！
年々と一年の過ぎる速度が早くなってきてる気がします。
みなさんは今年一年良い年でしたか？？
僕にとっては良い意味で色んなことがあった一年でした。
来年も楽しく過ごしたいですね。
さて、今回はちょこっとこだわって組んだバナーを紹介しようと思います。
簡単にできると思ったら絶妙にめんどくさかったホバーアクション
今回ご紹介するのは「YOUR ROOM」様から！
デザインは亀ちゃん、コーディングはわたくし江藤が担当しました。
めちゃくちゃおしゃれなアパートメントホテルの紹介サイトで、
サイトもめちゃくちゃおしゃれな感じに仕上がってます。
所々動きがあったりレイアウトも単調じゃないので色々大変でしたね。。笑
その分、出来上がってみればみるだけでも楽しいサイトになったと思います！
そんなYOUR ROOMさんでこだわったバナーはここ
バナー１つに3枚の画像
良いのか悪いのか、デザインを見て勝手に「ここ、こういう動きしたらもっとデザイン映えするだろうな〜」ってとこは独断で勝手に動きをつけたりしちゃいます。
普通に必要なくて修正することもありますが。笑
このバナーを見た時、ホバーしたら
ボーダーも回って矢印も動いたらもっと目を引くかな〜
なんて思って実装しました。
実はこのバナー、画像の通り３つのレイヤーに分かれてます。
ベースのバナー画像を配置して、
矢印と回転する枠線を個別でabsoluteして上に配置してます。
これでhover時にそれぞれ独立した動きができました！
こうやって書き出してみれば大したことはないんですが、
バナー１つで３つも画像書き出して、
動かしたい要素をそれぞれ位置指定して配置させてそれぞれhoverで動きつけて・・・
めちゃくちゃ手間がかかってる！って訳ではないですが、
そんなに簡単にできてる訳でもないよ！って感じですね。
この動き自体も指示があった訳ではないので何を言ってるんだって話ですが。。笑
今回ご紹介した「YOUR ROOM」様のサイトはこちら！
バナーもトップページにありますので、ぜひ実際にご覧ください！