├── .gitignore
├── LICENSE.md
├── README.md
├── bower.json
├── demo
    ├── demo-dom-repeat.html
    ├── demo-hello-world.html
    ├── demo-overview.html
    ├── demo-paper-scroll-header-panel.html
    ├── demo-playstore.html
    ├── demo-real-world.html
    ├── demo-scroll-panel-element.html
    ├── demo-successive-parallax-layers.html
    ├── index.html
    └── res
    │   ├── doge.jpg
    │   ├── huelgoat.jpg
    │   ├── ile-vierge.jpg
    │   ├── meneham.jpg
    │   ├── parallax.jpg
    │   ├── ploumanach.jpg
    │   ├── saint-michel.jpg
    │   ├── wikipedia.png
    │   └── yeun-elez.jpg
├── index.html
├── parallax-element.html
├── parallax-layers.html
└── parallax-scroller-behavior.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *.db
2 | bower_components


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2016 Vincent Guillou
3 | 
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5 | 
6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7 | 
8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <parallax-element>
 2 | _A Polymer element allowing to declaratively create simple vertical or horizontal parallax scrolling effects. It features built-in deactivation of the effect in browsers (IE) that do not fully support the CSS transformations leveraged to achieve the parallax scrolling._
 3 | 
 4 | Please refer to the <a href="https://vguillou.github.io/webcomponents/parallax-element/">component page</a> for more informations.
 5 | 
 6 | Demos available <a href="https://vguillou.github.io/webcomponents/parallax-element/demo">here</a>.
 7 | 
 8 | ## Browser Support
 9 | 
