easing - 使用 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 --

$(文档).ready(函数 () {
    左变量 = 0;
    var 宽度 = $(window).width();
    var easing_type = 'easeOutBack';

    $(窗口).resize(函数() {
        初始化全部（）；
    });

    初始化全部（）；

    函数初始化全部（）{
        左=0；
        宽度 = $(窗口).width();
        $("#div1").css({
            左：0 +“像素”
        });
        $("#div2").css({
            左：宽度+“像素”
        });
        $("#div3").css({
            左：2 * 宽度 + "px"
        });
        $("#div4").css({
            左：3 * 宽度 + "px"
        });
        $("#div5").css({
            左：4 * 宽度 + "px"
        });
    }

    函数 move_forward() {
        左-=宽度；
        如果（左 0）{
            左 = -4 * 宽度；
        }
        $("#div1").animate({
            左：左+“px”
        }，transition_time，easing_type）；
        $("#div2").animate({
            左：左+宽度+“像素”
        }，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 easing 插件，但是您可以从 30 种不同的缓动类型中进行选择。