-
Notifications
You must be signed in to change notification settings - Fork 78
/
watsonlogic-parallax.js
83 lines (75 loc) · 2.1 KB
/
watsonlogic-parallax.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
/**
* `watsonlogic-parallax`
* `Parallax scrolling effect web component for Polymer 2.0.`
*
* @customElement
* @polymer
* @polymerLegacy
* @demo demo/index.html
*/
let WatsonlogicParallax = Polymer({
_template: html`
<style>
:host {
display: block;
--parallax-background-height: 300px;
--parallax-slogan-top: 150px;
--parallax-background-image: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
}
.parallax-background {
background: var(--parallax-background-image);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: var(--parallax-background-height);
position: relative;
}
.slogan {
bottom: 0;
left: 0;
opacity: 1;
position: absolute;
right: 0;
text-align: center;
top: var(--parallax-slogan-top);
transform-origin: center top !important;
}
</style>
<div class="parallax-background">
<div id="slogan" class="slogan">[[parallaxText]]</div>
</div>
`,
is: "watsonlogic-parallax",
properties: {
parallaxText: {
type: String
},
parallaxImage: {
type: String,
notify: true,
reflectToAttribute: true
},
parallaxImageHeight: {
type: String,
notify: true,
reflectToAttribute: true
}
},
ready: function() {
let self = this;
self.parallaxImage =
self.parallaxImage ||
"https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg";
Number.isNaN(parseInt(self.parallaxImageHeight))
? "300"
: parseInt(self.parallaxImageHeight);
this.updateStyles({
"--parallax-background-image": "url(" + self.parallaxImage + ")",
"--parallax-background-height": self.parallaxImageHeight + "px",
"--parallax-slogan-top": parseInt(self.parallaxImageHeight) / 2 + "px"
});
}
});
export { WatsonlogicParallax };