10 | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_64x64.png) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_64x64.png) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_64x64.png) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_64x64.png) | ![IE](https://github.com/alrra/browser-logos/blob/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_64x64.png) | ![Edge](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_64x64.png)
11 | :---:|:---:|:---:|:---:|:---:|:---:|
12 | ✔  | ✔ (flattened rendering on Android) | ✔ | ✔ | ✘ (flattened rendering) | ✔ |
13 | 
14 | [Versions match Polymer compatibility](https://www.polymer-project.org/1.0/resources/compatibility.html)
15 | 
16 | ## License
17 | 
18 | [MIT License](https://github.com/vguillou/parallax-element/blob/master/LICENSE.md)
19 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "parallax-element",
 3 |   "version": "1.0.1",
 4 |   "authors": [
 5 |     "Vincent Guillou <vin.guillou@gmail.com>"
 6 |   ],
 7 |   "description": "A Polymer element allowing to declaratively create simple vertical or horizontal parallax scrolling effects. It features built-in deactivation of the effect in browsers (IE) that do not fully support the CSS transformations leveraged to achieve the parallax scrolling.",
 8 |   "keywords": [
 9 |     "web-components", "web-component", "web components", "web component", "polymer", "parallax", "scrolling", "perspective"
10 |   ],
11 |   "main": "parallax-element.html",
12 |   "license": "MIT",
13 |   "ignore": [
14 |     "**/.*",
15 |     "node_modules",
16 |     "bower_components",
17 |     "test/temp",
18 |     "test/bower_components"
19 |   ],
20 |   "dependencies": {
21 |     "polymer": "Polymer/polymer#^1.2.0",
22 |     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
23 |   },
24 |   "devDependencies": {
25 |     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
26 |     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
27 |     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
28 |     "iron-image": "PolymerElements/iron-image#^1.0.0",
29 |     "paper-button": "PolymerElements/paper-button#^1.0.0",
30 |     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
31 |     "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
32 |     "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
33 |     "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#^1.0.0"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/demo/demo-dom-repeat.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>"dom-repeat" demo</title>
  5 |   <meta charset="utf-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8 |   
  9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 10 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 11 |   <link rel="import" href="../parallax-element.html">
 12 | 
 13 |    <style is="custom-style">
 14 |      body, html {
 15 |       overflow: hidden;
 16 |       font: 200% / 1.5 Arial;
 17 |       margin: 0;
 18 |       padding: 0;
 19 |     }
 20 | 
 21 |     parallax-element {
 22 |       height: 100vh;
 23 |     }
 24 |   
 25 |     parallax-layers {
 26 |       min-height: 400px;
 27 |       z-index: -1;
 28 |     }
 29 | 
 30 |     .parallax-layer,
 31 |     .no-parallax {
 32 |       @apply(--layout-vertical);
 33 |       @apply(--layout-center-center);
 34 |     }
 35 | 
 36 |     .parallax-layer {
 37 |       background-image: url("res/doge.jpg");
 38 |       background-position: 50% 50%;
 39 |       background-repeat: no-repeat;
 40 |       background-size: cover;
 41 |       color: white;
 42 |     }
 43 |   
 44 |     .no-parallax {
 45 |       min-height: 500px;
 46 |       z-index: 0;
 47 |       background: white;
 48 |       border-style: solid;
 49 |       border-width: 5px;
 50 |       border-color: black;
 51 |     }
 52 |   </style> 
 53 | </head>
 54 | 
 55 | <body unresolved>
 56 | 
 57 |   <template is="dom-bind" id="demo">
 58 | 
 59 |     <parallax-element>
 60 |       <template is="dom-repeat" items="{{sections}}">
 61 | 
 62 |         <template is="dom-if" if="{{isNormalSection(item)}}">
 63 |           <div class="no-parallax">
 64 |             [[item.label]]
 65 |           </div>
 66 |         </template>
 67 | 
 68 |        <template is="dom-if" if="{{!isNormalSection(item)}}">
 69 |           <parallax-layers style$="{{computeSectionZindex(item)}}">
 70 |             <div depth$="[[item.depth]]" class="parallax-layer fullbleed">
 71 |               [[item.label]]
 72 |             </div>
 73 |           </parallax-layers>
 74 |         </template>
 75 | 
 76 |       </template>
 77 |     </parallax-element>
 78 | 
 79 |   </template>
 80 |   
 81 |   <script>
 82 |     var demo = document.querySelector('#demo');
 83 |     demo.sections = [
 84 |       {label:'Normal div', depth:0},
 85 |       {label:'wow parallax', depth:-0.3},
 86 |       {label:'much normal div', depth:0},
 87 |       {label:'yum foreground', depth:0.2},
 88 |       {label:'so normal div', depth:0},
 89 |       {label:'very parallax', depth:-1},
 90 |       {label:'many normal div', depth:0}
 91 |     ];
 92 |     demo.isNormalSection = function(section) {
 93 |       return section.depth === 0;
 94 |     };
 95 |     demo.computeSectionZindex = function(section) {
 96 |       return 'z-index:' + (section.depth <= 0 ? -1 : 1) + ';';
 97 |     };
 98 |   </script>
 99 | 
100 | </body>
101 | </html>


--------------------------------------------------------------------------------
/demo/demo-hello-world.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>"parallax-element" hello world</title>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8 |   
 9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
11 |   <link rel="import" href="../parallax-element.html">
12 | 
13 |    <style is="custom-style">
14 |      body, html {
15 |       overflow: hidden;
16 |       font: 200% / 1.5 Arial;
17 |       margin: 0;
18 |       padding: 0;
19 |     }
20 |     
21 |     parallax-element {
22 |       height: 100vh;
23 |     }
24 | 
25 |     parallax-layers {
26 |       min-height: 400px;
27 |       z-index: -1;
28 |     }
29 | 
30 |     .deep-layer,
31 |     .no-parallax {
32 |       @apply(--layout-vertical);
33 |       @apply(--layout-center);
34 |     }
35 | 
36 |     .deep-layer {
37 |       background-image: url("res/parallax.jpg");
38 |       background-position: 50% 50%;
39 |       background-repeat: no-repeat;
40 |       background-size: cover;
41 |       color: white;
42 |       @apply(--layout-end-justified);
43 |     }
44 |   
45 |     .no-parallax {
46 |       min-height: 2500px;
47 |       width: 100vw;
48 |       z-index: 0;
49 |       background: linear-gradient(white, grey);
50 |     }
51 |   </style> 
52 | </head>
53 | 
54 | <body unresolved>
55 | 
56 |   <parallax-element>
57 |     <parallax-layers>
58 |       <div depth="-0.5" class="deep-layer fullbleed">
59 |         Hello
60 |       </div>
61 |     </parallax-layers>
62 |     <div class="no-parallax">
63 |       World
64 |     </div>
65 |   </parallax-element>
66 |   
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/demo/demo-overview.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>parallax-element overview demo</title>
  5 |   <meta charset="utf-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9 |   <meta name="msapplication-TileColor" content="#000">
 10 |   <meta name="theme-color" content="#000">
 11 | 
 12 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 13 |   
 14 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 15 |   <link rel="import" href="../../paper-button/paper-button.html">
 16 |   <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
 17 |   <link rel="import" href="../parallax-element.html">
 18 | 
 19 |   <style is="custom-style">
 20 |   /* ----------------------- Demo styles ----------------------- */
 21 |   
 22 |   body, html {
 23 |     overflow: hidden;
 24 |     font: 100% / 1.5 Arial;
 25 |   }
 26 |   
 27 |   * {
 28 |     margin:0;
 29 |     padding:0;
 30 |   }
 31 |   
 32 |   p {
 33 |     font-size: 1.3em;
 34 |     margin: 1.3em;
 35 |   }
 36 | 
 37 |   p.white {
 38 |     color: #FFF;
 39 |     text-shadow: 2px 3px 11px rgba(0, 0, 0, 1);
 40 |   }
 41 |   p.red {
 42 |     color: red;
 43 |     margin-bottom: 40px;
 44 |   }
 45 | 
 46 |   paper-button {
 47 |     background: rgb(15, 157, 88);
 48 |     color: #FFF;
 49 |   }
 50 | 
 51 |   div.option {
 52 |     width: 100%;
 53 |     @apply(--layout-horizontal);
 54 |   }
 55 | 
 56 |   .layout.horizontl {
 57 |     @apply(--layout-horizontal);
 58 |   }
 59 | 
 60 |   .layout.vertical {
 61 |     @apply(--layout-vertical);
 62 |   }
 63 | 
 64 |   .layout.center-center {
 65 |     @apply(--layout-center-center);
 66 |   }
 67 | 
 68 |   .fit {
 69 |     @apply(--layout-fit);
 70 |   }
 71 |   
 72 |   /* ----------------------- Parallax styles ---------------------- */
 73 |   
 74 |   parallax-element {
 75 |     height: 100vh;
 76 |   }
 77 | 
 78 |   /***** Sizing for vertical and horizontal mode *****/
 79 |   /***** MUST define min-height for 'normal' (vertical) mode, and min-width for horizontal mode *****/
 80 | 
 81 |   parallax-element:not([horizontal]) > *.base {
 82 |     min-height: 700px;
 83 |   }
 84 | 
 85 |   parallax-element:not([horizontal]) > *.parallax {
 86 |     min-height: 550px;
 87 |   }
 88 |   
 89 |   parallax-element[horizontal] > *.base {
 90 |     min-width: 700px;
 91 |   }
 92 | 
 93 |   parallax-element[horizontal] > *.parallax {
 94 |     min-width: 550px;
 95 |   }
 96 | 
 97 | 
 98 |   /***** Group styling and stacking *****/
 99 | 
100 |   .orangeLayer {
101 |     border-style: solid;
102 |     border-width: 5px;
103 |     border-color: blue;
104 |     background: linear-gradient(yellow, red);
105 |   }
106 |     
107 |   .greenLayer {
108 |     border-style: solid;
109 |     border-width: 5px;
110 |     border-color: red;
111 |     background: linear-gradient(lightblue, yellow);
112 |   }
113 |   
114 |   .greenBorderLayer {
115 |     border-style: solid;
116 |     border-width: 5px;
117 |     border-color: green;
118 |   }
119 |   
120 |   .redBorderLayer {
121 |     border-style: solid;
122 |     border-width: 5px;
123 |     border-color: red;
124 |   }
125 | 
126 |   .base {
127 |     z-index: 1;
128 |     background: rgba(255,255,255,1);
129 |     border-style: solid;
130 |     border-width: 5px;
131 |     border-color: black;
132 |   }
133 | 
134 |   .base.transparent {
135 |     background: rgba(255,255,255,0.7);
136 |     border-color: rgba(0,0,0,0.4);
137 |   }
138 | 
139 |   parallax-layers > .imageLayer {
140 |     background-position: 50% 50%;
141 |     background-image: url("res/parallax.jpg");
142 |     background-repeat: no-repeat;
143 |     background-size: cover;
144 |     z-index: -2;
145 |   }
146 |   </style>
147 | </head>
148 | 
149 | <body unresolved>
150 | 
151 |   <template is="dom-bind" id="demo">
152 |   
153 |   <parallax-element activate="[[demoActivate]]" horizontal="[[demoHorizontal]]">
154 | 
155 |     <parallax-layers class="parallax" style="z-index: -1;">
156 |       <div depth="-0.75" class$="[[computeClass('fullbleed', demoFullbleed, 'imageLayer fit')]]"></div>
157 |       <div depth="-0.50" class$="[[computeClass('fullbleed', demoFullbleed, 'vertical center-center layout fit')]]">
158 |         <p class="white">The very first parallax-layers is automatically sticky</p>
159 |       </div>
160 |     </parallax-layers>
161 |     
162 |     <div class$="[[computeClass('transparent', demoTransparent, 'base')]]">
163 |       <div class$="[[computeClass('fullbleed', demoFullbleed, 'vertical center-center layout fit')]]">
164 |         <div class="vertical layout" style="padding: 5px;">
165 |           <p class="red">[[demoCompatibleMessage]]</p>
166 |           <h4>parallax-element</h4>
167 |           <div class="option">
168 |             <paper-toggle-button checked="{{demoActivate}}"></paper-toggle-button>
169 |             <p>Effect activated</p>
170 |           </div>
171 |           <div class="option">
172 |             <paper-toggle-button checked="{{demoHorizontal}}"></paper-toggle-button>
173 |             <p>Horizontal</p>
174 |           </div>
175 |           
176 |           <h4>layers</h4>
177 |           <div class="option">
178 |             <paper-toggle-button checked="{{demoFullbleed}}"></paper-toggle-button>
179 |             <p>Full bleed layers</p>
180 |           </div>
181 |           
182 |           <h4>others</h4>
183 |           <div class="option">
184 |             <paper-toggle-button checked="{{demoTransparent}}"></paper-toggle-button>
185 |             <p>Transparent base groups</p>
186 |           </div>
187 |         </div>
188 |       </div>
189 |     </div>
190 | 
191 |     <parallax-layers class="parallax" style="z-index: 2;">
192 |       <div depth="0.1" class$="[[computeClass('fullbleed', demoFullbleed, 'orangeLayer vertical center-center layout fit')]]">
193 |         <p style="top:60%;">parallax demo</p>
194 |       </div>
195 |       <div depth="0.2" class$="[[computeClass('fullbleed', demoFullbleed, 'greenBorderLayer vertical center-center layout fit')]]">
196 |         <p style="top:49%;">simple foreground</p>
197 |       </div>
198 |       <div depth="0.3" class$="[[computeClass('fullbleed', demoFullbleed, 'redBorderLayer vertical center-center layout fit')]]">
199 |         <p style="top:45%;">This is a</p>
200 |       </div>
201 |       <div depth="0">
202 |         <p class="white">And I'm scrolling normally...</p>
203 |       </div>
204 |     </parallax-layers>
205 | 
206 |     <div class$="[[computeClass('transparent', demoTransparent, 'base vertical center-center layout')]]">
207 |       <p>A simple base group</p>
208 |     </div>
209 |     
210 |     <parallax-layers class="parallax" style="z-index: -2;">
211 |       <div depth="-0.3" class$="[[computeClass('fullbleed', demoFullbleed, 'greenLayer vertical center-center layout fit')]]">
212 |         <p>This is a</p>
213 |       </div>
214 |       <div depth="-0.2" class$="[[computeClass('fullbleed', demoFullbleed, 'redBorderLayer vertical center-center layout fit')]]">
215 |         <p>simple background</p>
216 |       </div>
217 |       <div depth="-0.1" class$="[[computeClass('fullbleed', demoFullbleed, 'greenBorderLayer vertical center-center layout fit')]]">
218 |         <p>parallax demo</p>
219 |       </div>
220 |       <div depth="0">
221 |         <p class="white">And I'm scrolling normallly as well...</p>
222 |       </div>
223 |     </parallax-layers>
224 | 
225 |     <div class$="[[computeClass('transparent', demoTransparent, 'base vertical center-center layout')]]">
226 |       <p>A simple base group</p>
227 |     </div>
228 |     
229 |     <parallax-layers class="parallax" style="z-index: -100;">
230 |       <div depth="-5" class$="[[computeClass('fullbleed', demoFullbleed, 'imageLayer vertical center-center layout fit')]]">
231 |         <p class="white">Very deep background layer.</p>
232 |         <p class="white">Somewhat reminiscent of fixed background scrolling, but working on mobile.</p>
233 |       </div>
234 |     </parallax-layers>
235 |     
236 |     <div class$="[[computeClass('transparent', demoTransparent, 'base vertical center-center layout')]]">
237 |       <p>Another base group</p>
238 |     </div>
239 |     
240 |     <parallax-layers id="dynamicGroup" class="parallax">
241 |       <div depth="-0.5" class$="[[computeClass('fullbleed', demoFullbleed, 'greenLayer vertical center-center layout fit')]]">
242 |         <p>Another background layer</p>
243 |         <paper-button onclick="addNewLayer()" hidden$="[[demoNewLayerAdded]]">Programmatically add a new layer</paper-button>
244 |       </div>
245 |     </parallax-layers>
246 |     
247 |     <div class$="[[computeClass('transparent', demoTransparent, 'base vertical center-center layout')]]">
248 |       <p>Yet another base group</p>
249 |     </div>
250 |   
251 |   </parallax-element>
252 | 
253 |   </template>
254 | 
255 |   <script>
256 |     var demo = document.querySelector('#demo');
257 |     demo.demoTransparent = demo.demoHorizontal = demo.demoNewLayerAdded = false;
258 |     demo.demoFullbleed = true;
259 | 
260 |     demo.computeClass = function(className, flag, otherClasses) {
261 |       return (flag ? className : '') + ' ' + otherClasses;
262 |     };
263 | 
264 |     demo.addEventListener('dom-change', function() {
265 |       var browserCompatible = document.querySelector('parallax-element').isBrowserCompatible;
266 |       demo.demoActivate = browserCompatible;
267 |       demo.demoCompatibleMessage = browserCompatible
268 |         ? 'Hooray, your browser is compatible! (^‿^)'
269 |         : 'Ouch, your browser is not compatible... (T︵T) It\'s ok, the element takes care of that, just don\'t force activation!';
270 |     });
271 | 
272 |     function addNewLayer() {
273 |       demo.demoNewLayerAdded = !demo.demoNewLayerAdded;
274 |       var newLayer = document.createElement('div');
275 |       newLayer.setAttribute('id', 'newLayer');
276 |       newLayer.setAttribute('depth', -0.1);
277 |       newLayer.setAttribute('class', 'redBorderLayer vertical center-center layout fullbleed');
278 |       newLayer.setAttribute('style', 'background: rgba(255,255,255,0.4);');
279 |       newLayer.innerHTML = '<p>Wow, I\'m the new layer!</p>'
280 |                          + '<paper-button onclick="changeNewLayerDepth()">Change my depth</paper-button>'
281 |                          + '<paper-button onclick="removeNewLayer()">Remove me</paper-button>';
282 | 
283 |       var dynamicGroup = document.querySelector('#dynamicGroup');
284 |       // Using Polymer's DOM api to insure that the layer is
285 |       // placed in the light DOM (when using shady DOM)
286 |       Polymer.dom(dynamicGroup).appendChild(newLayer);
287 |     }
288 | 
289 |     function removeNewLayer() {
290 |       demo.demoNewLayerAdded = !demo.demoNewLayerAdded;
291 |       var dynamicGroup = document.querySelector('#dynamicGroup');
292 |       var newLayer = document.querySelector('#newLayer');
293 |       Polymer.dom(dynamicGroup).removeChild(newLayer);
294 |     }
295 | 
296 |     function changeNewLayerDepth() {
297 |       var newLayer = document.querySelector('#newLayer');
298 |       var depth = newLayer.getAttribute('depth');
299 |       newLayer.setAttribute('depth', depth > -0.5 ? depth-0.1 : -0.1);
300 |     }
301 |   </script>
302 | </body>
303 | </html>


--------------------------------------------------------------------------------
/demo/demo-paper-scroll-header-panel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>"paper-scroll-header-panel" demo</title>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8 |   
 9 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |   <link rel="import" href="demo-scroll-panel-element.html">
11 | 
12 |    <style>
13 |      body, html {
14 |       overflow: hidden;
15 |       margin: 0;
16 |       padding: 0;
17 |     }
18 | 
19 |     demo-scroll-panel-element {
20 |       position: absolute;
21 |       top: 0;
22 |       right: 0;
23 |       bottom: 0;
24 |       left: 0;
25 |     }
26 |   </style> 
27 | </head>
28 | 
29 | <body unresolved>
30 | 
31 |   <demo-scroll-panel-element></demo-scroll-panel-element>
32 | 
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/demo/demo-playstore.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>"parallax-element" Google Play Store v5 app-page-like effect</title>
  5 |   <meta charset="utf-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9 |   <meta name="msapplication-TileColor" content="#689C38">
 10 |   <meta name="theme-color" content="#689C38">
 11 |   
 12 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 13 | 
 14 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 15 |   <link rel="import" href="../../iron-icons/iron-icons.html">
 16 |   <link rel="import" href="../../paper-button/paper-button.html">
 17 |   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
 18 |   <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
 19 |   <link rel="import" href="../parallax-element.html">
 20 | 
 21 |   <style is="custom-style">
 22 | 
 23 | 	/* ----------------------- Parallax styles ---------------------- */
 24 |     
 25 |   parallax-element {
 26 |     height: 100vh;
 27 |   }
 28 | 
 29 | 	#groupDesc {
 30 | 	  min-height: 2000px;
 31 | 	  z-index: 0;
 32 | 	}
 33 |   
 34 | 	#groupLogo {
 35 | 	  min-height: 200px;
 36 | 	  z-index: -1;
 37 | 	}
 38 | 
 39 | 	
 40 | 	/* ----------------------- Demo styles ----------------------- */
 41 | 	
 42 | 	body {
 43 | 	  font-family: sans-serif;
 44 |     -webkit-user-select: none;
 45 |     -moz-user-select: none;
 46 |     -ms-user-select: none;
 47 |     user-select: none;
 48 |     -webkit-tap-highlight-color: rgba(0,0,0,0);
 49 |     -webkit-touch-callout: none;
 50 | 	  margin: 0;
 51 | 	  padding: 0;
 52 |     overflow: hidden;
 53 |     font: 100% / 1.5 Arial;
 54 | 	}
 55 | 
 56 |   .demo-container {
 57 |     margin: 0 auto;
 58 |     max-width: 550px;
 59 |     position: relative;
 60 |   }
 61 | 
 62 |   paper-toolbar {
 63 |     position: absolute;
 64 |     top: 0;
 65 |     right: 0;
 66 |     left: 0;
 67 |     z-index: 10;
 68 |     height: 60px;
 69 |     line-height: 60px;
 70 |     font-size: 18px;
 71 |     font-weight: bold;
 72 |     --paper-toolbar-background: rgb(104, 159, 56);
 73 |     color: #FFF;
 74 |   }
 75 | 
 76 |   paper-icon-button {
 77 |     position: absolute;
 78 |     top: 10px;
 79 |     color: #FFF;
 80 |     z-index: 20;
 81 |   }
 82 |     
 83 | 	.toolbarTitle {
 84 |     font-size: 110%;
 85 |     margin-left: 40px;
 86 |   }
 87 | 	
 88 |   .content {
 89 |     top: 0;
 90 |     right: 0;
 91 |     bottom: 0;
 92 |     left: 0;
 93 |   }
 94 | 	
 95 | 	.logoLayer {
 96 | 	  background-repeat: no-repeat;
 97 | 	  background-size: cover;
 98 | 	  background-image: url("res/parallax.jpg");
 99 |     @apply(--layout-horizontal);
100 |     @apply(--layout-center-center);
101 | 	}
102 | 	 
103 | 	.descLayer {
104 |     height: 100%;
105 |     background: linear-gradient(white, grey);
106 |     padding: 1em;
107 |   }
108 | 
109 |   .buttonContainer {
110 |     @apply(--layout-horizontal);
111 |   }
112 |   
113 | 	.appTitle {
114 |     color: #FFF;
115 |     font-size: 175%;
116 |     text-align: center;
117 |   }
118 | 
119 |   .flex {
120 |     @apply(--layout-flex);
121 |   }
122 | 
123 |   .fit {
124 |     @apply(--layout-fit);
125 |   }
126 | </style> 
127 | </head>
128 | 
129 | <body unresolved>
130 |   <div class="demo-container">
131 |     <paper-toolbar>
132 |       <div class="toolbarTitle flex">parallax-element</div>
133 |     </paper-toolbar>
134 | 
135 |   	<parallax-element>
136 |   	
137 |   		<parallax-layers id="groupLogo">
138 |   			<div depth="-0.6" class="logoLayer fullbleed">
139 |   				<div class="appTitle">Parallax Element</div>
140 |   			</div>
141 |   		</parallax-layers>
142 |   		
143 |   		<div id="groupDesc" class="descLayer" class="fit">
144 |   			<div style="float: left; display: inline-block; height: 64px; width: 64px; border-radius: 20%; background: #7E57C2; line-height: 64px; font-size: 30px; color: #FFF; text-align: center; margin: 12px 12px 0 0;">P</div>
145 |   			<div style="font-size: 22px; padding: 0 0 8px;">parallax-element</div>
146 |   			<div style="font-size: 14px; margin-bottom: 20px;">A Polymer element allowing to declaratively create simple vertical or horizontal parallax scrolling effects.</div>
147 |   				
148 |   			<div class="buttonContainer flex" style="margin-bottom: 20px;">
149 |   				<paper-button raised class="flex" onclick="window.location.href='https://github.com/vguillou/parallax-element'">GitHub</paper-button>
150 |   				<paper-button raised class="flex" style="background: rgb(104, 159, 56); color: #FFF;" onclick="window.location.href='index.html'">Demos</paper-button>
151 |   			</div>
152 |   			<hr>
153 |   			<div class="flex" style="font-size: 14px; text-align: center; margin-top: 20px;">Fugit adolescens vis et, ei graeci forensibus sed.</div>
154 |   			<div class="flex" style="font-size: 14px; text-align: center; margin-bottom: 20px;">Convenire definiebas scriptorem eu cum. Sit dolor dicunt consectetuer no. Ea duis bonorum nec, falli paulo aliquid ei eum.</div>
155 |   			<hr>
156 |   			<div style="margin-top: 20px;">
157 |   				Usu eu novum principes, vel quodsi aliquip ea.
158 |   				Has at minim mucius aliquam, est id tempor laoreet.
159 |   				Pro saepe pertinax ei, ad pri animal labores suscipiantur.
160 |   				Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.
161 |   				Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.
162 |   				Id nam odio natum malorum, tibique copiosae expetenda mel ea.
163 |   				Cu mei vide viris gloriatur, at populo eripuit sit.
164 |   				Modus commodo minimum eum te, vero utinam assueverit per eu.
165 |   			</div>
166 |   		</div>
167 |   			
168 |   	</parallax-element>
169 | 
170 |     <paper-icon-button icon="arrow-back" style="left: 8px;"></paper-icon-button>
171 |     <paper-icon-button icon="search" style="right: 8px;"></paper-icon-button>
172 |   </div>
173 | <script>
174 |   window.addEventListener('WebComponentsReady', function() {
175 |     var parallaxElement = Polymer.dom(document).querySelector('parallax-element');
176 |     var toolbarStyle = Polymer.dom(document).querySelector('paper-toolbar').style;
177 |     var alpha = toolbarStyle.opacity = 0;
178 | 
179 |     parallaxElement.addEventListener('scroll', function (e) {
180 |       var logoHeight = Polymer.dom(document).querySelector('#groupLogo').offsetHeight;
181 |       var scrollTop = parallaxElement.scrollTop;
182 |       var newAlpha = 1 - Math.max(0, (logoHeight - scrollTop) / logoHeight);
183 |       if (newAlpha != alpha) {
184 |         alpha = newAlpha;
185 |         toolbarStyle.opacity = alpha;
186 |       }
187 |     });
188 |   });
189 | </script>
190 | 	
191 | </body>
192 | </html>
193 | 


--------------------------------------------------------------------------------
/demo/demo-real-world.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Breizh</title>
  5 |   <meta charset="utf-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9 |   <meta name="msapplication-TileColor" content="#000">
 10 |   <meta name="theme-color" content="#000">
 11 | 
 12 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 13 |   
 14 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 15 |   <link rel="import" href="../../iron-image/iron-image.html">
 16 |   <link rel="import" href="../parallax-element.html">
 17 | 
 18 |   <style is="custom-style">
 19 |     /* ----------------------- Demo styles ----------------------- */
 20 |     
 21 |     body, html {
 22 |       overflow: hidden;
 23 |       font: 100% / 1.5 Arial;
 24 |     }
 25 |     
 26 |     * {
 27 |       margin:0;
 28 |       padding:0;
 29 |     }
 30 |     
 31 |     p {
 32 |       font-size: 1em;
 33 |       margin: 0.5em 1em;
 34 |     }
 35 | 
 36 |     .titleContainer {
 37 |       @apply(--layout-vertical);
 38 |       @apply(--layout-center-center);
 39 |     }
 40 | 
 41 |     .title {
 42 |       text-decoration: none;
 43 |       color: white;
 44 |       font-weight: bold;
 45 |       font-size: 2em;
 46 |       margin: 1em;
 47 |     }
 48 | 
 49 |     .subtitle {
 50 |       text-decoration: none;
 51 |       color: black;
 52 |       font-weight: bold;
 53 |     }
 54 |     
 55 |     /* ----------------------- Parallax styles ---------------------- */
 56 |     
 57 |     parallax-element {
 58 |       height: 100vh;
 59 |     }
 60 | 
 61 |     div.baseGroup {
 62 |       z-index: 1;
 63 |       min-height: 700px;
 64 |       background: white;
 65 |       box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
 66 |       @apply(--layout-vertical);
 67 |       @apply(--layout-center-center);
 68 |     }
 69 | 
 70 |     div.baseGroup.footer {
 71 |       min-height: 400px;
 72 |       @apply(--layout-horizontal);
 73 |       @apply(--layout-center);
 74 |       @apply(--layout-around-justified);
 75 |       @apply(--layout-flex);
 76 |     }
 77 | 
 78 |     parallax-layers[id^="img"] {
 79 |       z-index: -1;
 80 |       min-height: 600px;
 81 |     }
 82 | 
 83 |     parallax-layers[id^="img"] > .background {
 84 |       background-repeat: no-repeat;
 85 |       background-size: cover;
 86 |       z-index: -2;
 87 |     }
 88 |     
 89 |     parallax-layers[id^="img"] p {
 90 |       position: absolute;
 91 |       bottom: 0;
 92 |       font-size: 1.5em;
 93 |       color: white;
 94 |       text-shadow: 2px -2px 11px rgba(0, 0, 0, 1);
 95 |     }
 96 | 
 97 |     #imgHeader > .background {
 98 |       background-position: 30% 95% !important;
 99 |       background-color: #009688;
100 |     }
101 |     
102 |     #img1 > .background {
103 |       background-position: 90% 40% !important;
104 |       background-color: #795548;
105 |     }
106 |     
107 |     #img2 > .background {
108 |       background-position: 70% 40% !important;
109 |       background-color: #00BCD4;
110 |     }
111 |     #img3 > .background {
112 |       background-position: 35% 50% !important;
113 |       background-color: #33691E;
114 |     }
115 |     #img4 > .background {
116 |       background-position: 55% 50% !important;
117 |       background-color: #EF9A9A;
118 |     }
119 |     #img5 > .background {
120 |       background-position: 50% 55% !important;
121 |       background-color: #4CAF50;
122 |     }
123 |   </style>
124 | </head>
125 | 
126 | <body unresolved>
127 | 
128 |   <parallax-element>
129 | 
130 |     <parallax-layers id="imgHeader" style="z-index: -1;">
131 |       <iron-image depth="-0.6" sizing="cover" preload fade src="res/meneham.jpg" class="background fullbleed"></iron-image>
132 |       <div depth="-0.4" class="titleContainer fullbleed">
133 |         <a href="https://en.wikipedia.org/wiki/Brittany" title="Breizh Bretagne Britanny" class="title">Breizh / Bretagne / Britanny</a>
134 |       </div>
135 |       <p>Meneham</p>
136 |     </parallax-layers>
137 |     
138 |     <div class="baseGroup">
139 | 
140 |       <!-- demo content (wikipedia extract), do not worry about this -->
141 |       <p><b>Brittany</b> (<span class="nowrap"><span class="IPA nopopups"><a href="https://en.wikipedia.org/wiki/Help:IPA_for_English" title="Help:IPA for English">/<span style="border-bottom:1px dotted"><span title="/ˈ/ primary stress follows">ˈ</span><span title="'b' in 'buy'">b</span><span title="'r' in 'rye'">r</span><span title="/ɪ/ short 'i' in 'bid'">ɪ</span><span title="'t' in 'tie'">t</span><span title="/ə/ 'a' in 'about'">ə</span><span title="'n' in 'no'">n</span><span title="/ɪ/ short 'i' in 'bid'">ɪ</span></span>/</a></span></span>; French: <span lang="fr" xml:lang="fr"><i>Bretagne</i></span> <span title="Representation in the International Phonetic Alphabet (IPA)" class="IPA"><a href="https://en.wikipedia.org/wiki/Help:IPA_for_French" title="Help:IPA for French">[bʁə.taɲ]</a></span><small class="nowrap metadata">&nbsp;(<a href="https://en.wikipedia.org/wiki/File:Fr-Bretagne.ogg" title="File:Fr-Bretagne.ogg"><a href="//upload.wikimedia.orghttps://en.wikipedia.org/wikipedia/commons/1/1b/Fr-Bretagne.ogg" class="internal" title="Fr-Bretagne.ogg">listen</a>)</small>; <a href="https://en.wikipedia.org/wiki/Breton_language" title="Breton language">Breton</a>: <span lang="br" xml:lang="br"><i>Breizh</i></span>, pronounced <span title="Representation in the International Phonetic Alphabet (IPA)" class="IPA"><a href="https://en.wikipedia.org/wiki/Help:IPA" title="Help:IPA">[bʁɛjs]</a></span> or <span title="Representation in the International Phonetic Alphabet (IPA)" class="IPA"><a href="https://en.wikipedia.org/wiki/Help:IPA" title="Help:IPA">[bʁɛχ]</a></span>;<sup id="cite_ref-Walter_1-0" class="reference"><a href="#cite_note-Walter-1"><span>[</span>1<span>]</span></a></sup> <a href="https://en.wikipedia.org/wiki/Gallo_language" title="Gallo language">Gallo</a>: <i>Bertaèyn</i>, pronounced <span title="Representation in the International Phonetic Alphabet (IPA)" class="IPA"><a href="https://en.wikipedia.org/wiki/Help:IPA_for_French" title="Help:IPA for French">[bəʁ.taɛɲ]</a></span>) is a <a href="https://en.wikipedia.org/wiki/Cultural_region" title="Cultural region" class="mw-redirect">cultural region</a> in the north-west of <a href="https://en.wikipedia.org/wiki/France" title="France">France</a>. Covering the western part of <a href="https://en.wikipedia.org/wiki/Armorica" title="Armorica">Armorica</a>, as it was known during the period of Roman occupation, Brittany subsequently became an independent <a href="https://en.wikipedia.org/wiki/Kingdom_of_Brittany" title="Kingdom of Brittany">kingdom</a> and then a <a href="https://en.wikipedia.org/wiki/Duchy_of_Brittany" title="Duchy of Brittany">duchy</a> before being <a href="https://en.wikipedia.org/wiki/Union_between_Brittany_and_France" title="Union between Brittany and France" class="mw-redirect">united</a> with the <a href="https://en.wikipedia.org/wiki/Kingdom_of_France" title="Kingdom of France">Kingdom of France</a> in 1532 as a <a href="https://en.wikipedia.org/wiki/Province_of_France" title="Province of France" class="mw-redirect">province</a> governed as if it were a separate nation under the crown. Brittany has also been referred to as <i>Less</i>, <i>Lesser</i> or <i>Little</i> Britain (as opposed to <i><a href="https://en.wikipedia.org/wiki/Great_Britain" title="Great Britain">Great Britain</a></i>). It is bordered by the <a href="https://en.wikipedia.org/wiki/English_Channel" title="English Channel">English Channel</a> to the north, the <a href="https://en.wikipedia.org/wiki/Celtic_Sea" title="Celtic Sea">Celtic Sea</a> and the <a href="https://en.wikipedia.org/wiki/Atlantic_Ocean" title="Atlantic Ocean">Atlantic Ocean</a> to the west, and the <a href="https://en.wikipedia.org/wiki/Bay_of_Biscay" title="Bay of Biscay">Bay of Biscay</a> to the south. Its land area is 34,023&nbsp;km² <span class="nowrap">(13,136 sq mi)</span>.</p>
142 |       <!-- end of content -->
143 |       
144 |     </div>
145 | 
146 |     <parallax-layers id="img1">
147 |       <iron-image depth="-0.5" sizing="cover" preload fade src="res/yeun-elez.jpg" class="background fullbleed"></iron-image>
148 |       <p>Yeun Elez</p>
149 |     </parallax-layers>
150 | 
151 |     <div class="baseGroup">
152 | 
153 |       <!-- demo content (wikipedia extract), do not worry about this -->
154 |       <p><a href="https://en.wikipedia.org/wiki/Brittany#Prehistoric_origins" title="Prehistoric origins" class="subtitle">Prehistoric origins</a></p>
155 |       <p>Brittany has been inhabited by humans since the <a href="https://en.wikipedia.org/wiki/Lower_Paleolithic" title="Lower Paleolithic">Lower Paleolithic</a>. The first settlers were <a href="https://en.wikipedia.org/wiki/Neanderthal" title="Neanderthal">Neanderthals</a>. This population was scarce and very similar to the other Neanderthals found in the whole of Western Europe. Their only original feature was a distinct culture, called "Colombanian".<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span>[</span>12<span>]</span></a></sup> One of the oldest <a href="https://en.wikipedia.org/wiki/Hearth" title="Hearth">hearths</a> in the world has been found in <a href="https://en.wikipedia.org/wiki/Plouhinec,_Finist%C3%A8re" title="Plouhinec, Finistère">Plouhinec, Finistère</a>. It is 450,000 years old.</p>
156 |       <p>Neolithic Brittany is characterised by an important <a href="https://en.wikipedia.org/wiki/Megalithic_architectural_elements" title="Megalithic architectural elements">megalithic production</a>, and it is sometimes designated as the "core area" of megalithic culture.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span>[</span>13<span>]</span></a></sup> The oldest monuments, <a href="https://en.wikipedia.org/wiki/Cairn" title="Cairn">cairns</a>, were followed by princely tombs and <a href="https://en.wikipedia.org/wiki/Stone_row" title="Stone row">stone rows</a>. The <a href="https://en.wikipedia.org/wiki/Morbihan" title="Morbihan">Morbihan</a> <i><a href="https://en.wikipedia.org/wiki/D%C3%A9partement" title="Département" class="mw-redirect">département</a></i>, on the southern coast, comprises a large share of these structures, including the <a href="https://en.wikipedia.org/wiki/Carnac_stones" title="Carnac stones">Carnac stones</a> and the Broken Menhir of Er Grah in <a href="https://en.wikipedia.org/wiki/Locmariaquer_megaliths" title="Locmariaquer megaliths">Locmariaquer</a>, the largest single stone erected by Neolithic man.</p>
157 |       <!-- end of content -->
158 |       
159 |     </div>
160 |     
161 |     <parallax-layers id="img2">
162 |       <iron-image depth="-0.5" sizing="cover" preload fade src="res/ile-vierge.jpg" class="background fullbleed"></iron-image>
163 |       <p>Crozon</p>
164 |     </parallax-layers>
165 |     
166 |     <div class="baseGroup">
167 |       <p><a href="https://en.wikipedia.org/wiki/Brittany#Middle_Ages" title="Middle Ages" class="subtitle">Middle Ages</a></p>
168 |       <p>At the beginning of the medieval era, Brittany was divided between three kingdoms, <a href="https://en.wikipedia.org/wiki/Domnon%C3%A9e" title="Domnonée">Domnonea</a>, <a href="https://en.wikipedia.org/wiki/Cornouaille" title="Cornouaille">Cornouaille</a> and <a href="https://en.wikipedia.org/wiki/Bro%C3%ABrec" title="Broërec" class="mw-redirect">Broërec</a>. These realms eventually merged into a single state during the 9th century.<sup id="cite_ref-23" class="reference"><a href="#cite_note-23"><span>[</span>20<span>]</span></a></sup><sup id="cite_ref-autogenerated1_24-0" class="reference"><a href="#cite_note-autogenerated1-24"><span>[</span>21<span>]</span></a></sup> The unification of Brittany was carried out by <a href="https://en.wikipedia.org/wiki/Nominoe" title="Nominoe">Nominoe</a>, king between 845 and 851 and considered as the Breton <i><a href="https://en.wikipedia.org/wiki/Pater_Patriae" title="Pater Patriae">pater patriae</a></i>. His son <a href="https://en.wikipedia.org/wiki/Erispoe" title="Erispoe">Erispoe</a> secured the independence of the new kingdom of Brittany and won the <a href="https://en.wikipedia.org/wiki/Battle_of_Jengland" title="Battle of Jengland">Battle of Jengland</a> against <a href="https://en.wikipedia.org/wiki/Charles_the_Bald" title="Charles the Bald">Charles the Bald</a>. The Bretons won another war in 867, and the kingdom reached then its maximum extent: it received parts of <a href="https://en.wikipedia.org/wiki/Normandy" title="Normandy">Normandy</a>, <a href="https://en.wikipedia.org/wiki/Maine_(province_of_France)" title="Maine (province of France)" class="mw-redirect">Maine</a> and <a href="https://en.wikipedia.org/wiki/Anjou" title="Anjou">Anjou</a> and the <a href="https://en.wikipedia.org/wiki/Channel_Islands" title="Channel Islands">Channel Islands</a>.</p>
169 |       <!-- end of content -->
170 |       
171 |     </div>
172 |     
173 |     <parallax-layers id="img3">
174 |       <iron-image depth="-0.5" sizing="cover" preload fade src="res/saint-michel.jpg" class="background fullbleed"></iron-image>
175 |       <p>Menez Sant-Mikael</p>
176 |     </parallax-layers>
177 |     
178 |     <div class="baseGroup">
179 | 
180 |       <!-- demo content (wikipedia extract), do not worry about this -->
181 |       <p><a href="https://en.wikipedia.org/wiki/Brittany#Geography_and_natural_history" title="Geography and natural history" class="subtitle">Geography and natural history</a></p>
182 |       <p>Brittany is the largest French <a href="https://en.wikipedia.org/wiki/Peninsula" title="Peninsula">peninsula</a>. It is around 34,030&nbsp;km<sup>2</sup> (13,140&nbsp;sq&nbsp;mi) and stretches towards the northwest and the Atlantic Ocean. It is bordered to the north by the <a href="https://en.wikipedia.org/wiki/English_Channel" title="English Channel">English Channel</a>, to the south by the <a href="https://en.wikipedia.org/wiki/Bay_of_Biscay" title="Bay of Biscay">Bay of Biscay</a> and the waters located between the western coast and <a href="https://en.wikipedia.org/wiki/Ushant" title="Ushant">Ushant island</a> form the <a href="https://en.wikipedia.org/wiki/Iroise_Sea" title="Iroise Sea">Iroise Sea</a>.</p>
183 |       <p>The Breton coast is very indented, with many cliffs, <a href="https://en.wikipedia.org/wiki/Ria" title="Ria">rias</a> and <a href="https://en.wikipedia.org/wiki/Cape_(geography)" title="Cape (geography)">capes</a>. The <a href="https://en.wikipedia.org/wiki/Gulf_of_Morbihan" title="Gulf of Morbihan">Gulf of Morbihan</a> is a vast <a href="https://en.wikipedia.org/wiki/Natural_harbour" title="Natural harbour" class="mw-redirect">natural harbour</a> with some forty islands that is almost a closed sea. In total, around 800 islands lie off the mainland; the largest being <a href="https://en.wikipedia.org/wiki/Belle_%C3%8Ele" title="Belle Île">Belle Île</a>, in the south. Brittany has over 2,860&nbsp;km (1,780&nbsp;mi) of coastline; it represents a third of the total French coastline.</p>
184 |       <!-- end of content -->
185 |       
186 |     </div>
187 |     
188 |     <parallax-layers id="img4">
189 |       <iron-image depth="-0.5" sizing="cover" preload fade src="res/ploumanach.jpg" class="background fullbleed"></iron-image>
190 |       <p>Ploumanac'h</p>
191 |     </parallax-layers>
192 |     
193 |     <div class="baseGroup">
194 | 
195 |       <!-- demo content (wikipedia extract), do not worry about this -->
196 |       <p><a href="https://en.wikipedia.org/wiki/Brittany#Regional_identity" title="Regional identity" class="subtitle">Regional identity</a></p>
197 |       <p>Breton political parties do not have a wide support and their electoral success is small. However, Bretons have a strong cultural identity. According to a poll made in 2008, 50% of the inhabitants of the <a href="https://en.wikipedia.org/wiki/Brittany_(administrative_region)" title="Brittany (administrative region)">Region Brittany</a> consider themselves as much Breton as French, 22.5% feel more Breton than French, and 15.4% more French than Breton. A minority, 1.5%, considers itself Breton but not French, while 9.3% do not consider themselves to be Breton at all.</p>
198 |       <p>Breton is a <a href="https://en.wikipedia.org/wiki/Celtic_language" title="Celtic language" class="mw-redirect">Celtic language</a> derived from the historical <a href="https://en.wikipedia.org/wiki/Common_Brittonic" title="Common Brittonic">Common Brittonic</a> language, and is most closely related to <a href="https://en.wikipedia.org/wiki/Cornish_language" title="Cornish language">Cornish</a> and <a href="https://en.wikipedia.org/wiki/Welsh_language" title="Welsh language">Welsh</a>. It was imported in Western <a href="https://en.wikipedia.org/wiki/Armorica" title="Armorica">Armorica</a> during the 5th century by Britons fleeing the <a href="https://en.wikipedia.org/wiki/Anglo-Saxon_invasion_of_Britain" title="Anglo-Saxon invasion of Britain" class="mw-redirect">Anglo-Saxon invasion of Britain</a>. Since the 13th century, long before the <a href="https://en.wikipedia.org/wiki/Union_of_Brittany_and_France" title="Union of Brittany and France">union of Brittany and France</a>, the main administrative language of the Duchy of Brittany had been French, which had replaced Latin.</p>
199 |       <!-- end of content -->
200 | 
201 |     </div>
202 |     
203 |     <parallax-layers id="img5">
204 |       <iron-image depth="-0.5" sizing="cover" preload fade src="res/huelgoat.jpg" class="background fullbleed"></iron-image>
205 |       <p>Huelgoat</p>
206 |     </parallax-layers>
207 |     
208 |     <div class="baseGroup footer">
209 |       <p>Text extracts : <a href="http://www.wikipedia.com"><img src="res/wikipedia.png" style="height: 1.4em;" alt="wikipedia"></a></p>
210 |       <p>Photos : <a href="https://www.github.com/vguillou" class="subtitle">Vincent&nbsp;Guillou</a></p>
211 |     </div>
212 |   
213 |    </parallax-element>
214 | 
215 | </body></html>
216 | 


