【SWELL】スマホ開閉メニュー端に画像をひょっこりさせるカスタマイズ

SWELLでスマホの開閉メニューを開いたときに、端っこから画像がひょっこりするカスタマイズをご紹介します。

下記の動画をご覧ください。

開閉メニューの端っこに、可愛いわんこがひょっこりしています。（当初は意図していなかった挙動ですが、最後なごり惜しそうにちょっと残るのもかわいい）

サイズや位置、傾きなどは画像ごとに微調整する必要がありますが、基本的にどんな画像でもひょっこりさせられます。CSSだけで実装していますので、割と簡単です。

ちなみに上記デモ動画でひょっこりしているわんこの画像は、フリー素材ぴよたそさまの「犬っころ」をつかわせていただきました。

そんなカスタマイズについて解説していきます。