[JS]複数のパネルをアニメーションでスライド表示させるスクリプト -fixedTo

補助系のメニューやちょっとしたアナウンスを掲載するのに最適なパネルをアニメーションでスライド表示させるjQueryのプラグインを紹介します。

デモのキャプチャ

jQuery: Plugin fixedTo
デモページ

[ad#ad-2]

デモでは、ブラウザ枠の左と下側から2枚のパネルがアニメーションでスライド表示され、表示位置はスクロールしてもブラウザの枠に対して固定位置に表示されます。

デモのキャプチャ

デモページ

fixedToの実装

パネルはdiv要素を使用し、テキスト・画像・リンクなどあらゆる要素を設置可能です。

[ad#ad-2]

JavaScript

jquery.js」と「jquery.fixedto.min.js」を外部ファイルとし、下記のスクリプトを記述します。

$("elemento").fixedTo({
	"posicion":"left",
	"ancho":360,
	"alto":70,
	"ocultar":true,
	"animar":true
});
elemento
表示するパネルを指定(class名やid名など)
posicion
表示するパネルの位置(left, bottomなど)
ancho
表示するパネルの幅
alto
表示するパネルの高さ
ocultar
パネルを非表示にする機能の有無
animar
パネルのアニメション機能の有無

sponsors

top of page

©2018 coliss