--------------------------------------------------------------------------------
/demo/demo-scroll-panel-element.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../polymer/polymer.html">
  2 | <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  3 | <link rel="import" href="../../iron-icons/iron-icons.html">
  4 | <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  5 | <link rel="import" href="../../paper-scroll-header-panel/paper-scroll-header-panel.html">
  6 | <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  7 | <link rel="import" href="../parallax-scroller-behavior.html">
  8 | <link rel="import" href="../parallax-layers.html">
  9 | 
 10 | <dom-module id="demo-scroll-panel-element">
 11 |   <template>
 12 |     <style is="custom-style">
 13 |       paper-scroll-header-panel {
 14 |         position: absolute;
 15 |         top: 0;
 16 |         right: 0;
 17 |         bottom: 0;
 18 |         left: 0;
 19 | 
 20 |         /* scroller of the panel */
 21 |         --paper-scroll-header-container: {
 22 |           font: 200% / 1.5 Arial;
 23 | 
 24 |           display: -ms-flexbox;
 25 |           display: -webkit-flex;
 26 |           display: flex;
 27 |           margin: 0;
 28 |           padding: 0;
 29 | 
 30 |           /* Every CSS properties that flatten perspective
 31 |            * (such as -webkit-overflow-scrolling: touch;) *must* be avoided
 32 |            * for the scroller, as it breaks the perspective.
 33 |            */
 34 |           -webkit-overflow-scrolling: auto;
 35 | 
 36 |           /* for vertical scrolling */
 37 |           -webkit-flex-direction: column;
 38 |           flex-direction: column;
 39 |           overflow-y: auto;
 40 |           overflow-x: hidden;
 41 | 
 42 |           /* FYI, this should be applied for horizontal scrolling, instead of the 4 preceiding lines */
 43 |           /*
 44 |           overflow-y: hidden;
 45 |           overflow-x: auto;
 46 |           */
 47 |         };
 48 |       }
 49 | 
 50 |       .content {
 51 |         display: -ms-flexbox;
 52 |         display: -webkit-flex;
 53 |         display: flex;
 54 |         -webkit-flex-direction: column;
 55 |         flex-direction: column;
 56 | 
 57 |         -webkit-overflow-scrolling: auto;
 58 |       }
 59 | 
 60 |       /* demo and layer style */
 61 | 
 62 |       parallax-layers {
 63 |         min-height: 400px;
 64 |         z-index: -1;
 65 |       }
 66 | 
 67 |       .parallax-layer,
 68 |       .no-parallax {
 69 |         @apply(--layout-vertical);
 70 |         @apply(--layout-center-center);
 71 |       }
 72 | 
 73 |       .parallax-layer {
 74 |         background-image: url("res/doge.jpg");
 75 |         background-position: 50% 50%;
 76 |         background-repeat: no-repeat;
 77 |         background-size: cover;
 78 |         color: white;
 79 |       }
 80 |     
 81 |       .no-parallax {
 82 |         min-height: 500px;
 83 |         z-index: 0;
 84 |         background: white;
 85 |         border-style: solid;
 86 |         border-width: 5px;
 87 |         border-color: black;
 88 |       }
 89 | 
 90 |       .flex {
 91 |         @apply(--layout-flex);
 92 |       }
 93 |     </style>
 94 | 
 95 |     <paper-scroll-header-panel id="headerPanel" class="flex" condenses keep-condensed-header>
 96 | 
 97 |       <!-- Toolbar -->
 98 |       <paper-toolbar id="mainToolbar" class="tall">
 99 |         <paper-icon-button icon="arrow-back"></paper-icon-button>
