カスタマイズしたオーバレイ効果の作成

ここでは、カスタマイズされた "drop" オーバレイ効果を見ることができます。 基本的な設定と同じ様に設定しましたが、ローディング 効果を変更しています:

The Barcelona Pavilion

Barcelona, Spain

The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. It was an important building in the history of modern architecture.

Several critics, historians and modernists have declared it "the most beautiful building of the century"

The Barcelona Pavilion

Barcelona, Spain

Another unique feature of this building is the exotic materials Mies chose to use.

Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.

スタンドアロン・デモ

jQuery animate メソッドのカスタム・イージング

"drop" と呼ばれる、jQueryの新しいアニメーション・アルゴリズムを加えることからっスタートします。 これは、jQuery.easing オブジェクトを拡張することによって可能です。 jQuery イージングプラグインの ソースコードから、このイージング関数を入手することができます。 試すことができる、他の別のイージングアルゴリズムの非常にたくさんあります。

// create custom animation algorithm for jQuery called "drop"
$.easing.drop = function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};

カスタムのオーバレイ効果

カスタムのオーバレイの効果は、$.tools.overlay.addEffect メソッドを使用して行います。 最初の引数はエフェクト名で、第2引数はオーバレイを表示する方法を定義し、第3引数はオーバレイの閉じ方 を定義します。関数の内部の this 変数は、overlay API への参照です。

ローディング関数は、2つの引数を受け取ります。最初の引数 css は、コンフィギュレーションに指定する top と left プロパティを定義します。 第2引数は、ローディング効果を実行した後にコールしなければならないコールバック関数です。

// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {
 
    // use Overlay API to gain access to crucial elements
    var conf = this.getConf(),
    overlay = this.getOverlay();
 
    // determine initial position for the overlay
    if (conf.fixed)  {
        css.position = 'fixed';
    } else {
        css.top += $(window).scrollTop();
        css.left += $(window).scrollLeft();
        css.position = 'absolute';
    }
 
    // position the overlay and show it
    overlay.css(css).show();
 
    // begin animating with our custom easing
    overlay.animate(
        { top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done
    );
 
    /* closing animation */
}, function(done) {
    this.getOverlay().animate(
        {top:'-=55', opacity:0, width:'-=20'}, 300, 'drop',
        function() {
            $(this).hide();
            done.call();
        });
});

注: this.getConf() メソッドを使用し、コンフィギュレーションオプション へのアクセスを得ることができます。また、同様にカスタムのコンフィギュレーションオプションを提供するには、 このオブジェクトを使用することができます。

JavaScript コード

ここに、オーバレイ・ンフィギュレーションがあります。effect コンフィギュレーション変数を 使用して新しく作成したオーバレイ効果を提供します。

$("img[rel]").overlay({
    effect: 'drop',
    mask: '#789'
});