スクロール位置によって任意のイベントを発生させる sf_scroll_trick.js

カテゴリーから探す

年別から見る

2012/03/11

スクロール位置によって任意のイベントを発生させる sf_scroll_trick.js

スクロール位置によって任意のイベントを発生させるjQuery pluginを作った。
sf_scroll_trick.js
ダウンロード
 demo-1
demo-2

■インストール手順
・sf_scroll_trick.js
を読み込むだけ。

■呼び出し
sf_scroll_trick( argument )
引数は連想配列1つ。
連想配列の構造は以下。

対象の要素 : 処理

対象となるオブジェクト:
文字列。
jQueryの要素へのアクセス方法を使用する。
e.g.) #header、#header .logo img

処理：
文字列。
エフェクト関数,処理が始まるTop位置,処理が終わるTop位置
の順番で、カンマ区切りの文字列として指定する。

上記エフェクト関数は、ユーザーが定義できる。
ここでは関数名のみを記載する。
関数には自動で引数が挿入される。
関数の仕様は後述する。

■実装

css3のscaleを0%から100%にするサンプル。

html


<body>
<div id="wrapper">
<div id="sample"></div>
</div>
</body>

<body>

</div>

</body>

css


#sample
{
width: 200px;
height: 200px;
background-color: red;
-webkit-transform: scale(0);
-moz-transform: scale(0);
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}

#sample

{

width: 200px;

height: 200px;

background-color: red;

-webkit-transform: scale(0);

-moz-transform: scale(0);

position: absolute;

top: 50%;

left: 50%;

margin-left: -100px;

margin-top: -100px;

}

呼び出し(headの中)


$(document).ready(function(){
sf_scroll_trick( {
"#sample": "scale_up,0,200"
} );
});

$(document).ready(function(){

sf_scroll_trick( {

"#sample": "scale_up,0,200"

} );

});

エフェクト


function scale_up( obj, num )
{
$( obj ).css( "-webkit-transform", "scale(" + num / 100 + ")" );
$( obj ).css( "-moz-transform", "scale(" + num / 100 + ")" );
}

function scale_up( obj, num )

{

$( obj ).css( "-webkit-transform", "scale(" + num / 100 + ")" );

$( obj ).css( "-moz-transform", "scale(" + num / 100 + ")" );

}

サンプルはこちら
/demo/hoshino/01/03.html

jsはこちら
/demo/hoshino/01/js/03.js

次に、alphaを0%から100%にするサンプル。