100 |         <span class="flex"></span>
101 |         <paper-icon-button icon="search"></paper-icon-button>
102 |         <span class="bottom title">parallax-element</span>
103 |       </paper-toolbar>
104 | 
105 |       <!-- Content (Must not be embed in a parent div: The scroller must be the direct parent of all <parallax-layers> -->
106 |       <div id="contentContainer" class="content">
107 |         <template is="dom-repeat" items="{{sections}}">
108 | 
109 |           <template is="dom-if" if="{{isNormalSection(item)}}">
110 |             <div class="no-parallax">
111 |               [[item.label]]
112 |             </div>
113 |           </template>
114 | 
115 |          <template is="dom-if" if="{{!isNormalSection(item)}}">
116 |             <parallax-layers style$="{{computeSectionZindex(item)}}">
117 |               <div depth$="[[item.depth]]" class="parallax-layer fullbleed">
118 |                 [[item.label]]
119 |               </div>
120 |             </parallax-layers>
121 |           </template>
122 | 
123 |         </template>
124 |       </div>
125 | 
126 |     </paper-scroll-header-panel>
127 | 
128 |   </template>
129 |   <script>
130 |     Polymer({
131 |       is: 'demo-scroll-panel-element',
132 | 
133 |       behaviors: [Polymer.ParallaxScrollerBehavior],
134 | 
135 |       properties: {
136 |         sections: {
137 |           type: Array,
138 |           value: function() {
139 |             return [{label:'Normal div', depth:0},
140 |               {label:'wow parallax', depth:-0.3},
141 |               {label:'much normal div', depth:0},
142 |               {label:'yum foreground', depth:0.2},
143 |               {label:'so normal div', depth:0},
144 |               {label:'very parallax', depth:-1},
145 |               {label:'many normal div', depth:0}];
146 |           }
147 |         }
148 |       },
149 | 
150 |       ready: function() {
151 |         // The header-panel's scroller must be the parallax scroller 
152 |         this.scroller = this.$.headerPanel.scroller;
153 |       },
154 | 
155 |       isNormalSection: function(section) {
156 |         return section.depth === 0;
157 |       },
158 | 
159 |       computeSectionZindex: function(section) {
160 |         return 'z-index:' + (section.depth <= 0 ? -1 : 1) + ';';
161 |       }
162 |     });
163 |   </script>
164 | </dom-module>


--------------------------------------------------------------------------------
/demo/demo-successive-parallax-layers.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Breizh</title>
  5 |   <meta charset="utf-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9 |   <meta name="msapplication-TileColor" content="#000">
 10 |   <meta name="theme-color" content="#000">
 11 | 
 12 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 13 |   
 14 |   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 15 |   <link rel="import" href="../../iron-image/iron-image.html">
 16 |   <link rel="import" href="../parallax-element.html">
 17 | 
 18 |   <style is="custom-style">
 19 |     /* ----------------------- Demo styles ----------------------- */
 20 |     
 21 |     body, html {
 22 |       overflow: hidden;
 23 |       font: 100% / 1.5 Arial;
 24 |     }
 25 |     
 26 |     * {
 27 |       margin:0;
 28 |       padding:0;
 29 |     }
 30 |     
 31 |     p {
 32 |       font-size: 1em;
 33 |       margin: 0.5em 1em;
 34 |     }
 35 | 
 36 |     .title {
 37 |       text-decoration: none;
 38 |       color: white;
 39 |       font-weight: bold;
 40 |       font-size: 2em;
 41 |       margin: 1em;
 42 |     }
 43 | 
 44 |     .subtitle {
 45 |       text-decoration: none;
 46 |       color: black;
 47 |       font-weight: bold;
 48 |     }
 49 | 
 50 |     .fit {
 51 |       position: absolute;
 52 |       right: 0;
 53 |       left: 0;
 54 |       top: 0;
 55 |       bottom: 0;
 56 |     }
 57 |     
 58 |     /* ----------------------- Parallax styles ---------------------- */
 59 |     
 60 |     parallax-element {
 61 |       height: 100vh;
 62 |     }
 63 | 
 64 |     div.baseGroup {
 65 |       z-index: 1;
 66 |       min-height: 700px;
 67 |       background: white;
 68 |       box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
 69 |       @apply(--layout-vertical);
 70 |       @apply(--layout-center-center);
 71 |     }
 72 | 
 73 |     div.baseGroup.footer {
 74 |       min-height: 400px;
 75 |       @apply(--layout-horizontal);
 76 |       @apply(--layout-center);
 77 |       @apply(--layout-around-justified);
 78 |       @apply(--layout-flex);
 79 |     }
 80 | 
 81 |     parallax-layers[id^="img"] {
 82 |       min-height: 500px;
 83 |     }
 84 | 
 85 |     parallax-layers[id="imgHeader"] {
 86 |       min-height: 300px;
 87 |     }
 88 | 
 89 |     parallax-layers[id^="img"] > .background {
 90 |       background-repeat: no-repeat;
 91 |       background-size: initial !important;
 92 |       z-index: -2;
 93 |     }
 94 |     
 95 |     parallax-layers[id^="img"] p {
 96 |       position: absolute;
 97 |       bottom: 0;
 98 |       font-size: 1.5em;
 99 |       color: white;
100 |       text-shadow: 2px -2px 11px rgba(0, 0, 0, 1);
101 |     }
102 | 
103 |     iron-image {
104 |       opacity: 0.7;
105 |       border-style: solid;
106 |       border-width: 5px;
107 |       border-color: black;
108 | 
109 |     }
110 | 
111 |     #imgHeader > .background {
112 |       background-position: 30% 95% !important;
113 |       background-color: #009688;
114 |     }
115 |     
116 |     #img1 > .background {
117 |       background-position: 90% 40% !important;
118 |       background-size: cover !important;
119 |       background-color: #795548;
120 |     }
121 |       
122 |     #img2 > .background {
123 |       background-position: 70% 300% !important;
124 |       background-color: #00BCD4;
125 |     }
126 |     #img3 > .background {
127 |       background-position: 35% 100% !important;
128 |       background-color: #33691E;
129 |     }
130 |     #img4 > .background {
131 |       background-position: 55% 100% !important;
132 |       background-color: #EF9A9A;
133 |     }
134 |     #img5 > .background {
135 |       background-position: 50% 700% !important;
136 |       background-color: #4CAF50;
137 |     }
138 |   </style>
139 | </head>
140 | 
141 | <body unresolved>
142 | 
143 |   <parallax-element>
144 | 
145 |     <parallax-layers id="imgHeader" style="z-index: 5;">
146 |       <iron-image depth="-0.1" sizing="cover" preload fade src="res/meneham.jpg" class="background fullbleed"></iron-image>
147 |       <div depth="-0.1" class="fullbleed">
148 |         <p>Meneham</p>
149 |       </div>
150 |     </parallax-layers>
151 | 
152 |     <parallax-layers id="img1" style="z-index: 4;">
153 |       <iron-image depth="-0.2" sizing="cover" preload fade src="res/yeun-elez.jpg" class="background fit"></iron-image>
154 |       <div depth="-0.2" class="fit">
155 |         <p>Yeun Elez</p>
156 |       </div>
157 |     </parallax-layers>
158 |     
159 |     <parallax-layers id="img2" style="z-index: 3;">
160 |       <iron-image depth="-0.33" sizing="cover" preload fade src="res/ile-vierge.jpg" class="background fit"></iron-image>
161 |       <div depth="-0.33" class="fit">
162 |         <p>Crozon</p>
163 |       </div>
164 |     </parallax-layers>
165 |     
166 |     <parallax-layers id="img3" style="z-index: 2;">
167 |       <iron-image depth="-0.48" sizing="cover" preload fade src="res/saint-michel.jpg" class="background fit"></iron-image>
168 |       <div depth="-0.48" class="fit">
169 |         <p>Menez Sant-Mikael</p>
170 |       </div>
171 |     </parallax-layers>
172 | 
173 |     <div class="baseGroup">
174 |       <p>Photos : <a href="https://vguillou.github.io" class="subtitle">Vincent&nbsp;Guillou</a></p>
175 |     </div>
176 |     
177 |     <parallax-layers id="img4" style="z-index: 1;">
178 |       <iron-image depth="-0.66" sizing="cover" preload fade src="res/ploumanach.jpg" class="background fit"></iron-image>
179 |       <div depth="-0.66" class="fit">
180 |         <p>Ploumanac'h</p>
181 |       </div>
182 |     </parallax-layers>
183 |     
184 |     <parallax-layers id="img5" style="z-index: 0;">
185 |       <iron-image depth="-0.88" sizing="cover" preload fade src="res/huelgoat.jpg" class="background fit"></iron-image>
186 |       <div depth="-0.88" class="fit">
187 |         <p>Huelgoat</p>
188 |       </div>
189 |     </parallax-layers>
190 |     
191 |     <div class="baseGroup footer">
192 |       <p>Photos : <a href="https://vguillou.github.io" class="subtitle">Vincent&nbsp;Guillou</a></p>
193 |     </div>
194 |   
195 |    </parallax-element>
196 | 
197 | </body></html>
198 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>"parallax-element" demo index</title>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 9 |   <meta name="msapplication-TileColor" content="#e53935">
10 |   <meta name="theme-color" content="#e53935">
11 |   
12 |   <style>
13 | 	body {
14 | 	   font: 125% / 1.5 Arial;
15 | 	}
16 | 	</style>
17 | </head>
18 | <body>
19 | 	<ul>
20 |     <li><a href="demo-overview.html">Feature overview demo</a></li>
21 |     <li><a href="demo-hello-world.html">Hello World</a></li>
22 |     <li><a href="demo-dom-repeat.html">dom-repeat demo</a></li>
23 |     <li><a href="demo-paper-scroll-header-panel.html">paper-scroll-header-panel</a></li>
24 | 		<li><a href="demo-real-world.html">"Real world" usage</a></li>
25 | 		<li><a href="demo-playstore.html">Google Play Store v5.0 app-page-like effect</a></li>
26 | 	</ul>
27 | </body>


--------------------------------------------------------------------------------
/demo/res/doge.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/doge.jpg


--------------------------------------------------------------------------------
/demo/res/huelgoat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/huelgoat.jpg


--------------------------------------------------------------------------------
/demo/res/ile-vierge.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/ile-vierge.jpg


--------------------------------------------------------------------------------
/demo/res/meneham.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/meneham.jpg


--------------------------------------------------------------------------------
/demo/res/parallax.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/parallax.jpg


--------------------------------------------------------------------------------
/demo/res/ploumanach.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/ploumanach.jpg


--------------------------------------------------------------------------------
/demo/res/saint-michel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/saint-michel.jpg


--------------------------------------------------------------------------------
/demo/res/wikipedia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/wikipedia.png


--------------------------------------------------------------------------------
/demo/res/yeun-elez.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vguillou/parallax-element/f0222f4add3cb6c3bdec67a732d45658587a9a89/demo/res/yeun-elez.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
10 | -->
11 | <html>
12 | <head>
13 | 
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 | 
17 |   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
18 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
19 | 
20 | </head>
21 | <body>
22 | 
23 |   <iron-component-page></iron-component-page>
24 | 
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/parallax-element.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | `parallax-element` is a container allowing nested
  3 | `parallax-layers` to to implement a parallax scrolling effect,
  4 | by implementing `Polymer.ParallaxScrollerBehavior`
  5 | The effect leverages CCS3 3D transformations.
  6 | This means that the implementation is efficient
  7 | performance-wise, and can be used on mobile.
  8 |     
  9 |     parallax-element > * {
 10 |       min-height: 500px;
 11 |     }
 12 | 
 13 |     <parallax-element>
 14 |   	  <div>My first normal DIV<div>
 15 |       <parallax-layers style="z-index: -1;">
 16 |   	    <div depth="-0.5">DIV srolling 25% slower and sliding under normal ones<div>
 17 |       </parallax-layers>
 18 |   	  <div>My second normal DIV<div>
 19 |     </parallax-element>
 20 | 
 21 | Children `parallax-layers` components __must__ be used to create
 22 | the parallax effect. To learn more about the usage of `parallax-layers`,
 23 | please refer to it's own documentation.
 24 | 
 25 | A `parallax-element` needs an explicit size to be set via CSS.
 26 | This size depends of the orientation of it's layout :
 27 | the height if vertical (default), the width if horizontal.  
 28 | 
 29 |     parallax-element {
 30 |       height: 100vh;
 31 |       width: 100vw;
 32 |     }
 33 | 
 34 | The orientation of the layout is vertical by default,
 35 | but can be changed using polymer standard built-in attributes :
 36 | 
 37 |     <parallax-element horizontal>
 38 |       <parallax-layers>...</parallax-layers>
 39 |     </parallax-element>
 40 | 
 41 | __Important notes:__ <ul>
 42 | <li>`parallax-element` must either be explicitly sized, or have and
 43 | explicitly sized parent. By "explicitly sized", we mean it either has an
 44 | explicit CSS `height` property set via a class or inline style, or else is sized
 45 | by other layout means (e.g. the `flex` or `fit` classes).</li>
 46 | <li>Children `parallax-layers` components __must__ be used to create
 47 | the parallax effect. To learn more about the usage of `parallax-layers`,
 48 | please refer to it's own documentation.</li>
 49 | <li>The `parallax-element` component being essantially a flex-box,
 50 | the children `parallax-layers` must be given a minimum size.
 51 | The property to set depends of the orientation
 52 | of the parent's (`parallax-element`) layout :
 53 | "min-height" if vertical (default), or "min-width" if horizontal.</li>
 54 | </ul>
 55 | 
 56 | __About the parallax effect and browser support:__
 57 | This component set uses 3D perspective and translations in order to achieve the parallax effect.
 58 | Unfortunatly, Internet Explorer does not support the CCS `transform-style: preserve-3d` and is therefore
 59 | not supported. However, the component will render correctly, as if the parallax effect was disabled.
 60 | 
 61 | @element parallax-element
 62 | @demo demo/index.html
 63 | -->
 64 | <link rel="import" href="../polymer/polymer.html">
 65 | <link rel="import" href="parallax-scroller-behavior.html">
 66 | <link rel="import" href="parallax-layers.html">
 67 | 
 68 | <dom-module id="parallax-element">
 69 |   <template>
 70 |     <style>
 71 |       :host {
 72 |         display: -ms-flexbox;
 73 |         display: -webkit-flex;
 74 |         display: flex;
 75 |         margin: 0;
 76 |         padding: 0;
 77 |         visibility: hidden;
 78 | 
 79 |         /* Every CSS properties that flatten perspective
 80 |          * (such as -webkit-overflow-scrolling: touch;) *must* be avoided
 81 |          * for the scroller, as it breaks the perspective.
 82 |          */
 83 |         -webkit-overflow-scrolling: auto !important;
 84 |       }
 85 | 
 86 |       :host(.ready) {
 87 |         visibility: visible;
 88 |       }
 89 | 
 90 |       :host(:not([horizontal])) {
 91 |         -webkit-flex-direction: column;
 92 |         flex-direction: column;
 93 |         overflow-y: auto;
 94 |         overflow-x: hidden;
 95 |       }
 96 | 
 97 |       :host([horizontal]) {
 98 |         overflow-y: hidden;
 99 |         overflow-x: auto;
100 |       }
101 | 
102 |       :host > ::content > * {
103 |         position: relative;
104 |       }
105 |     </style>
106 |     <content></content>
107 |   </template>
108 |   <script>
109 |     Polymer({
110 |       is: 'parallax-element',
111 |       behaviors: [Polymer.ParallaxScrollerBehavior]
112 |     });
113 |   </script>
114 | </dom-module>


