jQueryを使ったマッシャブル浮動エフェクトの例

jQueryを使用したマッシュ可能なフローティングエフェクトの例

ソーシャルメディアリソースのWebサイトとして最もよく知られているMashableは、ユーザーがページをスクロールしているときに素晴らしいフローティング効果を生み出しました。このフローティング効果をjQueryで複製する簡単なアイデアを次に示します。

アイデア…

フローティングボックスを作成します。
フローティングボックスの位置を初期化し、ボディコンテンツの横に配置します。
ユーザーがページをスクロールしている間、スクロールバーの位置を確認し続けます。
スクロールバーのy位置がフローティングボックスのy位置よりも大きい場合、フローティングボックスのy位置を動的に変更します。
スクロールバーのy位置がフローティングボックスのy位置よりも小さい間、元の位置に戻します。
もちろん、jQueryを使用します。

1. HTMLレイアウト

シンプルなHTMLレイアウト、ヘッダー、コンテンツ、フッターは、コンテンツの上にdivの「フローティングボックス」を配置します。


    header
    
    
        content
        Mashable floating effect example
    
    footer

2. フローティングボックス90×200

これは、人々がボックスをスクロールしている間、スムーズにフロートするボックスです。必要に応じて、“margin-left:-100px; "を少し調整する必要がある場合があります。

#floating-box{
    width:90px;
    height:200px;
    border:1px solid red;
    background-color:#BBBBBB;
    float:left;
    margin-left:-100px;
    margin-right:10px;
    position:absolute;
    z-index:1;
}

3. 競合はありません

jQueryが他のライブラリと競合していないことを確認してください。確認することを強くお勧めします。

    //avoid conflict with other script
    $j=jQuery.noConflict();

    $j(document).ready(function($) {

4. 位置、位置、位置

jQuery scroll（）イベントをバインドして、ブラウザーのスクロールバーの位置を確認し続けます。

$(window).scroll(function () {

    var scrollY = $(window).scrollTop();
    var isfixed = $floatingbox.css('position') == 'fixed';

    if($floatingbox.length > 0){

        if ( scrollY > bodyY && !isfixed ) {
            $floatingbox.stop().css({
                position: 'fixed',
                left: '50%',
                top: 20,
                marginLeft: -500
            });
        } else if ( scrollY < bodyY && isfixed ) {
            $floatingbox.css({
                position: 'relative',
                left: 0,
                top: 0,
                marginLeft: originalX
            });
        }
    }
});

スクロールバーのy位置がフローティングボックスのy位置よりも大きい場合は、フローティングボックスのy位置を「marginLeft: -500」に変更します。必要に応じてこの値をカスタマイズする必要がある場合があります。

    if ( scrollY > bodyY && !isfixed ) {
       $floatingbox.stop().css({
        position: 'fixed',
        left: '50%',
        top: 20,
        marginLeft: -500
       });
     }

スクロールバーのy位置がフローティングボックスのy位置よりも小さい場合、元の位置に戻します。

        if ( scrollY < bodyY && isfixed ) {
       $floatingbox.css({
        position: 'relative',
        left: 0,
        top: 0,
        marginLeft: originalX
       });
    }

5. Done

以下の例を再生して、作品のアイデアをつかんでください。

P.S This floating effect feature is implemented in my DiggDigg WordPress plugin.

自分で試してください











  
    header

    

    

    
        content
        Mashable floating effect example
    
    footer

デモを試す

TOC