| OLD | NEW |
| (Empty) |
| 1 /** | |
| 2 * While scrolling down, fade in the rear background layer and fade out the fr
ont background | |
| 3 * layer (opacity interpolated based on scroll position). | |
| 4 */ | |
| 5 Polymer.AppLayout.registerEffect('blend-background', { | |
| 6 /** @this Polymer.AppLayout.ElementWithBackground */ | |
| 7 setUp: function setUp() { | |
| 8 var fx = {}; | |
| 9 fx.backgroundFrontLayer = this._getDOMRef('backgroundFrontLayer'); | |
| 10 fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer'); | |
| 11 fx.backgroundFrontLayer.style.willChange = 'opacity'; | |
| 12 fx.backgroundFrontLayer.style.transform = 'translateZ(0)'; | |
| 13 fx.backgroundRearLayer.style.willChange = 'opacity'; | |
| 14 fx.backgroundRearLayer.style.transform = 'translateZ(0)'; | |
| 15 fx.backgroundRearLayer.style.opacity = 0; | |
| 16 this._fxBlendBackground = fx; | |
| 17 }, | |
| 18 /** @this Polymer.AppLayout.ElementWithBackground */ | |
| 19 run: function run(p, y) { | |
| 20 var fx = this._fxBlendBackground; | |
| 21 fx.backgroundFrontLayer.style.opacity = 1 - p; | |
| 22 fx.backgroundRearLayer.style.opacity = p; | |
| 23 }, | |
| 24 /** @this Polymer.AppLayout.ElementWithBackground */ | |
| 25 tearDown: function tearDown() { | |
| 26 delete this._fxBlendBackground; | |
| 27 } | |
| 28 }); | |
| OLD | NEW |