--------------------------------------------------------------------------------
/parallax-layers.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Creates parallax effect inside of a `parallax-element`.
  3 |     
  4 |     parallax-element > * {
  5 |       min-height: 500px;
  6 |     }
  7 | 
  8 |     <parallax-element>
  9 | 		  <div>My first normal DIV<div>
 10 |       <parallax-layers>
 11 | 		    <div depth="-0.5">DIV srolling 25% slower than normal ones<div>
 12 |       </parallax-layers>
 13 | 		  <div>My second normal DIV<div>
 14 |     </parallax-element>
 15 | 
 16 | __Important:__ The parent `parallax-element` component being essantially
 17 | a flex-box, the `parallax-layers` must be given a minimum size.
 18 | The property to set depends of the orientation
 19 | of the parent's (`parallax-element`) layout :
 20 | "min-height" if vertical (default), or "min-width" if horizontal.
 21 | 
 22 |     parallax-layers {
 23 |       min-height: 500px;
 24 |     }
 25 | 
 26 | In order to accomplish parallax effect where certain `parallax-layers`
 27 | slide under others, one has to give `parallax-layers` a z-index like so :
 28 | 
 29 |     parallax-layers.deep {
 30 |       z-index: -1;
 31 |     }
 32 | 
 33 |   	<parallax-element>
 34 |   		<div>My first normal DIV<div>
 35 |       <parallax-layers style="z-index: -1;">
 36 |   	    <div depth="-0.5">
 37 |   		   DIV srolling slower and sliding under normal ones.
 38 |   	    <div>
 39 |       </parallax-layers>
 40 |   	  <div>My second normal DIV<div>
 41 |     </parallax-element>
 42 | 
 43 | __Layers : `parallax-layers` direct children__
 44 | 
 45 | The direct children added to a `parallax-layers` light DOM are hereafter called `layers`.
 46 | These layers are the elements that will seem to scroll slower or faster than the rest of
 47 | the page.
 48 | In order to set up this scrolling speed, each layer must given a `depth` attribute :
 49 | <ul>
 50 | <li>With `depth` = 0, the layer will scroll and be displayed normally</li>
 51 | <li>With `depth` < 0, the layer will appear to scroll slower. The layer will in fact be
 52 | translated further (deeper) from the viewpoint</li>
 53 | <li>With `depth` > 0, the layer will appear to scroll faster. The layer will in fact be
 54 | translated closer (upper) to the viewpoint. Please be aware that `depth` should be,
 55 | lower than the value of the `perspective` attribute on the parent `parallax-element`
 56 | in order to be visible.</li>
 57 | Therefore, only the highest layer (ie with the highest depth) can acquire focus.
 58 | </ul>
 59 | 
 60 |     <parallax-element>
 61 |       <div>My first normal DIV<div>
 62 |       <parallax-layers>
 63 |         <div depth="0">
 64 |          DIV that appears perfectly normal with depth=0. No parallax here!
 65 |         <div>
 66 |       </parallax-layers>
 67 |       <div>My other normal DIV<div>
 68 |       <parallax-layers style="z-index: -1;">
 69 |         <div depth="-0.5">
 70 |          DIV srolling slower and sliding under normal ones.
 71 |         <div>
 72 |         <div>
 73 |          DIV that appears perfectly normal since depth is set to 0 by default.
 74 |         <div>
 75 |       </parallax-layers>
 76 |       <div>My last normal DIV<div>
 77 |       <parallax-layers style="z-index: 1;">
 78 |         <div depth="0.2">
 79 |          DIV srolling faster and sliding over normal ones.
 80 |         <div>
 81 |       </parallax-layers>
 82 |     </parallax-element>
 83 | 
 84 | The `fullbleed` class is available to make a layer the exact size
 85 | necessary to achieve a perfect parallax effect. Usage of this class
 86 | is strongly recommended to avoid revealing blank space before and after
 87 | the layer when scrolling. Refer to the
 88 | <a href="demo/demo-overview">overview demo</a>
 89 | to see this class in action.
 90 | 
 91 |     <parallax-element>
 92 |       <div>My first normal DIV<div>
 93 |       <parallax-layers>
 94 |         <img depth="-0.5" class="fullbleed" src="my_img.png">
 95 |           I will be perfectly sized to achieve a perfect parallax-effect.
 96 |         </img>
 97 |       </parallax-layers>
 98 |       <div>My other normal DIV<div>
 99 |       <parallax-layers style="z-index: -1;">
