-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
97 lines (71 loc) · 3.91 KB
/
demo.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
<title>Parallax Demo</title>
<!-- Parallax implementation -->
<script src="prototype/implementation.js"></script>
<!-- Code highlighting -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<style>
html, body {
margin: 0;
}
.header {
background: url("images/sunset.jpg");
background-size: cover;
height: 30vh;
}
.content {
position: relative;
background: white;
padding: 2em;
}
</style>
</head>
<body>
<parallax-container>
<parallax-content rate="0.3">
<div class="header"></div>
</parallax-content>
<div class="content">
<h1>Parallax</h1>
<p>Parallax is a common technique used in application interfaces to make the interface appear to have real depth.</p>
<p>This demo shows the use of a polyfill of this feature using custom elements. The header is moving at a rate of 30% of the scroll. Try changing it and seeing the rate update.</p>
<h2>How to use it</h2>
<p>To add an element which moves with parallax, put a <code><parallax-content></code> element within a <code><parallax-container></code> element. The <code>rate</code> attribute on the <code><parallax-content></code> element defines how quickly the item moves with respect to the scroll movement.</p>
<pre><code class="html"><!--
<script src="https://cdn.example/parallax.js"></script>
<parallax-container>
<parallax-content rate="0.3">
<img src="slowly-moving-background-content.jpg">
</parallax-content>
<div>
Normally scrolling content.
</div>
</parallax-container>
--></code></pre>
<script>
// Escape HTML.
let html = document.querySelector('.html').innerHTML;
document.querySelector('.html').textContent = html.substring(4, html.length - 3);
hljs.highlightBlock(document.querySelector('.html'));
</script>
<p>The <code><parallax-container></code> element constrains the range within which the parallax element can move so the static content which will cover up the parallax content should be within the container as well.</p>
<h2>How does the polyfill work?</h2>
<p>Without native support, parallax can be implemented in two ways to make use of browser's native accelerated scrolling:</p>
<ul>
<li>Using perspective on the scrolling element to cause the shift in the scrolled parallax element to not be as great as the scrolled content.</li>
<li>Using sticky position with a transform (scale or perspective) to make the sticky position offset not actually shift the element as much as necessary to counteract the scroll. This works because the sticky position shift is a layout time position shift which happens before transforms.</li>
</ul>
<p>The perspective implementation unfortunately doesn't work on mobile Safari with the <code>webkit-overflow-scrolling: touch</code> property, and sticky position is not yet implemented on the Edge browser. This means that using both approaches is necessary to achieve support on all major browsers.</p>
<p>The polyfill currently only supports the <code>position: sticky</code> technique of implementing parallax which does not work on Microsoft Edge</p>
<h2>Concessions for polyfill</h2>
<p>In order to make the existing approaches for position sticky work, some concessions have been made:</p>
<p>For sticky, the containing block of the element must set perspective and encompass all of the content.</p>
<p>For perspective, the perspective style must be applied on or above a node which defines the overflow. This means that it can only be used with overflow scrolling nodes which prevents hiding top controls on mobile browsers.</p>
</div>
</parallax-container>
</body>
</html>