多层视差，数学问题

Question

我有一个多层视差脚本目前半工作。如果假设有视差效果的元素被放置在网站的顶部，那么效果就会现场工作，当它滚动出视图时，你看不到图层移出了框架。

然而，我希望能够在整个页面的多个元素上使用此脚本，在不同的位置。看看下面的例子，你可以看到效果很好，但是如果你在data-parallax="panel-1"部分添加一些空白处，你会看到现在有一个问题。

​

/**
 * @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;
                do {
                    top += element.offsetTop  || 0;
                    element = element.offsetParent;
                } while(element);

                return {
                    top: self.normalizeInt(top)
                };
            }.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({

                        // Set the depth to the default if not defined
                        depth: (function() {
                            if (layers[layer].dataset.depth !== undefined)
                                return parseFloat(layers[layer].dataset.depth);
                            return self.settings.defaultDepth;
                        }.call(self)),

                        // Keep reference to the element
                        element: layers[layer],

                        // Get the layer name, not essential
                        name: layers[layer].dataset[layer]
                    });

                    // Fix layer heights
                    
                }
                count++;
            }
        }.call(this));

        this.setupScrollEvent.call(this);
    }

    normalizeInt(num) {
        return Math.round(num * 10) / 10;
    }

    setupScrollEvent() {
        const self = this;

        window.addEventListener('scroll', function() {
            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;

        if ((window.outerHeight + scrollY) < self.settings.offset.top) return;

        for (const layer in self.settings.layers) {
            if ((self.settings.layers).hasOwnProperty(layer)) {

                let movement = -self.normalizeInt((((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() {

        // Ensure DOM has loaded
        window.addEventListener('load', function() {

            let instances = [];

            // 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)) {
                        instances.push(new this(panels[panel]));
                    }
                }
            }

            if (panels.length > 0) {
                window.parallaxInstance = instances;
            }
        }.bind(this));

    }
}
Parallax.initialize();

html,
body {
  margin: 0;
  padding: 0;
}
section[data-parallax] {
  height: 400px;
  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 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: 200vh;"></section>
    </body>
</html>

​

我的问题主要是当我试图从页面顶部移动视差元素时，因为现在可以看到移动速度较慢的层的顶部。

我认为我需要做的是根据深度调整这些层的大小，例如，深度值为0.10的层非常慢。

所以我需要让这些层看起来像下图所示的那样显示在右边，就像它们当前在左边显示的位置一样？

​

我不断地回到这个问题上来，几周来一直在尝试让它工作，断断续续。我真的不知道我需要做什么来解决这个问题，我相信这是一些简单的数学运算，计算出层需要多大才能在用户滚动时显示边缘。

Answer 1

我会尝试回答，即使我不确定我的问题是否正确)

关于深度:你的代码已经有了深度功能，所以你只需要从数据深度属性中读取深度，就像这样：

  defaultDepth: node.dataset.depth

而且你的图片具有相同的高度，所以对于这些特定的图片，你不必应用任何填充顶部或从顶部的一些其他偏移量，如在右边的图片。应用深度就足够了，除非你有其他的图片。

下面是我在深度应用后得到的结果：http://plnkr.co/edit/bNPzXFg83UtGF9PFWCQc?p=preview