I'm working in a parallax with Polymer. I read the documentation in the official web site, and put this on my project. But doesnt works. This is my code:
<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>
I'm search by a few hours, but cant find why dont appear anything
If you can explain how it works, I'll be grateful
