移动页面切片转换未正确加载

Question

我有一个页面过渡效果，你可以在这里看到

http://jsfiddle.net/5j5brrj4/

在桌面滚动它工作得很好 - 当我调整页面大小时一切正常。

我遇到的问题是移动

当我在移动设备上加载页面时，它不会将图像划分为相同的切片

要么它的一张大图片，第一个切片重复自己到页面的末尾（所以第一次切片10倍以上）或者我有黑屏。

它不会在触摸时滚动（我可以使用hammer.js来触摸时建立滚动效果吗？）

谢谢！

"use strict";
$(document).ready(function() {
    function t() {
        $(".left-part").css("transition-delay", (Math.floor(9 * Math.random()) + 4) / 10 + "s");
        for (var t = 1; c >= t; t++) $(".bg-part:nth-child(" + t + ")").css("transition-delay", (Math.floor(9 * Math.random()) + 4) / 10 + "s")
    }

    function e(e) {
        var a = e || 2e3;
        m.addClass("not-visible"), setTimeout(function() {
            r = !1, t()
        }, a), setTimeout(function() {
            $(".section-heading, .additional-text").css({
                "margin-top": 0 - 100 * (parseInt($(".nav-elem.active").attr("data-page")) - 1) + "vh"
            }).hide()
        }, 410), setTimeout(function() {
            m.show(), m.css("top"), m.removeClass("not-visible")
        }, a + 10)
    }

    function a(t) {
        t && (l = t), r = !0;
        var e = 0 - 100 * (l - 1);
        $(".bg-part, .left-part").css("margin-top", e + "vh"), $(".scroll-down").addClass("removed"), 1 === parseInt($(".nav-elem.active").attr("data-page")) && $(".scroll-down").removeClass("removed")
    }

    function n(e) {
        $(".left-part, .bg-part").css({
            "transition-duration": "0s",
            "transition-delay": "0s"
        }), $(".main").css("top"), a(e), $(".main").css("top"), $(".left-part, .bg-part").css("transition-duration", "0.8s"), t()
    }

    function o(t) {
        $(".nav-elem").removeClass("active"), $(".nav-" + t).addClass("active"), l = t, d.text(c >= 10 ? t : "0" + t)
    }

    function i() {
        l > 1 && (l--, o(l), a(), e())
    }

    function s() {
        c > l && (l++, o(l), a(), e())
    }
    var r = !1,
        l = 1,
        c = $(".section").length,
        d = ($(".sections"), $(".pagination .page")),
        u = $(".total-pages"),
        m = $(".section-heading, .additional-text");
    u.text(c >= 10 ? c : "0" + c), $(document).on("mousewheel DOMMouseScroll", function(t) {
        r || (t.originalEvent.wheelDelta > 0 || t.originalEvent.detail < 0 ? i() : s())
    }), $(document).on("mousewheel DOMMouseScroll", ".sidebar-hover, .sidebar-rea", function(t) {
        t.stopPropagation()
    });
   $(document).on("click", ".nav-elem:not(.active)", function() {
        if (!r) {
            var i = parseInt($(".nav-elem.active").attr("data-page"), 10),
                s = $(this).attr("data-page");
            if (o(s), Math.abs(i - s) > 2) {
                var l = $(".section-" + s).clone(),
                    c = $(".section-" + i),
                    d = 0;
                s > i ? (c.after(l), d = i + 1, $(".main").css("top"), t(), a(d)) : (c.before(l), d = i - 1, n(i + 1), $(".main").css("top"), t(), $(".main").css("top"), a(i)), e(2050), setTimeout(function() {
                    l.remove(), n(s)
                }, 2e3)
            } else a(s), e()
        }
    }), $(window).resize(function() {
        p = f.length * f.height() - $(window).height(), h.css("transform", "translateY(0)")
    })
});