我在多层视差背后的数学上真的很挣扎。如果我在页面顶部有视差效果，那么它工作正常，但是，由于它可能在我的页面上的任何位置，我需要偏移视差并调整高度，这样你就不会看到背景。
但是，我需要根据图层的深度以及它在页面上的位置来计算出调整图层大小所需的量。然而，该视差面板可以在页面上的任何位置。
这是我的代码和一个工作示例：
/**
* @author Martyn Lee Ball
* @desc Creates multi-layer Parallax effect
* @version 1.0
* @return {Array} Returns instances of classes as Array
*/
;class Parallax {
constructor(node) {
const self = this;
// Settings and defaults
self.settings = {
container: node,
height: node.clientHeight,
name: node.dataset.parallax,
layers: [],
defaultDepth: 0.5,
offset: function(element) {
let top = 0, left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
return {
top: top,
left: left
};
}.call(self, node)
}
;
// Populate layers setting with objects
(function() {
let layers = (self.settings.container).querySelectorAll('[data-layer]');
let count = 0;
for (const layer in layers) {
if (layers.hasOwnProperty(layer)) {
self.settings.layers.push({
// Get the depth, set to default depth if not set
depth: (function() {
if (layers[layer].dataset.depth !== undefined)
return parseFloat(layers[layer].dataset.depth);
return self.settings.defaultDepth;
}.call(self)),
element: layers[layer],
name: layers[layer].dataset.layer,
});
let height = function(layer) {
const self = this;
let height = self.settings.height;
return (height + (height - (height * layer.depth)));
}.call(self, self.settings.layers[count]);
layers[layer].style.height = height + "px";
}
count++;
}
}.call(this));
this.setupScrollEvent.call(this);
}
setupScrollEvent() {
const self = this;
window.addEventListener('scroll', function(e) {
self.last_known_scroll_position = window.scrollY || document.documentElement.scrollTop;
if (!self.ticking) {
window.requestAnimationFrame(function() {
self.scrolledEvent.call(self, self.last_known_scroll_position);
self.ticking = false;
});
self.ticking = true;
}
});
self.last_known_scroll_position = window.scrollY || document.documentElement.scrollTop;
self.scrolledEvent.call(self, self.last_known_scroll_position);
}
scrolledEvent(scrollY) {
const self = this;
// TODO: Check panel is in view
for (const layer in self.settings.layers) {
if ((self.settings.layers).hasOwnProperty(layer)) {
let movement = -((scrollY * self.settings.layers[layer].depth) - scrollY);
let translate3d = 'translate3d(0, ' + movement + 'px, 0)';
self.settings.layers[layer].element.style['-webkit-transform'] = translate3d;
self.settings.layers[layer].element.style['-moz-transform'] = translate3d;
self.settings.layers[layer].element.style['-ms-transform'] = translate3d;
self.settings.layers[layer].element.style['-o-transform'] = translate3d;
self.settings.layers[layer].element.style.transform = translate3d;
}
}
}
static initialize() {
this.instances = [];
// Ensure DOM has loaded
window.addEventListener('load', function() {
// Does page contain any parallax panels?
let panels = document.querySelectorAll('[data-parallax]');
if (panels.length > 0) {
// Parallax panels found, create instances of class and return them for reference
for (const panel in panels) {
if (panels.hasOwnProperty(panel)) {
this.instances.push(new this(panels[panel]));
}
}
}
}.bind(this));
return this.instances;
}
}
window.plugins = { "parallax-instances": Parallax.initialize() };html,
body {
margin: 0;
padding: 0;
}
.layer {
height: 800px;
}
section[data-parallax] {
height: 500px;
position: relative;
overflow: hidden;
border: 1px solid black;
border-width: 1px 0 1px 0;
}
section[data-parallax] > div {
position: absolute;
z-index: -1;
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
section[data-parallax] > div[data-layer='layer-bg'] {
background-image: url('https://i.imgur.com/F7pqpWZ.jpg');
}
section[data-parallax] > div[data-layer='layer-1'] {
background-image: url('https://i.imgur.com/uxpVhe1.png');
background-position: left bottom;
}
section[data-parallax] > div[data-layer='layer-2'] {
background-image: url('https://i.imgur.com/JeGChIm.png');
}
section[data-parallax] > div[data-layer='layer-3'] {
background-image: url('https://i.imgur.com/V7l8cxD.png');
background-position: right bottom;
}
section[data-parallax] > div[data-layer='layer-4'] {
background-image: url('https://i.imgur.com/joB5tI4.png');
}
section[data-parallax] > div[data-layer='layer-overlay'] {
background-image: url('https://i.imgur.com/h1ybMNZ.png');
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parallax Development</title>
<script src="parallax-dev.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section style="padding-top: 300px;"></section>
<section data-parallax="panel-1">
<div data-layer="layer-bg" data-depth="0.10"></div>
<div data-layer="layer-1" data-depth="0.20"></div>
<div data-layer="layer-2" data-depth="0.50"></div>
<div data-layer="layer-3" data-depth="0.80"></div>
<div data-layer="layer-4" data-depth="1.0"></div>
</section>
<section style="padding-bottom: 50vh;"></section>
</body>
</html>