-
Notifications
You must be signed in to change notification settings - Fork 86
/
Copy pathindex.html
171 lines (150 loc) · 8.05 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fokus - Emphasized text-highlighting using JavaScript</title>
<meta name="description" content="Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.">
<meta name="author" content="Hakim El Hattab">
<meta name="viewport" content="width=800, user-scalable=no">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/demo.css">
<link rel="icon" type="image/png" href="favicon.ico">
</head>
<body>
<div class="intro">
<article>
<h1>Fokus</h1>
<p>
Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.
</p>
<p>
Try it out by selecting this paragraph or the sample content below. You'll see the entire page fade out while this text is highlighted.
</p>
<p>
If you want to use Fokus on your site you just need to include the <a href="https://github.com/hakimel/Fokus/blob/master/js/fokus.min.js">fokus.min.js</a> script (3kb, no dependencies).
</p>
<p>
Fokus is also available as a <a href="https://chrome.google.com/webstore/detail/flkkpmjbbpijiedjdgnhkcgopgnflehe">Chrome extension</a>.
</p>
<small>
Created by <a href="https://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
</small>
</article>
<div class="sharing">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Fokus - Emphasized text-highlighting using JavaScript by @hakimel" data-url="http://lab.hakim.se/fokus" data-count="small" data-related="hakimel"></a>
<iframe id="facebook-button" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Ffokus%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
</div>
<a href="https://github.com/hakimel/fokus"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
</div>
<!-- START DEMO CONTENT FROM http://hakim.se -->
<div class="demo">
<article class='experiments single' id='meny'>
<h2>Meny</h2>
<a class="image-link" href="http://lab.hakim.se/meny/" title="View demo">
<img alt="Meny" height="299" src="https://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" width="320">
</a>
<p>
An experimental CSS 3D fold-in menu. Works in any browser that supports CSS 3D transforms, that includes Mobile Safari so get your iPhone ready!
</p>
</article>
<article class='experiments single' id='scroll-effects'>
<h2>CSS Scroll Effects</h2>
<a class="image-link" href="http://lab.hakim.se/scroll-effects" title="Launch">
<img alt="CSS3 Scroll Effects" height="383" src="https://s3.amazonaws.com/hakim-static/portfolio/images/scroll-effects.png" width="320">
</a>
<p>
Decided it was time for some CSS tinkering again and ended up creating this set of CSS3 scrolling styles. Not intended for any practical use but the visuals are surprisingly impactful.
</p>
<p>
This works by applying a
<code>future</code>/<code>past</code>
class to list items outside of the viewport as you scroll. Based on this class a variety of transforms are transitioned to via CSS.
</p>
<p>
Thanks
<a href="http://paulirish.com/">Paul Irish</a>
for improving the JavaScript performance!
</p>
</article>
<article class='experiments single' id='linjer'>
<h2>Linjer</h2>
<a class="image-link" href="http://lab.hakim.se/linjer/" title="View demo">
<img alt="Meny" height="226" src="https://s3.amazonaws.com/hakim-static/portfolio/images/linjer.jpg" width="320">
</a>
<p>
An interactive experiment based on the visuals originally created for
<a href="/experiments/radar">Radar</a>.
</p>
</article>
<article class='experiments single' id='avgrund'>
<h2>Avgrund</h2>
<a class="image-link" href="http://lab.hakim.se/avgrund/" title="View demo">
<img alt="Meny" height="219" src="https://s3.amazonaws.com/hakim-static/portfolio/images/avgrund.png" width="320">
</a>
<p>
A conceptual modal which gives a sense of depth between the page and modal layers.
</p>
</article>
<article class='experiments single' id='radar'>
<h2>Radar</h2>
<a class="image-link" href="http://lab.hakim.se/radar/" title="View demo">
<img alt="Radar" height="260" src="https://s3.amazonaws.com/hakim-static/portfolio/images/radar.jpg" width="320">
</a>
<p>
An audio-visual experiment that uses
<a href-"https://github.com/oampo/Audiolet">Audiolet</a>
to synthesize sound in real-time. The visuals are rendered on
<code><canvas></code>.
</p>
</article>
<article class='projects double' data-showin='experiments' id='sinuous-ios'>
<h2>Sinuous for iPhone & iPad</h2>
<a class="image-link" href="http://itunes.apple.com/us/app/sinuous/id543097218?ls=1&mt=8" title="Open in the App Store">
<img alt="Sinuous" height="300" src="https://s3.amazonaws.com/hakim-static/portfolio/images/sinuous-ios.png" width="695">
</a>
<div class="two-columns">
<p>
Almost two years after releasing the
<a href="http://www.sinuousgame.com">web version</a>
Sinuous has finally made its way to the App Store! The gameplay is very much alike the web but it ties into Game Center so that you can compete with friends. Oh, and keep and eye our for the new 'vortex'-boost!
</p>
<p>
The game is still powered by JavaScript and rendered on HTML canvas. It relies on native code for audio and Game Center integration but that bit was easy thanks to the ever so lovely
<a href="http://phonegap.com/">PhoneGap</a>. I'm very happy with how well the controls translated to touch and I hope you will be too.
</p>
<p>
This runs as smooth as butter on the iPad but the framerate is a bit shaky on the iPhone 4. I will be releasing an update soon to address that as well as some other improvements.
<a href="http://itunes.apple.com/us/app/sinuous/id543097218?ls=1&mt=8">Try it out</a>!
</p>
</div>
</article>
<article class='experiments single' id='forkit-js'>
<h2>forkit.js</h2>
<a class="image-link" href="http://lab.hakim.se/forkit-js/" title="View demo">
<img alt="forkit.js" height="260" src="https://s3.amazonaws.com/hakim-static/portfolio/images/forkit-js.png" width="320">
</a>
<p>
An experimental animated ribbon which lets you drag down a curtain of additional content. A fun twist on the "Fork me on GitHub" banner! Created with JavaScript-controlled CSS3 transforms.
</p>
</article>
<article class='projects single' id='rvl-io'>
<h2>rvl.io</h2>
<a class="image-link" href="http://www.rvl.io/" title="Visit rvl.io">
<img alt="rvl.io" height="305" src="https://s3.amazonaws.com/hakim-static/portfolio/images/rvl-io.jpg" width="320">
</a>
<p>
As
<a href="http://lab.hakim.se/reveal-js">reveal.js</a>
has grown more popular there has been a lot of requests for an online editor and
<a href="http://www.rvl.io/">rvl.io</a>
is the answer. rvl.io is a service for authoring, storing and presenting slide decks without having to touch the underlying HTML of reveal.js. It was created by myself (frontend) and
<a href="https://twitter.com/h__r__j">@h__r__j</a>
(backend).
</p>
</article>
</div>
<!-- END DEMO CONTENT FROM http://hakim.se -->
<script src="js/fokus.min.js"></script>
<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
</body>
</html>