100 |         <img depth="-0.5" class="fit" src="my_img.png">
101 |           I won't be perfectly sized, scrolling will reveal blank space before and after.
102 |         </img>
103 |       </parallax-layers>
104 |       <div>My last normal DIV<div>
105 |     </parallax-element>
106 | 
107 | @element parallax-layers
108 | @demo demo/index.html
109 | -->
110 | <link rel="import" href="../polymer/polymer.html">
111 | 
112 | <dom-module id="parallax-layers">
113 |   <template>
114 |     <style>
115 |       :host {
116 |         -webkit-transform-style: preserve-3d;
117 |         transform-style: preserve-3d;
118 |         -webkit-transform: translateZ(0);
119 |         -moz-transform: translateZ(0);
120 |         -ms-transform: translateZ(0);
121 |         -o-transform: translateZ(0);
122 |         transform: translateZ(0);
123 |       }
124 | 
125 |       :host > ::content > [depth] {
126 |         position: absolute !important;
127 |         -webkit-backface-visibility: hidden;
128 |         -moz-backface-visibility: hidden;
129 |         -ms-backface-visibility: hidden;
130 |         backface-visibility: hidden;
131 |       }
132 | 
133 |       :host > ::content > .fullbleed {
134 |         top: 0;
135 |         right: 0;
136 |         bottom: 0;
137 |         left: 0;
138 |       }
139 |     </style>
140 |     <content id="layers"></content>
141 |   </template>
142 |   <script>
143 |     Polymer({
144 |       is: 'parallax-layers',
145 | 
146 |       properties: {
147 |         _horizontal: {
148 |           type: Boolean,
149 |           value: false
150 |         },
151 | 
152 |         _isObserving: {
153 |           type: Boolean,
154 |           value: false
155 |         },
156 | 
157 |         _parentSize: {
158 |           type: Number,
159 |           value: 0
160 |         },
161 | 
162 |         _perspective: {
163 |           type: Number,
164 |           value: 1
165 |         },
166 | 
167 |         _observer: {
168 |           type: Object,
169 |           value: null
170 |         }
171 |       },
172 | 
173 |       /**
174 |        * The elements in the light DOM that will seem to scroll slower/faster,
175 |        * while actually being translated farther/closer from/to the viewport
176 |        * and appropriately scaled.
177 |        */
178 |       get layers() {
179 |         return this.getEffectiveChildren() || Polymer.dom(this).children;
180 |       },
181 | 
182 |       /**
183 |        * Updates the parallax effect to match height of the section,
184 |        * depth of the layers, scroll position and size of the element/browser.
185 |        * Should be called after any change of size of the element, other
186 |        * than one triggered by a CoreResizer or by a resize of the browser's window.
187 |        *
188 |        * @method render
189 |        */
190 |       render: function (perspective, parentSize, horizontal) {
191 |         this._perspective = perspective;
192 |         this._parentSize = parentSize;
193 |         this._horizontal = horizontal;
194 |         this._prepare();
195 |       },
196 | 
197 |       ready: function () {
198 |         this._observer = new MutationObserver(function (mutations) {
199 |           var needsUpdate = false;
200 |           mutations.forEach(function (m) {
201 |             if (m.target.localName == 'parallax-layers' || (m.target.parentElement && m.target.parentElement.localName == 'parallax-layers')) {
202 |               needsUpdate = true;
203 |               return;
204 |             }
205 |           });
206 |           if (needsUpdate) {
207 |             this._prepare();
208 |           }
209 |         }.bind(this));
210 |         this._startObserving();
211 |         this._prepare();
212 |       },
213 | 
214 |       detached: function () {
215 |         this._stopObserving();
216 |         this._observer = null;
217 |       },
218 | 
219 |       _getDepth: function (node) {
220 |         var depth = node['depth'] || node.getAttribute('depth') || 0;
221 |         return parseFloat(depth);
222 |       },
223 | 
224 |       _startObserving: function () {
225 |         // Observe changes to child (layers)
226 |         this._observer.observe(this, {
227 |           childList: true,
228 |           attributes: true,
229 |           subtree: true
230 |         });
231 |         this._isObserving = true;
232 |       },
233 | 
234 |       _stopObserving: function () {
235 |         if (this._isObserving) {
236 |           this._isObserving = false;
237 |           this._observer.disconnect();
238 |         }
239 |       },
240 | 
241 |       _prepare: function () {
242 |         var parallaxSize, layers;
243 |         this._stopObserving();
244 |         layers = this.layers;
245 |         if (layers) {
246 |           parallaxSize = !this._horizontal ? this.offsetHeight : this.offsetWidth;
247 |           isHeader = (this._horizontal ? this.offsetLeft : this.offsetTop) == 0;
248 |           for (var i = 0, l; l = layers[i]; i++) {
249 |             this._prepareLayer(l, parallaxSize, isHeader);
250 |           }
251 |         }
252 |         this.async(function () {
253 |           this._startObserving();
254 |         });
255 |       },
256 | 
257 |       _prepareLayer: function (layer, parallaxSize, isHeader) {
258 |         var translateZ = translateY = translateX = translateToStick = scale = 0;
259 |         if (layer) {
260 |           // 3D transformation and scalling
261 |           depth = this._getDepth(layer);
262 |           translateZ = depth * this._perspective;
263 |           scale = 1 + (this._perspective != 0 ? -1 * translateZ / this._perspective : 0);
264 |           Polymer.dom(layer).classList.remove(this._horizontal ? 'vertical' : 'horizontal');
265 |           Polymer.dom(layer).classList.add(this._horizontal ? 'horizontal' : 'vertical');
266 |           // Calculate offset and/or position if header
267 |           translateToStick = this._prepareLayerOffsetAndPos(layer, translateZ, scale, parallaxSize, isHeader);
268 |           translateY = !this._horizontal ? translateToStick : 0;
269 |           translateX = this._horizontal ? translateToStick : 0;
270 |           layer.style.transform = layer.style.webkitTransform = depth == 0 ? '' : 'scale(' + scale + ')' + (translateX != 0 ? ' translateX(' + translateX + 'px)' : '') + (translateY != 0 ? ' translateY(' + translateY + 'px)' : '') + (translateZ != 0 ? ' translateZ(' + translateZ + 'px)' : '');
271 |         }
272 |       },
273 | 
274 |       _prepareLayerOffsetAndPos: function (layer, translateZ, scale, parallaxSize, isHeader) {
275 |         var translateToStick = 0;
276 |         var offsetTop = offsetBottom = centerTop = projectionFactor = speed = null;
277 |         var isFulldBleed = Polymer.dom(layer).classList.contains('fullbleed');
278 |         if (this._perspective != 0 && translateZ != 0) {
279 |           // centerTop : position of center of the parallax group relative to the center of the parent,
280 |           // when the group's top = parent's top
281 |           centerTop = (this._parentSize - parallaxSize) / 2;
282 |           // projectionFactor : factor any size at z distance is multiplied with
283 |           // to result in the projected size at z=0.
284 |           projectionFactor = 1 + 1 * translateZ / (this._perspective - translateZ);
285 |           if (translateZ < 0) {
286 |             // Background layer
287 |             if (isHeader) {
288 |               // translation to apply for a sticky background layer =
289 |               // -( (1/2 viewport) - (1/2 size of the layer * projectionFactor) - (centerTop * projectionFactor) )
290 |               translateToStick = this._parentSize / 2;
291 |               translateToStick = translateToStick - parallaxSize / 2 * scale * projectionFactor;
292 |               translateToStick = -(translateToStick - centerTop * projectionFactor);
293 |             } else if (isFulldBleed) {
294 |               speed = -1 * translateZ / (this._perspective - translateZ);
295 |               offsetTop = speed * (this._parentSize - parallaxSize) / 2;
296 |               offsetTop = offsetBottom = -Math.ceil(offsetTop);
297 |             }
298 |           } else {
299 |             // Foreground layer
300 |             speed = this._perspective / (1 * (this._perspective - translateZ)) - 1;
301 |             if (isHeader) {
302 |               if (isFulldBleed) {
303 |                 offsetTop = offsetBottom = -Math.ceil(speed * parallaxSize / 2);
304 |               }
305 |               // translation to apply for a sticky foreground layer =
306 |               // -offsetTop + (1/2 size of the layer * projectionFactor) + (centerTop * projectionFactor) - (1/2 viewport)
307 |               translateToStick = -1 * offsetTop + parallaxSize / 2 * scale * projectionFactor;
308 |               translateToStick = translateToStick + centerTop * projectionFactor;
309 |               translateToStick = translateToStick - this._parentSize / 2;
310 |             } else if (isFulldBleed) {
311 |               offsetTop = speed * ((this._parentSize - parallaxSize) / 2 + parallaxSize);
312 |               offsetTop = offsetBottom = -Math.ceil(offsetTop);
313 |             }
314 |           }
315 |           layer.style.top = !this._horizontal && offsetTop != null ? offsetTop + 'px' : '';
316 |           layer.style.bottom = !this._horizontal && offsetBottom != null ? offsetBottom + 'px' : '';
317 |           layer.style.left = this._horizontal && offsetTop != null ? offsetTop + 'px' : '';
318 |           layer.style.right = this._horizontal && offsetBottom != null ? offsetBottom + 'px' : '';
319 |         } else
320 |           // No offset
321 |           {
322 |             layer.style.top = layer.style.bottom = layer.style.left = layer.style.right = '';
323 |           }
324 |         return translateToStick.toFixed(2);
325 |       }
326 |     });
327 |   </script>
328 | </dom-module>


