使用 jquery 实现完整网页缓动

Question

我一直在尝试了解如何实现全页面缓动...如何调用或告诉脚本我想要缓动到页面中的标签的顺序？我需要使用身体负荷功能吗？

非常感谢。

埃里克

Answer 1

以下是更改页面时淡入和淡出的教程： http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

如果您想要页面“跳入”和跳出，您可以将网站设置为包含在同一页面上的 div 标签中，然后像幻灯片一样“轻松”进出它们。

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();

    function initialize_all() {
        left = 0;
        width = $(window).width();
        $("#div1").css({
            left: 0 + "px"
        });
        $("#div2").css({
            left: width + "px"
        });
        $("#div3").css({
            left: 2 * width + "px"
        });
        $("#div4").css({
            left: 3 * width + "px"
        });
        $("#div5").css({
            left: 4 * width + "px"
        });
    }

    function move_forward() {
        left -= width;
        if (left  0) {
            left = -4 * width;
        }
        $("#div1").animate({
            left: left + "px"
        }, transition_time, easing_type);
        $("#div2").animate({
            left: left + width + "px"
        }, transition_time, easing_type);
        $("#div3").animate({
            left: left +2 * width + "px"
        }, transition_time, easing_type);
        $("#div4").animate({
            left: left +3 * width + "px"
        }, transition_time, easing_type);
        $("#div5").animate({
            left: left +4 * width + "px"
        }, transition_time, easing_type);
    }
});

这是我尝试过的幻灯片放映的简单尝试，您需要包含 jquery 缓动插件，但您可以从大约 30 种不同的缓动类型中进行选择。