forked from mikefowler/crossfade.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (91 loc) · 4.97 KB
/
index.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>crossfade.js</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<link rel="stylesheet" type="text/css" href="demo/style.css">
</head>
<body>
<section class="js-section">
<div class="banner js-example-1" data-crossfade-start="demo/01.jpg" data-crossfade-end="demo/01-blur.jpg">
<h1 class="js-parallax">crossfade.js</h1>
</div>
<div class="content center">
<h2>Crossfade.js is a tiny (~3kb) jQuery plugin for crossfading images as you scroll down a page.</h2>
<h3>Try it. Scroll down.</h3>
<h4>Do it. I bet you won't do it.</h4>
</div>
</section>
<section class="js-section">
<div class="banner js-example-2">
<h1>Oooh! Neato.</h1>
</div>
<div class="content">
<h2 class="center">It is, isn't it? Here's how to use it.</h2>
<p>Download <a href="https://github.com/mikefowler/crossfade.js">the source code</a> or install it with Bower…</p>
<pre><code class="language-bash">bower install crossfade.js</code></pre>
<p>And initialize it…</p>
<pre><code class="language-javascript">$(function () {
$('.crossfade').crossfade(options);
});</code></pre>
<h3>Options</h3>
<table class="options">
<tr>
<th>start</th>
<td><em>required</em> The URL of the first (start) image. You can also define this property as a <code>data-crossfade-start</code> attribute on the element itself.</td>
</tr>
<tr>
<th>end</th>
<td><em>required</em> The URL of the second (end) image. You can also define this property as a <code>data-crossfade-end</code> attribute on the element itself.</td>
</tr>
<tr>
<th>threshold</th>
<td><em>Default: 0.5</em><br>A number between 0 and 1 that determines how quickly the crossfade occurs as the element scrolls off-screen</td>
</tr>
<tr>
<th>backgroundPosition</th>
<td><em>Default: 'center center'</em><br>Determines the positioning of the background images. Backgrounds are sized similarly to CSS's “background-size: cover”. This option determines along which edges the image is aligned.</td>
</tr>
</table>
<h2 class="center">Technical Details</h2>
<p>Under the hood, Crossfade.js does the following…</p>
<ol>
<li>Preloads the start and ending images</li>
<li>Generates a <code><canvas></code> element and appends it to our element. The canvas is automatically set to cover its parent, via absolute positioning.</li>
<li>The starting and ending images are drawn into the <code><canvas></code> and, depending on the position of the element in the viewport, superimposed on top of one another.</li>
<li>Images are redrawn using <code>window.requestAnimationFrame</code>, allowing for exceptionally performant rendering. Browsers that do not support <code>window.requestAnimationFrame</code> yet will fall back to a timeout loop.</li>
</ol>
<h2 class="center">Notes</h2>
<p>Some things to keep in mind…</p>
<ol>
<li>The elements you initialize Crossfade.js on must be able to contain their children. Use CSS to set the position to “relative”, “absolute” or “fixed”, depending on your use case.</li>
<li>Any content already inside the element you initialize Crossfade.js on will need to be set to “position: relative” to make sure it's visible above the injected <code><canvas></code> element:
<pre><code class="language-markup"><div class="cover">
<div class="cover-content" style="position: relative;">
<h1>Make sure I'm above the background!</h1>
</div>
<!-- I get injected by crossfade.js -->
<canvas></canvas>
</div></code></pre></li>
</ol>
</div>
</section>
<a href="http://github.com/mikefowler/crossfade" class="github-button">View on Github</a>
<footer>
<p class="content">A thing made by <a href="http://mikefowler.me">Mike Fowler</a>.<br>Crossfade.js is inspired and influenced by the kick-ass work of all the engineers at <a href="http://medium.com">Medium</a>.</p>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-10512170-10', 'mikefowler.me');
ga('send', 'pageview');
</script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="src/crossfade.jquery.js"></script>
<script src="demo/app.js"></script>
<script src="demo/prism.js"></script>
</body>
</html>