我有一个页面过渡效果,你可以在这里看到
在桌面滚动它工作得很好 - 当我调整页面大小时一切正常。
我遇到的问题是移动
当我在移动设备上加载页面时,它不会将图像划分为相同的切片
它不会在触摸时滚动(我可以使用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)")
})
});