聚合物中的视差答案

【问题标题】：Parallax in Polymer聚合物中的视差
【发布时间】：2017-06-27 20:42:03
【问题描述】：

我正在使用 Polymer 处理视差。我阅读了官方网站上的文档，并将其放在我的项目中。但不起作用。这是我的代码：

<dom-module id="ingeview-home">
  <template>
    <style>
      :host {
        display: block;
        color: var(--text-color-dark);
        padding: 20px 10%;
      }

      parallax-element {
        height: 100vh;
      }
      parallax-element > * {
        min-height: 500px;
      }
      parallax-layers {
        min-height: 500px;
      }
    </style>

    <h1>HOME</h1>

    <parallax-element>
      <parallax-layers>
        <div depth="0">
          <image src=../images/pincel.png></image>
        <div>
      </parallax-layers>
      <parallax-layers style="z-index: -1;">
        <div depth="-0.5">
         <image src=../images/raya.png></image>
        <div>
        <div>
         <image src=../images/pincel.png></image>
        <div>
      </parallax-layers>
      <parallax-layers style="z-index: 1;">
        <div depth="0.2">
         <image src=../images/raya.png></image>
        <div>
      </parallax-layers>
    </parallax-element>
  </template>

  <script>

    class IngeViewHome extends Polymer.Element {
      static get is() { return 'ingeview-home'; }
    }

    window.customElements.define(IngeViewHome.is, IngeViewHome);
  </script>
</dom-module>

我搜索了几个小时，但找不到为什么什么都没有出现

如果你能解释它是如何工作的，我将不胜感激

【问题讨论】：

我遇到了同样的问题。或许你可以将问题发布到作者的 GitHub webcomponents.org/element/vguillou/parallax-element

标签： polymer parallax

【解决方案1】：

我发现一些现有的 Polymer 视差 Web 组件与 Polymer 2.0 不兼容，因此我决定自己实现它。我发现本教程是一个很好的起点：https://www.w3schools.com/howto/howto_css_parallax.asp

希望对你有所帮助。

【讨论】：

【解决方案2】：

我为 Polymer 2.0 创建了一个新的视差 Web 组件并于昨天发布：https://www.webcomponents.org/element/watsonlogic-software/watsonlogic-parallax

如果有任何问题，请随时贡献或让我知道（这是我的第一个组件）。

【讨论】：