[CSS]スクリプト無しで、パネルを滑らかなスライドで切り替えるスタイルシート

画像を配置したパネルをアニメーションのような滑らかなスライドで切り替えるスタイルシートをCSSplayから紹介します。

デモのキャプチャ

Experimental - Sliding menu
demo

デモではパネルの左側のナビゲーションにマウスをホバーすると、右側にそれに対応した画像がアニメーションのようなスライドで表示されます。

スタイルシートだけでアニメーションしているように見えるのは、画像を表示する際に少しずつ位置を変更し、あたかも滑らかにスライドしているように見せています。

sponsors

top of page

©2024 coliss