--------------------------------------------------------------------------------
/parallax-scroller-behavior.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  3 | <link rel="import" href="parallax-layers.html">
  4 | 
  5 | <script>
  6 |   /**
  7 |    * Use `ParallaxScrollerBehavior` to implement a container for parallax-layers
  8 |    * allowing to implement a parallax scrolling effect.
  9 |    *
 10 |    * For most cases, when you have direct control over the scrolling
 11 |    * container (e.g a div), you should use the `parallax-element`
 12 |    * directly (which implement this behavior and set the correct CSS classes).
 13 |    *
 14 |    * When you don't have control over the scroller (e.g when using a
 15 |    * `paper-scroll-header-panel`), and correctly set the `scroller` property.
 16 |    * For a full implementation example (parallax-scrolling inside a
 17 |    * `paper-scroll-header-panel`), please take a look at
 18 |    * <a href="demo/demo-paper-scroll-header-panel.html">this demo</a>. 
 19 |    *
 20 |    * @polymerBehavior Polymer.ParallaxScrollerBehavior
 21 |    * @demo demo/index.html
 22 |    */
 23 |   Polymer.ParallaxScrollerBehaviorImpl = {
 24 | 
 25 |     properties: {
 26 |       /**
 27 |        * Whether or not to activate the parallax effect.
 28 |        * Default "auto" will activate the effect only on compatible browsers:
 29 |        * All but IE (all versions/plateforms) and Firefox for mobile
 30 |        * (supports the effect, but displays glitchs).
 31 |        * "true" can be used to force the effect, and "false" to disable it.
 32 |        * The element then behaves like any flex-box container.
 33 |        * 
 34 |        * @attribute activate
 35 |        * @type string
 36 |        * @values "auto", "true", "false"
 37 |        * @default "auto"
 38 |        */
 39 |       activate: {
 40 |         type: String,
 41 |         value: 'auto',
 42 |         observer: 'render'
 43 |       },
 44 | 
 45 |       /**
 46 |        * If true, the orientation is horizontal; otherwise is vertical.
 47 |        *
 48 |        * @attribute horizontal
 49 |        * @type boolean
 50 |        * @default false
 51 |        */
 52 |       horizontal: {
 53 |         type: Boolean,
 54 |         value: false,
 55 |         reflectToAttribute: true,
 56 |         observer: '_horizontalChanged'
 57 |       },
 58 | 
 59 |       /**
 60 |        * Perspective used for rendering the 3D effect.
 61 |        * Can be used to tweak the parallax, but the default
 62 |        * value should do just fine.
 63 |        *
 64 |        * @attribute perspective
 65 |        * @type number
 66 |        * @default 1
 67 |        */
 68 |       perspective: {
 69 |         type: Number,
 70 |         value: 1,
 71 |         observer: 'render'
 72 |       },
 73 | 
 74 |       /**
 75 |        * Automatically set to true if the web browser is capable of displaying
 76 |        * correctly the parallax effect, and to false otherwise.
 77 |        * Current implementation probably doesn't provide full coverage.
 78 |        *
 79 |        * @attribute isBrowserCompatible
 80 |        * @type boolean
 81 |        */
 82 |       isBrowserCompatible: {
 83 |         type: Boolean,
 84 |         readOnly: true,
 85 |         reflectToAttribute: true,
 86 |         notify: true
 87 |       },
 88 | 
 89 |       /**
 90 |        * The element that controls the scroll. This element
 91 |        * must be the direct parent of all the `parallax-layers` elements,
 92 |        * and thus be set manually if it is not the element implementing
 93 |        * this behavior.
 94 |        * Every CSS properties that flatten perspective *must* be avoided for
 95 |        * this element (such as `-webkit-overflow-scrolling: touch;`).
 96 |        * @type {?Element}
 97 |        */
 98 |       scroller: {
 99 |         type: Object,
100 |         observer: '_scrollerChanged',
101 |         value: function() {
102 |           return this;
103 |         }
104 |       }
105 |     },
106 | 
107 |     listeners: {
108 |       'iron-resize': 'render'
109 |     },
110 | 
111 |     /**
112 |      * Updates the parallax effect to match height of the parallax-layers,
113 |      * depth of the layers, scroll position and size of the element/browser.
114 |      *
115 |      * @method render
116 |      */
117 |     render: function() {
118 |       if (this.scroller !== this) {
119 |         this.style.perspective = 'none';
120 |         this.style['-webkit-perspective'] = 'none';
121 |       }
122 |       if (this.scroller) {
123 |         this.scroller.style.perspective = this.perspective + 'px';
124 |         this.scroller.style['-webkit-perspective'] = this.perspective + 'px';
125 | 
126 |         var parLayersElement = this._parallaxLayersElements;
127 |         if (parLayersElement) {
128 |           for (var i = 0, p; p = parLayersElement[i]; i++) {
129 |             // Update group
130 |             if (p && p.render) {
131 |               p.render(this.isActivated ? this.perspective : 0, this.horizontal ? this.scroller.clientWidth : this.scroller.clientHeight, this.horizontal);
132 |             }
133 |           }
134 |         }
135 |       }
136 |     },
137 | 
138 |     /**
139 |      * Array of all children <parallax-layers> in shadow and light DOMs.
140 |      *
141 |      * @attribute _parallaxLayersElements
142 |      * @type Array
143 |      */
144 |     get _parallaxLayersElements() {
145 |       var layers = Array.prototype.slice.call(this.querySelectorAll('parallax-layers'));
146 |       return layers.concat(Array.prototype.slice.call(Polymer.dom(this).querySelectorAll('parallax-layers')));
147 |     },
148 | 
149 |     /**
150 |      * Read-only flag indicating if the element parallax effect will be
151 |      * activated, either automatically or explicitly via the 'activate' property. 
152 |      *
153 |      * @attribute isActivated
154 |      * @type boolean
155 |      */
156 |     get isActivated() {
157 |       return this.activate === true || this.activate == 'true' || this.activate == 'auto' && this.isBrowserCompatible;
158 |     },
159 | 
160 |     ready: function() {
161 |       this._checkBrowserCapabilities();
162 |       Polymer.dom(this).classList.add('ready');
163 |       this._isReady = true;
164 |     },
165 | 
166 |     attached: function() {
167 |       this._observer = new MutationObserver(function (mutations) {
168 |         this.render();
169 |       }.bind(this));
170 |       this._observer.observe(this, {
171 |         childList: true
172 |       });
173 |       this.async(this.render, 10);
174 |     },
175 | 
176 |     detached: function() {
177 |       if (this._hasScrollHandler) {
178 |         this.scroller.removeEventListener('scroll', this._scrollHandler);
179 |       }
180 |       this._scrollHandler = null;
181 |     },
182 | 
183 |     _horizontalChanged: function(newValue, oldValue) {
184 |       if (this.scroller) {
185 |         this.scroller.scrollTop = this.scroller.scrollLeft = 0;
186 |       }
187 |       this.render();
188 |     },
189 | 
190 |     _scrollerChanged: function(newScroller, oldScroller) {
191 |       if (!this._isReady) {
192 |         this._checkBrowserCapabilities();
193 |       }
194 |       if (this._hasScrollHandler) {
195 |         if (oldScroller) {
196 |           oldScroller.removeEventListener('scroll', this._scrollHandler);
197 |         }
198 |         this.scroller.addEventListener('scroll', this._scrollHandler);
199 |       }
200 |     },
201 | 
202 |     _checkBrowserCapabilities: function() {
203 |       var navU = navigator.userAgent;
204 |       // Android Mobile
205 |       var is_android = navU.indexOf('Android');
206 |       // Apple webkit
207 |       var regExAppleWebKit = new RegExp(/AppleWebKit\/([\d.]+)/);
208 |       var resultAppleWebKitRegEx = regExAppleWebKit.exec(navU);
209 |       var appleWebKitVersion = resultAppleWebKitRegEx === null ? null : parseFloat(regExAppleWebKit.exec(navU)[1]);
210 |       // Chrome
211 |       var regExChrome = new RegExp(/Chrome\/([\d.]+)/);
212 |       var resultChromeRegEx = regExChrome.exec(navU);
213 |       var chromeVersion = resultChromeRegEx === null ? null : parseFloat(regExChrome.exec(navU)[1]);
214 |       var is_android_browser = is_android && (appleWebKitVersion !== null && appleWebKitVersion < 537) || chromeVersion !== null && chromeVersion < 37;
215 |       var is_opera = navU.toLowerCase().indexOf('opr') > -1;
216 |       var is_explorer = navigator.userAgent.toLowerCase().indexOf('msie') > -1 || navigator.appVersion.toLowerCase().indexOf('trident/') > 0;
217 |       var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
218 |       var is_ios = false;
219 |       var mobileDevices = [
220 |         'iPad',
221 |         'iPhone',
222 |         'iPod'
223 |       ];
224 |       for (var i = 0; i < mobileDevices.length; i++) {
225 |         if (navigator.platform === mobileDevices[i]) {
226 |           is_ios = true;
227 |           break;
228 |         }
229 |       }
230 |       // No compatibility : IE, stock Android. Firefox mobile? !(is_firefox && (is_android || is_ios))
231 |       this._setIsBrowserCompatible(!is_explorer && !is_android_browser);
232 |       // Add a scroll handler to prevent scrolling sideways on problematic browsers
233 |       if (is_opera || (is_firefox && (is_android || is_ios))) {
234 |         this._hasScrollHandler = true;
235 |         this._scrollHandler = this._scroll.bind(this);
236 |       }
237 |     },
238 | 
239 |     /**
240 |      * Preventing scrolling along the horizontal axis in *most* browsers,
241 |      * to keep the parallax effect.
242 |      * Opera for Android is still known to cause issues with this.
243 |      */
244 |     _scroll: function(event) {
245 |       if (this.isActivated) {
246 |         // Prevent scrolling in the wrong direction
247 |         if (!this.horizontal && this.scroller.scrollLeft !== 0 || this.horizontal && this.scroller.scrollTop !== 0) {
248 |           if (!this.horizontal)
249 |             this.scroller.scrollLeft = 0;
250 |           else
251 |             this.scroller.scrollTop = 0;
252 |           if (event.stopPropagation) {
253 |             event.stopPropagation();
254 |           }
255 |           event.cancelBubble = true;
256 |           if (event.preventDefault) {
257 |             event.preventDefault();
258 |           }
259 |           event.returnValue = false;
260 |         }
261 |       }
262 |     }
263 |   };
264 | 
265 |   /** @polymerBehavior Polymer.ParallaxScrollerBehavior */
266 |   Polymer.ParallaxScrollerBehavior = [
267 |     Polymer.IronResizableBehavior,
268 |     Polymer.ParallaxScrollerBehaviorImpl
269 |   ];
270 | </script>


--------------------------------------------------------------------------------