easing - jquery を使用した完全な Web ページのイージング

Question

ページ全体のイーズを実装する方法を理解しようとしています...ページにイーズしたいタグの順序をスクリプトにどのように呼び出したり伝えたりしますか? ボディロード機能を使用する必要がありますか?

どうもありがとう。

エリック

Answer 1

ページを変更するときにフェードインおよびフェードアウトするためのチュートリアルは次のとおりです。http ：//www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

ページを「バウンス」させたい場合は、同じページのdivタグに含まれるようにWebサイトを設定し、スライドショーのようにページを「簡単に」出し入れできます。

CSS-

.panel{
    float: left;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
}

HTML-

<div id='div1' class='panel'>Page 1</div>
<div id='div2' class='panel'>Page 2</div>
<div id='div3' class='panel'>Page 3</div>
<div id='div4' class='panel'>Page 4</div>
<div id='div5' class='panel'>Page 5</div>

JavaScript-

$（document）.ready（function（）{
    var left = 0;
    var width = $（window）.width（）;
    var easing_type ='easeOutBack';

    $（window）.resize（function（）{
        initialize_all（）;
    }）;

    initialize_all（）;

    関数initialize_all（）{
        左=0;
        width = $（window）.width（）;
        $（ "＃div1"）。css（{
            左：0 + "px"
        }）;
        $（ "＃div2"）。css（{
            左：幅+「px」
        }）;
        $（ "＃div3"）。css（{
            左：2*幅+"px"
        }）;
        $（ "＃div4"）。css（{
            左：3*幅+"px"
        }）;
        $（ "＃div5"）。css（{
            左：4*幅+"px"
        }）;
    }

    関数move_forward（）{
        左-=幅;
        if（左0）{
            左=-4*幅;
        }
        $（ "＃div1"）。animate（{
            左：左+「px」
        }、transition_time、easing_type）;
        $（ "＃div2"）。animate（{
            左：左+幅+「px」
        }、transition_time、easing_type）;
        $（ "＃div3"）。animate（{
            左：左+2*幅+"px"
        }、transition_time、easing_type）;
        $（ "＃div4"）。animate（{
            左：左+3*幅+"px"
        }、transition_time、easing_type）;
        $（ "＃div5"）。animate（{
            左：左+4*幅+"px"
        }、transition_time、easing_type）;
    }
}）;

これは私が試したスライドショーでの単純な試みでした。jqueryイージングプラグインを含める必要がありますが、30種類のイージングタイプから選択できます。