[JS]パネルがアニメーションでフリップするスクリプト -Sponsor Flip Wall

パネルがくるっとアニメーションでひっくり返るスクリプトをTutorialzineから紹介します。

デモのキャプチャ

Sponsor Flip Wall With jQuery & CSS
デモページ

デモではグリッド状に配置されたパネルにマウスでフォーカスするとハイライトされ、クリックすると各パネルはくるっとひっくり返ります。

ひっくり返ったパネルには、個別のテキストやリンクが配置されています。

各パネルはdiv要素で配置されており、ハイライトのエフェクトはCSSでホバー時にボックスシャドウを適用しています。

CSS

ボックスシャドウのスタイルシート

サイトのキャプチャ

上記のひっくり返るフリップのアニメーションはjQueryをベースにして実装されています。

各パネルのテキストやリンクなどのデータはPHPとデータベース(MySQL)を使用してXMLで管理されており、スポンサーの追加や変更なども簡単に行えるようになっています。

sponsors

top of page

©2018 coliss