可上下拖拉的切片背景图片

竖向拖拉图片，触发背景图像切片切换动画。

gsap, drag, slice

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1574
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

$(document).ready(function() {

var $wsPages = $(".ws-pages");
    var $headings = $(".ws-text__heading");
    var bgParts = 24;
    var staggerVal = 85;
    var staggerStep = 5;
    var textH = $(".ws-text").height();
    var winW = $(window).width();
    var winH = $(window).height();
    var curPage = 1;
    var numOfPages = $(".ws-bg").length;
    var changeAT = 0.5;
    var waveStartDelay = 0.2;
    var waveStagger = 0.013;
    var waveBlocked = false;
    var index = 1;
    var startY = 0;
    var deltaY = 0;
    var headingsY = 0;
    var $parts;

function initBgs() {
        var arr = [];
        for (var i = 1; i <= bgParts; i++) {
            var $part = $('<div class="ws-bg__part">');
            $part.addClass("ws-bg__part-" + i);
            arr.push($part);
        }
        $(".ws-bg").append(arr);
        $wsPages.addClass("s--ready");
        $parts = $(".ws-bg__part");
        changePages();
    };

initBgs();

function changePages() {
        var y = (curPage - 1) * winH * -1;
        var textY = textH * (curPage - 1) * -1;
        var leftMax = index - 1;
        var rightMin = index + 1;

TweenMax.to($(".ws-bg__part-" + index), changeAT, {
            y: y
        });

for (var i = leftMax; i > 0; i--) {
            var d = (index - i) * waveStagger;
            TweenMax.to($(".ws-bg__part-" + i), changeAT - d, {
                y: y,
                delay: d
            });
        }

for (var j = rightMin; j <= bgParts; j++) {
            var d = (j - index) * waveStagger;
            TweenMax.to($(".ws-bg__part-" + j), changeAT - d, {
                y: y,
                delay: d
            });
        }

TweenMax.to($headings, changeAT, {
            y: textY
        });
    };

function waveChange() {
        waveBlocked = true;
        var y = (curPage - 1) * winH * -1;
        var textY = textH * (curPage - 1) * -1;
        for (var i = 1; i <= bgParts; i++) {
            var $part = $(".ws-bg__part-" + i);
            var d = (i - 1) * waveStagger + waveStartDelay;
            TweenMax.to($part, changeAT, {
                y: y,
                delay: d
            });
        }

TweenMax.to($headings, changeAT, {
            y: textY,
            delay: d
        });

var delay = (changeAT + waveStagger * (bgParts - 1)) * 1000;
        setTimeout(function() {
            waveBlocked = false;
        }, delay);
    };

function navigateUp() {
        if (curPage > 1) curPage--;
    };

function navigateDown() {
        if (curPage < numOfPages) curPage++;
    };

function navigateWaveUp() {
        if (curPage === 1) return;
        curPage--;
        waveChange();
    };

function navigateWaveDown() {
        if (curPage === numOfPages) return;
        curPage++;
        waveChange();
    };

function moveParts(y, index) {
        var leftMax = index - 1;
        var rightMin = index + 1;
        var stagLeft = 0;
        var stagRight = 0;
        var stagStepL = -staggerStep;
        var stagStepR = -staggerStep;
        var sign = (y > 0) ? -1 : 1;

movePart($(".ws-bg__part-" + index), y);

for (var i = leftMax; i > 0; i--) {
            var step = index - i;
            stagStepL += (step <= 15) ? staggerStep : 1;
            var sVal = staggerVal - stagStepL;
            if (sVal < 0) sVal = 0;
            stagLeft += sVal;
            var nextY = y + stagLeft * sign;
            if (Math.abs(y) < Math.abs(stagLeft)) nextY = 0;
            movePart($(".ws-bg__part-" + i), nextY);
        }

for (var j = rightMin; j <= bgParts; j++) {
            var step = j - index;
            stagStepR += (step <= 15) ? staggerStep : 1;
            var sVal = staggerVal - stagStepR;
            if (sVal < 0) sVal = 0;
            stagRight += sVal;
            var nextY = y + stagRight * sign;
            if (Math.abs(y) < Math.abs(stagRight)) nextY = 0;
            movePart($(".ws-bg__part-" + j), nextY);
        }
    };

var mousemoveHandler = rafThrottle(function(e) {
        var y = e.pageY;
        var x = e.pageX;
        index = Math.ceil(x / winW * bgParts);

deltaY = y - startY;
        headingsY = textH * deltaY / winH;
        moveParts(deltaY, index);
    });

var touchmoveHandler = rafThrottle(function(e) {
        e.preventDefault();
        var y = e.originalEvent.touches[0].pageY;
        var x = e.originalEvent.touches[0].pageX;
        index = Math.ceil(x / winW * bgParts);

deltaY = y - startY;
        moveParts(deltaY, index);
    });

var swipeEndHandler = function() {
        $(document).off("mousemove", mousemoveHandler);
        $(document).off("touchmove", touchmoveHandler);
        $(document).off("mouseup touchend touchcancel", swipeEndHandler);

if (!deltaY) return;

if (deltaY / winH >= 0.5) navigateUp();
        if (deltaY / winH <= -0.5) navigateDown();
        changePages();
    };

$(document).on("mousedown touchstart", ".ws-bg__part", function(e) {
        startY = e.pageY || e.originalEvent.touches[0].pageY;
        deltaY = 0;

$(document).on("mousemove", mousemoveHandler);
        $(document).on("touchmove", touchmoveHandler);

$(document).on("mouseup touchend touchcancel", swipeEndHandler);
    });

$(document).on("mousewheel DOMMouseScroll", function(e) {
        if (waveBlocked) return;
        if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
            navigateWaveUp();
        } else {
            navigateWaveDown();
        }
    });

$(document).on("keydown", function(e) {
        if (waveBlocked) return;
        if (e.which === 38) {
            navigateWaveUp();
        } else if (e.which === 40) {
            navigateWaveDown();
        }
    });

$(window).on("resize", function() {
        winW = $(window).width();
        winH = $(window).height();
        changePages();
    });

});

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
body {
    overflow: hidden;
    background: #000;
}
.ws-pages {
    overflow: hidden;
    position: relative;
    height: 100%;
}
.ws-bgs {
    position: relative;
    height: 100%;
}
.ws-bg {
    height: 100%;
    background-size: cover;
    background-position: center center;
}
.ws-pages.s--ready .ws-bg {
    background: none !important;
}
.ws-bg:after {
    content: "";
    display: table;
    clear: both;
}
.ws-bg__part {
    overflow: hidden;
    position: relative;
    float: left;
    width: 4.16667%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.ws-bg__part:after {
    content: "";
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
    background: inherit;
}
.ws-bg__part-1:after {
    left: 0vw;
}
.ws-bg__part-2:after {
    left: -4.16667vw;
}
.ws-bg__part-3:after {
    left: -8.33333vw;
}
.ws-bg__part-4:after {
    left: -12.5vw;
}
.ws-bg__part-5:after {
    left: -16.66667vw;
}
.ws-bg__part-6:after {
    left: -20.83333vw;
}
.ws-bg__part-7:after {
    left: -25vw;
}
.ws-bg__part-8:after {
    left: -29.16667vw;
}
.ws-bg__part-9:after {
    left: -33.33333vw;
}
.ws-bg__part-10:after {
    left: -37.5vw;
}
.ws-bg__part-11:after {
    left: -41.66667vw;
}
.ws-bg__part-12:after {
    left: -45.83333vw;
}
.ws-bg__part-13:after {
    left: -50vw;
}
.ws-bg__part-14:after {
    left: -54.16667vw;
}
.ws-bg__part-15:after {
    left: -58.33333vw;
}
.ws-bg__part-16:after {
    left: -62.5vw;
}
.ws-bg__part-17:after {
    left: -66.66667vw;
}
.ws-bg__part-18:after {
    left: -70.83333vw;
}
.ws-bg__part-19:after {
    left: -75vw;
}
.ws-bg__part-20:after {
    left: -79.16667vw;
}
.ws-bg__part-21:after {
    left: -83.33333vw;
}
.ws-bg__part-22:after {
    left: -87.5vw;
}
.ws-bg__part-23:after {
    left: -91.66667vw;
}
.ws-bg__part-24:after {
    left: -95.83333vw;
}
.ws-bg:nth-child(1) {
    background-image: url(/uploads/160901/wavescroll-bg-1.jpg);
}
.ws-bg:nth-child(1) .ws-bg__part {
    background-image: url(/uploads/160901/wavescroll-bg-1.jpg);
}
.ws-bg:nth-child(2) {
    background-image: url(/uploads/160901/wavescroll-bg-2.jpg);
}
.ws-bg:nth-child(2) .ws-bg__part {
    background-image: url(/uploads/160901/wavescroll-bg-2.jpg);
}
.ws-text {
    overflow: hidden;
    position: absolute;
    left: 15%;
    top: 50%;
    width: 70%;
    height: 50px;
    margin-top: -25px;
    pointer-events: none;
}
.ws-text__heading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
    font-size: 30px;
    line-height: 50px;
    color: #fff;
}

HTML

竖向拖拉图片，触发背景图像切片切换动画。

gsap, drag, slice

编辑器支持Emmet

快捷键

竖向拖拉图片，触发背景图像切片切换动画。

gsap, drag, slice

HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面

简单JS实现的竖向可拖拉区块分割条

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：