clipとborderWidthを使用した枠線が食い込んでくるようなアニメーション

ロールオーバー時にボーダーが食い込んでくるようなアニメーションを作る必要があったので、何パターンか考えてみました。ちょうどレクサスのバナー類のようなイメージです。

DEMO

AD

clipを使用したアニメーション

あまり使われている印象はありませんが、CSSにはclipというプロパティがあります。

clip・・・・・ボックスを切り抜き表示(クリッピング)する

rect(上,右,下,左)
ボックスの左上端を基準として、上右下左のそれぞれの距離を指定します。

背景に同一サイズの要素を置き、全面に来る画像のclipの値をアニメーションさせることができれば、ちょうどボーダーが食い込んでくるようなアニメーションが実現できそうです。

clipはabsoluteでないと適用できないため、同サイズのspanで囲ってそのspanをrelativeとすることで、位置に影響が出ないようにしています。

また、ロールオーバー時になぜかChromeでのみborder指定がないと背景色が表示されなかったので1pxのborderを指定しています。レイアウトに影響が出そうな場合はbox-sizing:border-boxを指定すれば何とかなりそうです。

Javascript側の手順としては、

1.画像をspanで囲う。
2.囲ったspanに対し、mouseenter,mouseleaveをバインドする。
3.mouseenter時にspanの子要素にclipを適用し、mouseleave時に元に戻す。

という流れになります。

アニメーションで使用しているstepという関数については、前回の記事のjQueryによる三角関数を利用したアニメーションの再考(step関数を使ったバージョン)をご参照ください。

borderWidthを使用したアニメーション

ちょっとコードが長くややこしくなってしまいましたので、もっと簡単にできないかと思い考えたところ、border-widthをアニメーションさせることができれば簡単に実現できるのではないかと考えました。

jQueryのanimateはborderWidthに対しても適用できるため、以下のようなコードで枠線の太さを変更するアニメーションが実現できます。

ただ、borderは画像の外につくため、mouseenter時に画像の位置がずれるという問題があります。

そこで、CSSのbox-sizingプロパティを使用してborderが内側に来るようにします。

box-sizingはborderやpaddingを外側に取るか内側に取るかを指定するプロパティです。
スマートフォンサイトの制作ではよく使われるものではないかと思います。

box-sizing …… ボックスサイズの算出方法を指定する

border-box
パディングとボーダーを幅と高さに含める

borderの太さ分画像が縮小されるという問題はありますが、その点を気にしなければ最も簡単で手っ取り早い方法だと思います。

・・・が、IE7以下ではbox-sizingが効かないので、IE7への対応が必要な場合は使えない方法です。

borderWidthと同時にwidth,heightを縮小させたアニメーション

box-sizingが使えない環境を想定した場合、borderWidthへのアニメーションと同時に画像を縮小させれば同じことができるかと思い以下の様なスクリプトを考えました。

borderの太さ分画像自体を縮小させて位置がずれないようにしようという試みですが、それぞれのアニメーションの実行タイミングがわずかにズレるため、ギクシャクした動きとなってしまいます。実際に使うのは厳しいかもしれません。

そんなわけでいくつか考えてみましたが、個人的には一番がんばって書いたclipを使ってやっていきたい感じです(;´∀`)

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。