当前位置: 首页 > 工具软件 > parallax.js > 使用案例 >

Parallax.js页面视差滚动插件

东方淇
2023-12-01
!
function(t, i, e) {
    "use strict";
    function s(t, i) {
        this.element = t,
        this.layers = t.getElementsByClassName("layer");
        var e = {
            calibrateX: this.data(this.element, "calibrate-x"),
            calibrateY: this.data(this.element, "calibrate-y"),
            invertX: this.data(this.element, "invert-x"),
            invertY: this.data(this.element, "invert-y"),
            limitX: this.data(this.element, "limit-x"),
            limitY: this.data(this.element, "limit-y"),
            scalarX: this.data(this.element, "scalar-x"),
            scalarY: this.data(this.element, "scalar-y"),
            frictionX: this.data(this.element, "friction-x"),
            frictionY: this.data(this.element, "friction-y"),
            originX: this.data(this.element, "origin-x"),
            originY: this.data(this.element, "origin-y")
        };
        for (var s in e) null === e[s] && delete e[s];
        this.extend(this, r, i, e),
        this.calibrationTimer = null,
        this.calibrationFlag = !0,
        this.enabled = !1,
        this.depths = [],
        this.raf = null,
        this.bounds = null,
        this.ex = 0,
        this.ey = 0,
        this.ew = 0,
        this.eh = 0,
        this.ecx = 0,
        this.ecy = 0,
        this.erx = 0,
        this.ery = 0,
        this.cx = 0,
        this.cy = 0,
        this.ix = 0,
        this.iy = 0,
        this.mx = 0,
        this.my = 0,
        this.vx = 0,
        this.vy = 0,
        this.onMouseMove = this.onMouseMove.bind(this),
        this.onDeviceOrientation = this.onDeviceOrientation.bind(this),
        this.onOrientationTimer = this.onOrientationTimer.bind(this),
        this.onCalibrationTimer = this.onCalibrationTimer.bind(this),
        this.onAnimationFrame = this.onAnimationFrame.bind(this),
        this.onWindowResize = this.onWindowResize.bind(this),
        this.initialise()
    }
    var n = "Parallax",
    o = 30,
    r = {
        relativeInput: !1,
        clipRelativeInput: !1,
        calibrationThreshold: 100,
        calibrationDelay: 500,
        supportDelay: 500,
        calibrateX: !1,
        calibrateY: !0,
        invertX: !0,
        invertY: !0,
        limitX: !1,
        limitY: !1,
        scalarX: 10,
        scalarY: 10,
        frictionX: .08,
        frictionY: .08,
        originX: .5,
        originY: .5
    };
    s.prototype.extend = function() {
        if (arguments.length > 1) for (var t = arguments[0], i = 1, e = arguments.length; e > i; i++) {
            var s = arguments[i];
            for (var n in s) t[n] = s[n]
        }
    },
    s.prototype.data = function(t, i) {
        return this.deserialize(t.getAttribute("data-" + i))
    },
    s.prototype.deserialize = function(t) {
        return "true" === t ? !0 : "false" === t ? !1 : "null" === t ? null: !isNaN(parseFloat(t)) && isFinite(t) ? parseFloat(t) : t
    },
    s.prototype.camelCase = function(t) {
        return t.replace(/-+(.)?/g,
        function(t, i) {
            return i ? i.toUpperCase() : ""
        })
    },
    s.prototype.transformSupport = function(s) {
        for (var n = i.createElement("div"), o = !1, r = null, a = !1, h = null, l = null, p = 0, c = this.vendors.length; c > p; p++) if (null !== this.vendors[p] ? (h = this.vendors[p][0] + "transform", l = this.vendors[p][1] + "Transform") : (h = "transform", l = "transform"), n.style[l] !== e) {
            o = !0;
            break
        }
        switch (s) {
        case "2D":
            a = o;
            break;
        case "3D":
            if (o) {
                var m = i.body || i.createElement("body"),
                u = i.documentElement,
                y = u.style.overflow;
                i.body || (u.style.overflow = "hidden", u.appendChild(m), m.style.overflow = "hidden", m.style.background = ""),
                m.appendChild(n),
                n.style[l] = "translate3d(1px,1px,1px)",
                r = t.getComputedStyle(n).getPropertyValue(h),
                a = r !== e && r.length > 0 && "none" !== r,
                u.style.overflow = y,
                m.removeChild(n)
            }
        }
        return a
    },
    s.prototype.ww = null,
    s.prototype.wh = null,
    s.prototype.wcx = null,
    s.prototype.wcy = null,
    s.prototype.wrx = null,
    s.prototype.wry = null,
    s.prototype.portrait = null,
    s.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),
    s.prototype.vendors = [null, ["-webkit-", "webkit"], ["-moz-", "Moz"], ["-o-", "O"], ["-ms-", "ms"]],
    s.prototype.motionSupport = !!t.DeviceMotionEvent,
    s.prototype.orientationSupport = !!t.DeviceOrientationEvent,
    s.prototype.orientationStatus = 0,
    s.prototype.transform2DSupport = s.prototype.transformSupport("2D"),
    s.prototype.transform3DSupport = s.prototype.transformSupport("3D"),
    s.prototype.propertyCache = {},
    s.prototype.initialise = function() {
        this.transform3DSupport && this.accelerate(this.element);
        var i = t.getComputedStyle(this.element);
        "static" === i.getPropertyValue("position") && (this.element.style.position = "relative"),
        this.updateLayers(),
        this.updateDimensions(),
        this.enable(),
        this.queueCalibration(this.calibrationDelay)
    },
    s.prototype.updateLayers = function() {
        this.layers = this.element.getElementsByClassName("layer"),
        this.depths = [];
        for (var t = 0,
        i = this.layers.length; i > t; t++) {
            var e = this.layers[t];
            this.transform3DSupport && this.accelerate(e),
            e.style.position = t ? "absolute": "relative",
            e.style.display = "block",
            e.style.left = 0,
            e.style.top = 0,
            this.depths.push(this.data(e, "depth") || 0)
        }
    },
    s.prototype.updateDimensions = function() {
        this.ww = t.innerWidth,
        this.wh = t.innerHeight,
        this.wcx = this.ww * this.originX,
        this.wcy = this.wh * this.originY,
        this.wrx = Math.max(this.wcx, this.ww - this.wcx),
        this.wry = Math.max(this.wcy, this.wh - this.wcy)
    },
    s.prototype.updateBounds = function() {
        this.bounds = this.element.getBoundingClientRect(),
        this.ex = this.bounds.left,
        this.ey = this.bounds.top,
        this.ew = this.bounds.width,
        this.eh = this.bounds.height,
        this.ecx = this.ew * this.originX,
        this.ecy = this.eh * this.originY,
        this.erx = Math.max(this.ecx, this.ew - this.ecx),
        this.ery = Math.max(this.ecy, this.eh - this.ecy)
    },
    s.prototype.queueCalibration = function(t) {
        clearTimeout(this.calibrationTimer),
        this.calibrationTimer = setTimeout(this.onCalibrationTimer, t)
    },
    s.prototype.enable = function() {
        this.enabled || (this.enabled = !0, this.orientationSupport ? (this.portrait = null, t.addEventListener("deviceorientation", this.onDeviceOrientation), setTimeout(this.onOrientationTimer, this.supportDelay)) : (this.cx = 0, this.cy = 0, this.portrait = !1, t.addEventListener("mousemove", this.onMouseMove)), t.addEventListener("resize", this.onWindowResize), this.raf = requestAnimationFrame(this.onAnimationFrame))
    },
    s.prototype.disable = function() {
        this.enabled && (this.enabled = !1, this.orientationSupport ? t.removeEventListener("deviceorientation", this.onDeviceOrientation) : t.removeEventListener("mousemove", this.onMouseMove), t.removeEventListener("resize", this.onWindowResize), cancelAnimationFrame(this.raf))
    },
    s.prototype.calibrate = function(t, i) {
        this.calibrateX = t === e ? this.calibrateX: t,
        this.calibrateY = i === e ? this.calibrateY: i
    },
    s.prototype.invert = function(t, i) {
        this.invertX = t === e ? this.invertX: t,
        this.invertY = i === e ? this.invertY: i
    },
    s.prototype.friction = function(t, i) {
        this.frictionX = t === e ? this.frictionX: t,
        this.frictionY = i === e ? this.frictionY: i
    },
    s.prototype.scalar = function(t, i) {
        this.scalarX = t === e ? this.scalarX: t,
        this.scalarY = i === e ? this.scalarY: i
    },
    s.prototype.limit = function(t, i) {
        this.limitX = t === e ? this.limitX: t,
        this.limitY = i === e ? this.limitY: i
    },
    s.prototype.origin = function(t, i) {
        this.originX = t === e ? this.originX: t,
        this.originY = i === e ? this.originY: i
    },
    s.prototype.clamp = function(t, i, e) {
        return t = Math.max(t, i),
        t = Math.min(t, e)
    },
    s.prototype.css = function(t, i, s) {
        var n = this.propertyCache[i];
        if (!n) for (var o = 0,
        r = this.vendors.length; r > o; o++) if (n = null !== this.vendors[o] ? this.camelCase(this.vendors[o][1] + "-" + i) : i, t.style[n] !== e) {
            this.propertyCache[i] = n;
            break
        }
        t.style[n] = s
    },
    s.prototype.accelerate = function(t) {
        this.css(t, "transform", "translate3d(0,0,0)"),
        this.css(t, "transform-style", "preserve-3d"),
        this.css(t, "backface-visibility", "hidden")
    },
    s.prototype.setPosition = function(t, i, e) {
        i += "px",
        e += "px",
        this.transform3DSupport ? this.css(t, "transform", "translate3d(" + i + "," + e + ",0)") : this.transform2DSupport ? this.css(t, "transform", "translate(" + i + "," + e + ")") : (t.style.left = i, t.style.top = e)
    },
    s.prototype.onOrientationTimer = function() {
        this.orientationSupport && 0 === this.orientationStatus && (this.disable(), this.orientationSupport = !1, this.enable())
    },
    s.prototype.onCalibrationTimer = function() {
        this.calibrationFlag = !0
    },
    s.prototype.onWindowResize = function() {
        this.updateDimensions()
    },
    s.prototype.onAnimationFrame = function() {
        this.updateBounds();
        var t = this.ix - this.cx,
        i = this.iy - this.cy; (Math.abs(t) > this.calibrationThreshold || Math.abs(i) > this.calibrationThreshold) && this.queueCalibration(0),
        this.portrait ? (this.mx = this.calibrateX ? i: this.iy, this.my = this.calibrateY ? t: this.ix) : (this.mx = this.calibrateX ? t: this.ix, this.my = this.calibrateY ? i: this.iy),
        this.mx *= this.ew * (this.scalarX / 100),
        this.my *= this.eh * (this.scalarY / 100),
        isNaN(parseFloat(this.limitX)) || (this.mx = this.clamp(this.mx, -this.limitX, this.limitX)),
        isNaN(parseFloat(this.limitY)) || (this.my = this.clamp(this.my, -this.limitY, this.limitY)),
        this.vx += (this.mx - this.vx) * this.frictionX,
        this.vy += (this.my - this.vy) * this.frictionY;
        for (var e = 0,
        s = this.layers.length; s > e; e++) {
            var n = this.layers[e],
            o = this.depths[e],
            r = this.vx * o * (this.invertX ? -1 : 1),
            a = this.vy * o * (this.invertY ? -1 : 1);
            this.setPosition(n, r, a)
        }
        this.raf = requestAnimationFrame(this.onAnimationFrame)
    },
    s.prototype.onDeviceOrientation = function(t) {
        if (!this.desktop && null !== t.beta && null !== t.gamma) {
            this.orientationStatus = 1;
            var i = (t.beta || 0) / o,
            e = (t.gamma || 0) / o,
            s = this.wh > this.ww;
            this.portrait !== s && (this.portrait = s, this.calibrationFlag = !0),
            this.calibrationFlag && (this.calibrationFlag = !1, this.cx = i, this.cy = e),
            this.ix = i,
            this.iy = e
        }
    },
    s.prototype.onMouseMove = function(t) {
        var i = t.clientX,
        e = t.clientY; ! this.orientationSupport && this.relativeInput ? (this.clipRelativeInput && (i = Math.max(i, this.ex), i = Math.min(i, this.ex + this.ew), e = Math.max(e, this.ey), e = Math.min(e, this.ey + this.eh)), this.ix = (i - this.ex - this.ecx) / this.erx, this.iy = (e - this.ey - this.ecy) / this.ery) : (this.ix = (i - this.wcx) / this.wrx, this.iy = (e - this.wcy) / this.wry)
    },
    t[n] = s
} (window, document),
function() {
    for (var t = 0,
    i = ["ms", "moz", "webkit", "o"], e = 0; e < i.length && !window.requestAnimationFrame; ++e) window.requestAnimationFrame = window[i[e] + "RequestAnimationFrame"],
    window.cancelAnimationFrame = window[i[e] + "CancelAnimationFrame"] || window[i[e] + "CancelRequestAnimationFrame"];
    window.requestAnimationFrame || (window.requestAnimationFrame = function(i) {
        var e = (new Date).getTime(),
        s = Math.max(0, 16 - (e - t)),
        n = window.setTimeout(function() {
            i(e + s)
        },
        s);
        return t = e + s,
        n
    }),
    window.cancelAnimationFrame || (window.cancelAnimationFrame = function(t) {
        clearTimeout(t)
    })
} ();
 类似资料: