Blog

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

2012.03.10Cat:プログラム 役員

スクロール位置によって任意のイベントを発生させる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

 

css

 

呼び出し(headの中)

 

エフェクト

 

サンプルはこちら
http://sterfield.co.jp/demo/hoshino/01/03.html

jsはこちら
http://sterfield.co.jp/demo/hoshino/01/js/03.js

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

html

css

 

呼び出し(headの中)

 

エフェクト

 

サンプルはこちら
http://sterfield.co.jp/demo/hoshino/01/04.html

jsはこちら
http://sterfield.co.jp/demo/hoshino/01/js/04.js

上記の通り、エフェクトには2種類の引数が返ってくる。

第1引数:
エフェクトをかける対象のhtml要素。

第2引数:
0?100の整数が返ってくる。
本体関数sf_scroll_trickの引数で指定した
topのスパンを100分割し、それぞれのタイミングで実行される。

この数値を加工することでエフェクトをつけることができる。

上記の組み合わせ例。
http://sterfield.co.jp/demo/hoshino/01/01.html

その2
http://sterfield.co.jp/demo/hoshino/01/02.html
普通のサイト内でも色々と用途がある。

Author Profile

hoshino

ECのことを中心に書きたいと思います。
ネタが無いときはプログラムやデザインのことも書きます。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