[JS]パネルをスムースなスライドで表示するスクリプト -Overlay with Slide Out Box

メッセージボックスを半透明なオーバーレイ上にアニメーションで表示するチュートリアルをCodropsから紹介します。

デモのキャプチャ

CSS and jQuery Tutorial: Overlay with Slide Out Box
demo

デフォルトの画面は下記のようになっており、左上の隅「click me」のクリックがトリガーとなっています。

デモのキャプチャ

デフォルトの画面

メッセージボックスのスタイルでは角丸にCSS3が使用されており、スクリプトはjQueryをベースに下記のスクリプトを記述しています。

JavaScript

サイトでは画像やjQueryなどを含む一式となったファイルがダウンロードできます。

sponsors

top of page

©2018 coliss