├── .gitignore
├── README.md
├── css
    ├── component.css
    ├── demo.css
    └── normalize.css
├── favicon.ico
├── img
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── close.cur
    ├── close.png
    ├── map.png
    ├── pins.svg
    ├── related
    │   ├── ImageTiltEffect.jpg
    │   └── TooltipStylesInspiration.png
    └── sponsor
    │   └── AcuityScheduling_logo.svg
├── index.html
└── js
    ├── imagesloaded.pkgd.min.js
    ├── lunar.js
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Simple Interactive Points Effect
 2 | 
 3 | An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.
 4 | 
 5 | [Article on Codrops](http://tympanus.net/codrops/?p=27459)
 6 | 
 7 | [Demo](http://tympanus.net/Development/InteractivePoints/)
 8 | 
 9 | ![Featured Image Interactive Points](http://tympanus.net/codrops/wp-content/uploads/2016/07/InteractivePoints_800x600.jpg)
10 | 
11 | ## Sponsor
12 | 
13 | This demo is sponsored by [Acuity Scheduling](https://goo.gl/VqOfus).
14 | 
15 | ## License
16 | 
17 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 
18 | 
19 | Read more here: [License](http://tympanus.net/codrops/licensing/)
20 | 
21 | ## Credits
22 | 
23 | - [Lunar.js](https://github.com/toddmotto/lunar) by Todd Motto: SVG class module for has/add/remove/toggleClass
24 | 
25 | - [Map](https://www.openstreetmap.org/way/4358417#map=18/51.50980/-0.13000) by OpenStreetMap®. OpenStreetMap® is open data, licensed under the [Open Data Commons Open Database License (ODbL)](http://opendatacommons.org/licenses/odbl/) by the [OpenStreetMap Foundation (OSMF)](OpenStreetMap Foundation). Read more here: [https://www.openstreetmap.org/copyright](https://www.openstreetmap.org/copyright)
26 | 
27 | - Location pin icon made by [Madebyoliver](http://www.flaticon.com/authors/madebyoliver "Madebyoliver") from [www.flaticon.com](http://www.flaticon.com "Flaticon") is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/ "Creative Commons BY 3.0")
28 | 
29 | - Vintage London images by [Stockholm Transport Museum](https://www.flickr.com/photos/stockholmtransportmuseum_commons/), [London, England album](https://www.flickr.com/photos/stockholmtransportmuseum_commons/albums/72157627860632062).
30 | 
31 | ## Misc
32 | 
33 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)
34 | 
35 | [© Codrops 2016](http://www.codrops.com)
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/css/component.css:
--------------------------------------------------------------------------------
  1 | .interactive-points {
  2 | 	position: relative;
  3 | 	display: inline-block;
  4 | 	overflow: hidden;
  5 | 	width: 100%;
  6 | 	margin-bottom: -0.4em;
  7 | 	background: #cfced7;
  8 | }
  9 | 
 10 | .interactive-points:focus {
 11 | 	outline: none;
 12 | }
 13 | 
 14 | .backgrounds,
 15 | .background__element {
 16 | 	position: relative;
 17 | 	width: 100%;
 18 | }
 19 | 
 20 | .background__element {
 21 | 	height: 50vh;
 22 | 	background-repeat: no-repeat;
 23 | 	background-position: 50% 50%;
 24 | 	background-size: cover;
 25 | }
 26 | 
 27 | .static {
 28 | 	position: relative;
 29 | 	display: block;
 30 | 	margin: 0 auto;
 31 | 	opacity: 0.5;
 32 | }
 33 | 
 34 | .points {
 35 | 	position: absolute;
 36 | 	top: 0;
 37 | 	left: 0;
 38 | 	display: none;
 39 | }
 40 | 
 41 | .static,
 42 | .points {
 43 | 	width: 100%;
 44 | 	height: auto;
 45 | }
 46 | 
 47 | @media screen and (min-aspect-ratio: 1885/1000) {
 48 | 	.static,
 49 | 	.points {
 50 | 		width: auto;
 51 | 		height: calc(100vh - 6em);
 52 | 		min-height: 500px;
 53 | 	}
 54 | }
 55 | 
 56 | .points {
 57 | 	left: 50%;
 58 | 	-webkit-transform: translate3d(-50%,0,0);
 59 | 	transform: translate3d(-50%,0,0);
 60 | }
 61 | 
 62 | .point {
 63 | 	cursor: pointer;
 64 | 	fill: #28282f;
 65 | 	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s, fill 0.3s;
 66 | 	transition: opacity 0.3s, transform 0.3s, fill 0.3s;
 67 | 	-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
 68 | 	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
 69 | }
 70 | 
 71 | .point--active {
 72 | 	fill: #408283;
 73 | 	-webkit-transform: scale3d(1.3,1.3,1);
 74 | 	transform: scale3d(1.3,1.3,1);
 75 | }
 76 | 
 77 | .point--hide {
 78 | 	opacity: 0;
 79 | 	pointer-events: none;
 80 | 	-webkit-transform: translate3d(0,10px,0);
 81 | 	transform: translate3d(0,10px,0);
 82 | }
 83 | 
 84 | .points-tooltips,
 85 | .points-content {
 86 | 	position: absolute;
 87 | 	bottom: 0;
 88 | 	left: 0;
 89 | 	width: 100%;
 90 | 	height: 100%;
 91 | 	pointer-events: none;
 92 | }
 93 | 
 94 | .points-tooltips {
 95 | 	display: -webkit-box;
 96 | 	display: -ms-flexbox;
 97 | 	display: flex;
 98 | 	-webkit-box-orient: vertical;
 99 | 	-webkit-box-direction: normal;
100 | 	-ms-flex-direction: column;
101 | 	flex-direction: column;
102 | 	-webkit-box-pack: end;
103 | 	-ms-flex-pack: end;
104 | 	justify-content: flex-end;
105 | }
106 | 
107 | .point-tooltip {
108 | 	height: 50vh;
109 | }
110 | 
111 | .point-tooltip__title {
112 | 	font-family: 'Source Serif Pro', serif;
113 | 	font-size: 1.5em;
114 | 	line-height: 1;
115 | 	margin: 0 0 0.15em;
116 | 	display: inline-block;
117 | 	background: #28282f;
118 | 	padding: 5px;
119 | }
120 | 
121 | .point-tooltip__description {
122 | 	font-size: 0.85em;
123 | 	font-weight: 500;
124 | 	margin: 0;
125 | 	line-height: 1;
126 | 	display: inline-block;
127 | 	background: #28282f;
128 | 	padding: 5px;
129 | }
130 | 
131 | .points-content {
132 | 	-webkit-transition: background 0.1s;
133 | 	transition: background 0.1s;
134 | }
135 | 
136 | .points-content--open {
137 | 	cursor: url(img/close.cur), pointer;
138 | 	pointer-events: auto;
139 | 	background: rgba(50,49,59,0.6);
140 | }
141 | 
142 | @supports (cursor: zoom-in) {
143 |     .points-content--open {
144 | 		cursor: url(../img/close.png) 12 6, pointer;
145 | 	}
146 | }
147 | 
148 | .point-content {
149 | 	font-size: 1.25em;
150 | 	position: absolute;
151 | 	bottom: 0;
152 | 	left: 0;
153 | 	width: 100%;
154 | 	min-width: 300px;
155 | 	padding: 0 0 3em 3em;
156 | 	opacity: 0;
157 | }
158 | 
159 | .point-content--current {
160 | 	pointer-events: auto;
161 | 	opacity: 1;
162 | }
163 | 
164 | .point-content__title {
165 | 	font-family: 'Source Serif Pro', serif;
166 | 	font-size: 2.25em;
167 | 	margin: 0;
168 | 	text-shadow: 0 1px 5px rgba(0,0,0,0.2);
169 | }
170 | 
171 | .point-content__subtitle {
172 | 	font-family: 'Source Serif Pro', serif;
173 | 	font-weight: bold;
174 | 	margin: 0.25em 0 0;
175 | 	display: inline-block;
176 | 	background: #408283;
177 | 	color: #28282f;
178 | 	padding: 0 10px;
179 | 	line-height: 1.5;
180 | }
181 | 
182 | .point-content__text {
183 | 	font-weight: 500;
184 | 	margin: 1em 0 0 0;
185 | }
186 | 
187 | .point-content > * {
188 | 	opacity: 0;
189 | 	-webkit-transform: translate3d(0,-40px,0);
190 | 	transform: translate3d(0,-40px,0);
191 | 	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
192 | 	transition: opacity 0.3s, transform 0.3s;
193 | }
194 | 
195 | .point-content--current > * {
196 | 	opacity: 1;
197 | 	-webkit-transform: translate3d(0,0,0);
198 | 	transform: translate3d(0,0,0);
199 | }
200 | 
201 | .point-content--current > *:first-child {
202 | 	-webkit-transition-delay: 0.1s;
203 | 	transition-delay: 0.1s;
204 | }
205 | 
206 | .point-content--current > *:nth-child(2) {
207 | 	-webkit-transition-delay: 0.05s;
208 | 	transition-delay: 0.05s;
209 | }
210 | 
211 | /* Second example */
212 | .interactive-points--alter .point-content {
213 | 	text-align: right;
214 | 	left: auto;
215 | 	right: 0;
216 | 	padding: 0 3em 3em;
217 | }
218 | 
219 | @media screen and (min-width: 52.375em) {
220 | 	.point-content {
221 | 		width: 50%;
222 | 	}
223 | 	.js .points {
224 | 		display: block;
225 | 	}
226 | 	.js .backgrounds,
227 | 	.js .background__element {
228 | 		position: absolute;
229 | 		top: 0;
230 | 		left: 0;
231 | 		width: 100%;
232 | 		height: 100%;
233 | 	}
234 | 	.js .background__element {
235 | 		opacity: 0;
236 | 		-webkit-transition: opacity 0.1s;
237 | 		transition: opacity 0.1s;
238 | 	}
239 | 	.js .points-tooltip {
240 | 		display: block;
241 | 	}
242 | 	.js .point-tooltip {
243 | 		position: absolute;
244 | 		margin: 0.75em 0 0 0.25em;
245 | 		opacity: 0;
246 | 		-webkit-transform: translate3d(0,10px,0);
247 | 		transform: translate3d(0,10px,0);
248 | 		-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
249 | 		transition: opacity 0.3s, transform 0.3s;
250 | 	}
251 | 	.js .point-tooltip--current {
252 | 		opacity: 1;
253 | 		-webkit-transform: translate3d(0,0,0);
254 | 		transform: translate3d(0,0,0);
255 | 	}
256 | }
257 | 
258 | 
259 | 
260 | 


--------------------------------------------------------------------------------
/css/demo.css:
--------------------------------------------------------------------------------
  1 | *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }
  2 | 
  3 | body {
  4 | 	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  5 | 	color: #fff;
  6 | 	background: #34343d;
  7 | 	-webkit-font-smoothing: antialiased;
  8 | 	-moz-osx-font-smoothing: grayscale;
  9 | 	text-align: center;
 10 | }
 11 | 
 12 | a {
 13 | 	outline: none;
 14 | 	color: #60B8B9;
 15 | 	text-decoration: none;
 16 | }
 17 | 
 18 | a:hover, a:focus {
 19 | 	color: #fff;
 20 | }
 21 | 
 22 | .hidden {
 23 | 	position: absolute;
 24 | 	overflow: hidden;
 25 | 	width: 0;
 26 | 	height: 0;
 27 | 	pointer-events: none;
 28 | }
 29 | 
 30 | .message {
 31 | 	font-weight: bold;
 32 | 	color: #914a58;
 33 | 	background: #f0d4d8;
 34 | 	font-size: 0.85em;
 35 | 	margin: 0;
 36 | 	padding: 1em;
 37 | 	display: none;
 38 | }
 39 | 
 40 | /* Icons */
 41 | .icon-link {
 42 | 	padding: 0 0.5em;
 43 | 	margin: 0 0 0 auto;
 44 | 	font-size: 0.85em;
 45 | 	white-space: nowrap;
 46 | }
 47 | 
 48 | .icon {
 49 | 	display: inline-block;
 50 | 	vertical-align: middle;
 51 | 	width: 1.5em;
 52 | 	height: 1.5em;
 53 | 	margin: 0 auto;
 54 | 	fill: currentColor;
 55 | }
 56 | 
 57 | .icon-text {
 58 | 	line-height: 1;
 59 | 	vertical-align: middle;
 60 | 	padding: 0.35em;
 61 | 	font-weight: bold;
 62 | 	display: inline-block;
 63 | }
 64 | 
 65 | main {
 66 | 	max-width: 1885px;
 67 | 	display: inline-block;
 68 | 	margin: 0 auto;
 69 | 	position: relative;
 70 | 	text-align: left;
 71 | }
 72 | 
 73 | /* Header */
 74 | .codrops-header {
 75 | 	position: relative;
 76 | 	padding: 1em;
 77 | 	width: 100%;
 78 | 	display: -webkit-box;
 79 | 	display: -ms-flexbox;
 80 | 	display: -webkit-flex;
 81 | 	display: flex;
 82 | 	-webkit-box-orient: horizontal;
 83 | 	-webkit-box-direction: normal;
 84 | 	-ms-flex-direction: row;
 85 | 	-webkit-flex-direction: row;
 86 | 	flex-direction: row;
 87 | 	-webkit-align-items: center;
 88 | 	align-items: center;
 89 | 	z-index: 10;
 90 | 	background: #28282f;
 91 | }
 92 | 
 93 | .codrops-header__title {
 94 | 	margin: 0;
 95 | 	letter-spacing: -1px;
 96 | 	font-size: 1.65em;
 97 | 	white-space: nowrap;
 98 | 	line-height: 1;
 99 | 	font-family: 'Source Serif Pro', serif;
100 | }
101 | 
102 | .codrops-header__tagline {
103 | 	margin: 0 0 0 1.5em;
104 | 	color: #495050;
105 | 	font-weight: bold;
106 | }
107 | 
108 | /* Top Navigation Style */
109 | .codrops-links {
110 | 	position: relative;
111 | 	display: inline-block;
112 | 	text-align: center;
113 | 	white-space: nowrap;
114 | 	font-size: 0.8em;
115 | 	margin: 0 1em 0 0;
116 | }
117 | 
118 | .codrops-links::after {
119 | 	position: absolute;
120 | 	top: 15%;
121 | 	left: 50%;
122 | 	width: 1px;
123 | 	height: 70%;
124 | 	background: currentColor;
125 | 	opacity: 0.2;
126 | 	content: '';
127 | 	-webkit-transform: rotate3d(0,0,1,22.5deg);
128 | 	transform: rotate3d(0,0,1,22.5deg);
129 | }
130 | 
131 | .codrops-icon {
132 | 	display: inline-block;
133 | 	margin: 0.5em;
134 | 	padding: 0.5em;
135 | }
136 | 
137 | /* Demo links */
138 | .codrops-demos {
139 | 	margin: 0 0 0 auto;
140 | 	text-align: right;
141 | }
142 | 
143 | .codrops-demos a {
144 | 	display: inline-block;
145 | 	margin: 0 0.5em;
146 | 	font-weight: bold;
147 | }
148 | 
149 | .codrops-demos a.current-demo {
150 | 	color: #28282f;
151 | }
152 | 
153 | /* Content */
154 | .content {
155 | 	background: #28282f;
156 | }
157 | 
158 | .content__inner {
159 | 	max-width: 1000px;
160 | 	margin: 0 auto;
161 | 	padding: 8em 10% 4em;
162 | }
163 | 
164 | .content__title,
165 | .content__subtitle {
166 | 	font-family: 'Source Serif Pro', serif;
167 | }
168 | 
169 | .content__title {
170 | 	font-size: 3em;
171 | 	margin: 0;
172 | }
173 | 
174 | .content__subtitle {
175 | 	font-size: 2em;
176 | 	font-weight: normal;
177 | 	margin: 0.25em 0 0;
178 | 	color: #9f9da7;
179 | }
180 | 
181 | .content p {
182 | 	font-size: 1.175em;
183 | 	line-height: 1.6;
184 | 	margin: 1.5em 0;
185 | }
186 | 
187 | p.margin-paragraph {
188 | 	margin: 8em 0 1.5em;
189 | }
190 | 
191 | /* Related demos */
192 | .content--related {
193 | 	padding: 4em 1em;
194 | 	text-align: center;
195 | 	font-weight: bold;
196 | 	background: #1c1c21;
197 | 	color: #495050;
198 | }
199 | 
200 | .content--related a:hover,
201 | .content--related a:focus {
202 | 	color: #fff;
203 | }
204 | 
205 | .media-item {
206 | 	display: inline-block;
207 | 	padding: 1em;
208 | 	vertical-align: top;
209 | 	-webkit-transition: color 0.3s;
210 | 	transition: color 0.3s;
211 | }
212 | 
213 | .media-item__img {
214 | 	max-width: 100%;
215 | 	opacity: 0.3;
216 | 	-webkit-transition: opacity 0.3s;
217 | 	transition: opacity 0.3s;
218 | }
219 | 
220 | .media-item:hover .media-item__img,
221 | .media-item:focus .media-item__img {
222 | 	opacity: 1;
223 | }
224 | 
225 | .media-item__title {
226 | 	margin: 0;
227 | 	padding: 0.5em;
228 | 	font-size: 1em;
229 | }
230 | 
231 | /* Sponsor */
232 | .pater {
233 | 	display: none;
234 | 	position: relative;
235 | 	background: rgba(96,184,185,0.6);
236 | 	padding: 2.5em 1em 2.5em;
237 | 	width: 100%;
238 | 	pointer-events: auto;
239 | }
240 | 
241 | .pater:focus {
242 | 	outline: none;
243 | }
244 | 
245 | .pater::after {
246 | 	content: 'Sponsored by';
247 | 	position: absolute;
248 | 	top: 20px;
249 | 	left: 20px;
250 | 	color: #408283;
251 | 	font-size: 0.65em;
252 | 	font-weight: bold;
253 | }
254 | 
255 | .pater__img {
256 | 	max-width: 100%;
257 | }
258 | 
259 | .pater__title {
260 | 	font-size: 1em;
261 | 	color: #fff;
262 | 	margin: 0 0 0.25em 10px;
263 | }
264 | 
265 | .pater__description {
266 | 	color: #1a2638;
267 | 	font-size: 0.85em;
268 | 	font-weight: 600;
269 | 	margin: 0 0 0 10px;
270 | }
271 | 
272 | .pater__description strong {
273 | 	color: #ffe38e;
274 | }
275 | 
276 | .pater--responsive {
277 | 	display: block;
278 | }
279 | 
280 | @media screen and (min-width: 52.375em) {
281 | 	.pater {
282 | 		display: block;
283 | 		position: absolute;
284 | 		bottom: 0;
285 | 		right: 0;	
286 | 		width: 400px;
287 | 		padding: 2.5em 1em 1em;
288 | 		-webkit-transform: translate3d(0,3.5em,0);
289 | 		transform: translate3d(0,3.5em,0);
290 | 		-webkit-transition: background 0.3s, -webkit-transform 0.3s;
291 | 		transition: background 0.3s, transform 0.3s;
292 | 	}
293 | 	.points-content--open ~ .pater {
294 | 		pointer-events: none;
295 | 		-webkit-transform: translate3d(0,100%,0);
296 | 		transform: translate3d(0,100%,0);
297 | 	}
298 | 	.pater:focus,
299 | 	.pater:hover {
300 | 		background: rgba(96,184,185,1);
301 | 		-webkit-transform: translate3d(0,0,0);
302 | 		transform: translate3d(0,0,0);
303 | 	}
304 | 	.pater__img {
305 | 		-webkit-transform-origin: 0% 50%;
306 | 		transform-origin: 0% 50%;
307 | 		-webkit-transform: scale(1.5);
308 | 		transform: scale(1.5);
309 | 		-webkit-transition: -webkit-transform 0.3s;
310 | 		transition: transform 0.3s;
311 | 	}
312 | 	.pater:focus .pater__img,
313 | 	.pater:hover .pater__img {
314 | 		-webkit-transform: scale(1);
315 | 		transform: scale(1);
316 | 	}
317 | 	.pater__description {
318 | 		opacity: 0;
319 | 		-webkit-transform: translate3d(0,1em,0);
320 | 		transform: translate3d(0,1em,0);
321 | 		-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
322 | 		transition: opacity 0.3s, transform 0.3s;
323 | 	}
324 | 
325 | 	.pater:focus .pater__description,
326 | 	.pater:hover .pater__description {
327 | 		-webkit-transform: translate3d(0,0,0);
328 | 		transform: translate3d(0,0,0);
329 | 		opacity: 1;
330 | 	}
331 | 	.pater--responsive {
332 | 		display: none;
333 | 	}
334 | }
335 | 
336 | @media screen and (max-width: 52.375em) {
337 | 	.codrops-header {
338 | 		padding: 0.25em;
339 | 		font-size: 0.65em;
340 | 	}
341 | 	.codrops-header__tagline {
342 | 		display: none;
343 | 	}
344 | 	.content {
345 | 		font-size: 0.75em;
346 | 	}
347 | 	.message {
348 | 		display: block;
349 | 	}
350 | }
351 | 


--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/favicon.ico


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/1.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/2.jpg


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/3.jpg


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/4.jpg


--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/5.jpg


--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/6.jpg


--------------------------------------------------------------------------------
/img/close.cur:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/close.cur


--------------------------------------------------------------------------------
/img/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/close.png


--------------------------------------------------------------------------------
/img/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/map.png


--------------------------------------------------------------------------------
/img/pins.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="1885px" height="923px" viewBox="0 0 1885 923" style="enable-background:new 0 0 1885 923;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#7B64AC;}
 7 | 	.st1{fill:#0B0B0B;}
 8 | </style>
 9 | <image style="overflow:visible;" width="1885" height="923" xlink:href="map.png" >
10 | </image>
11 | <path class="st0" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21
12 | 	C416.3,213.8,415.6,201.8,409.2,195.4z"/>
13 | <path class="st0" d="M1069.3,589.7L1069.3,589.7c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21
14 | 	C1076.4,608.2,1075.7,596.1,1069.3,589.7z"/>
15 | <path class="st0" d="M1533.8,114.2L1533.8,114.2c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21
16 | 	C1541,132.6,1540.2,120.6,1533.8,114.2z"/>
17 | <path class="st0" d="M878.9,247.4L878.9,247.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21
18 | 	C886,265.8,885.3,253.8,878.9,247.4z"/>
19 | <path class="st0" d="M615.2,658.3L615.2,658.3c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21
20 | 	C622.3,676.8,621.6,664.7,615.2,658.3z"/>
21 | <path class="st1" d="M183.5,524L183.5,524c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21
22 | 	C190.6,542.5,189.9,530.4,183.5,524z"/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/img/related/ImageTiltEffect.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/related/ImageTiltEffect.jpg


--------------------------------------------------------------------------------
/img/related/TooltipStylesInspiration.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/InteractivePoints/8419b6377dba812c39c7610688e2b0017a1e4676/img/related/TooltipStylesInspiration.png


--------------------------------------------------------------------------------
/img/sponsor/AcuityScheduling_logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 width="220px" height="43.7px" viewBox="0 0 220 43.7" style="enable-background:new 0 0 220 43.7;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#1B2737;}
 7 | 	.st1{fill:#464B53;}
 8 | 	.st2{fill:url(#SVGID_1_);}
 9 |   #pointer {
10 |     -webkit-animation: rotatePointer 60s steps(60, end) infinite;
11 |     animation: rotatePointer 60s steps(60, end) infinite;
12 |     -webkit-transform-origin: 22px 20px;
13 |     transform-origin: 22px 20px;
14 |   }
15 |   @-webkit-keyframes rotatePointer {
16 |     to { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
17 |   }
18 |   @keyframes rotatePointer {
19 |     to { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
20 |   }
21 | </style>
22 | <title>Asset 1</title>
23 | <g id="Layer_2">
24 | 	<g id="Layer_1-2">
25 | 		<g>
26 | 			<path class="st0" d="M117.9,16.3c-0.7-0.9-1.8-1.4-2.9-1.3c-1.3,0-2.7,0.6-2.7,2.1c0,3.3,7.8,1.4,7.8,7.3c0,3.5-2.8,5.2-6,5.2
27 | 				c-2,0.1-4-0.7-5.4-2.2l2.2-2.1c0.7,1.1,1.9,1.7,3.3,1.7c1.4,0,2.9-0.7,2.9-2.2c0-3.6-7.8-1.5-7.8-7.4c0-3.4,3-5,6.1-5
28 | 				c1.7-0.1,3.4,0.5,4.7,1.7L117.9,16.3z"/>
29 | 			<path class="st0" d="M129.1,21.4c-0.5-0.6-1.3-1-2.1-1.1c-1.8,0-3.2,1.4-3.3,3.2c0,0.1,0,0.1,0,0.2c-0.1,1.8,1.3,3.3,3.1,3.3
30 | 				c0.1,0,0.1,0,0.2,0c0.8,0,1.6-0.4,2.2-1l1.9,2c-1.1,1-2.5,1.5-4,1.6c-3.4,0-6.1-2.3-6.1-5.8s2.7-5.8,6.1-5.8c1.5,0,3,0.6,4,1.7
31 | 				L129.1,21.4z"/>
32 | 			<path class="st0" d="M135.1,19.6L135.1,19.6c0.7-1.2,2-1.9,3.3-1.8c3,0,4.1,2.1,4.1,4.4v7h-2.8v-5.6c0-1.2-0.1-3.3-2-3.3
33 | 				c-1.8,0-2.6,1.3-2.6,2.8v6.1h-2.8V11.6h2.8L135.1,19.6z"/>
34 | 			<path class="st0" d="M146.5,24.6c0.1,1.5,1.4,2.7,3,2.6c1.2,0,2.3-0.6,3-1.5l2,1.5c-1.1,1.4-2.9,2.3-4.7,2.2
35 | 				c-3.4,0-6.1-2.3-6.1-5.8s2.7-5.8,6.1-5.8c3.1,0,5.2,2.2,5.2,6.1v0.8H146.5z M152.3,22.5c0-1.6-1.1-2.6-2.8-2.6
36 | 				c-1.5-0.1-2.8,1.1-2.9,2.6H152.3z"/>
37 | 			<path class="st0" d="M165.5,27.5L165.5,27.5c-0.9,1.3-2.3,2-3.9,1.9c-3.4,0-5.5-2.6-5.5-5.8s2.2-5.8,5.4-5.8
38 | 				c1.5-0.1,2.9,0.6,3.8,1.7h0.1v-7.8h2.8v17.5h-2.6V27.5z M162.2,26.9c1.8,0,3.2-1.4,3.3-3.2c0-0.1,0-0.1,0-0.2
39 | 				c0-1.8-1.5-3.3-3.3-3.3c-1.8,0-3.3,1.5-3.3,3.3c0,0,0,0,0,0c-0.1,1.8,1.3,3.3,3.1,3.4C162.1,27,162.1,27,162.2,26.9L162.2,26.9z"
40 | 				/>
41 | 			<path class="st0" d="M180.1,29.2h-2.6v-1.8h0c-0.6,1.3-1.9,2.2-3.4,2.1c-3,0-4.1-2.1-4.1-4.4v-7.1h2.8v5.6c0,1.2,0.1,3.3,2,3.3
42 | 				c1.8,0,2.6-1.4,2.6-2.8v-6.1h2.8V29.2z"/>
43 | 			<path class="st0" d="M182.4,11.6h2.8v17.5h-2.8V11.6z"/>
44 | 			<path class="st0" d="M188.9,12.6c0.9-0.1,1.8,0.7,1.8,1.6c0,0,0,0,0,0.1c-0.1,1-0.9,1.7-1.9,1.7c-0.9-0.1-1.6-0.8-1.7-1.7
45 | 				C187.1,13.3,187.9,12.6,188.9,12.6C188.9,12.6,188.9,12.6,188.9,12.6z M187.5,18h2.8v11.1h-2.8V18z"/>
46 | 			<path class="st0" d="M192.6,18.1h2.6v1.8h0c0.6-1.3,1.9-2.2,3.4-2.1c3,0,4.1,2.1,4.1,4.4v7h-2.8v-5.6c0-1.2-0.1-3.3-2-3.3
47 | 				c-1.8,0-2.6,1.3-2.6,2.8v6.1h-2.8L192.6,18.1z"/>
48 | 			<path class="st0" d="M216,18.1v10.1c0,4-1.9,6.6-6.3,6.6c-2,0.1-4-0.5-5.5-1.8l1.7-2.3c1,1,2.4,1.6,3.8,1.6
49 | 				c2.7,0,3.5-1.5,3.5-3.7v-0.8h-0.1c-0.9,1.1-2.2,1.7-3.6,1.6c-3.3,0-5.6-2.6-5.6-5.7c0-3.3,2.1-5.8,5.5-5.8c1.5-0.1,3,0.7,3.8,1.9
50 | 				h0v-1.7H216z M206.7,23.6c0,1.8,1.4,3.2,3.2,3.2c0,0,0,0,0.1,0c1.7,0.1,3.2-1.2,3.3-2.9c0-0.1,0-0.2,0-0.3
51 | 				c0.1-1.7-1.2-3.2-2.9-3.3c-0.1,0-0.3,0-0.4,0c-1.7-0.1-3.2,1.2-3.3,3C206.7,23.4,206.7,23.5,206.7,23.6L206.7,23.6z"/>
52 | 			<path class="st0" d="M47.9,12.5h2.5L57.5,29h-3.3l-1.5-3.8h-7.1L44.1,29h-3.3L47.9,12.5z M51.6,22.7L49.1,16l-2.6,6.7H51.6z"/>
53 | 			<path class="st0" d="M65.3,21.2c-0.5-0.6-1.3-1-2.1-1.1c-1.8,0-3.2,1.4-3.3,3.2c0,0.1,0,0.1,0,0.2c-0.1,1.8,1.3,3.3,3.1,3.3
54 | 				c0.1,0,0.1,0,0.2,0c0.8,0,1.6-0.4,2.2-1l1.9,2c-1.1,1-2.5,1.5-4,1.6c-3.4,0-6.1-2.3-6.1-5.8s2.7-5.8,6.1-5.8c1.5,0,3,0.6,4,1.7
55 | 				L65.3,21.2z"/>
56 | 			<path class="st0" d="M78.6,29H76v-1.8l0,0c-0.6,1.3-1.9,2.2-3.4,2.1c-3,0-4.1-2.1-4.1-4.4v-7.1h2.8v5.6c0,1.2,0.1,3.3,2,3.3
57 | 				c1.8,0,2.6-1.3,2.6-2.8v-6.1h2.8L78.6,29z"/>
58 | 			<path class="st0" d="M81.8,12.4c0.9-0.1,1.8,0.7,1.8,1.6c0,0,0,0,0,0.1c-0.1,1-0.9,1.7-1.9,1.7c-0.9-0.1-1.6-0.8-1.7-1.7
59 | 				C80.1,13.1,80.9,12.3,81.8,12.4C81.8,12.4,81.8,12.4,81.8,12.4z M80.4,17.8h2.8V29h-2.8V17.8z"/>
60 | 			<path class="st0" d="M84.7,20.2v-2.4H87v-3.2h2.8v3.2h3.1v2.4h-3.1v4.9c0,1.1,0.3,1.8,1.6,1.8c0.5,0,1-0.1,1.5-0.3v2.4
61 | 				c-0.7,0.3-1.5,0.4-2.2,0.4c-2.9,0-3.6-1.3-3.6-3.9v-5.1H84.7z"/>
62 | 			<path class="st0" d="M93.6,17.8h3.1l3.1,7.7h0l2.8-7.7h2.9l-5.3,13.5c-0.8,2.1-1.8,3.2-4.2,3.2c-0.7,0-1.4-0.1-2.1-0.3l0.3-2.5
63 | 				c0.4,0.2,0.9,0.3,1.4,0.3c1.4,0,1.7-0.5,2.2-1.6l0.5-1.3L93.6,17.8z"/>
64 | 			<circle class="st1" cx="22.6" cy="20.1" r="3.8"/>
65 | 			
66 | 				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.1372" y1="25.9008" x2="36.0969" y2="25.9008" gradientTransform="matrix(1 0 0 -1 0 46)">
67 | 				<stop  offset="0" style="stop-color:#FFE7A3"/>
68 | 				<stop  offset="0.5" style="stop-color:#FFCA05"/>
69 | 				<stop  offset="1" style="stop-color:#FAAC18"/>
70 | 			</linearGradient>
71 | 			<path class="st2" d="M22.6,6.6c-7.4,0-13.5,6-13.5,13.5c0,3.1,1.1,6.1,3,8.5l2-4.7c-2.1-4.7,0-10.3,4.7-12.4s10.3,0,12.4,4.7
72 | 				s0,10.3-4.7,12.4c-3.7,1.6-8,0.8-10.7-2.2l-1.8,4.1c5.8,4.7,14.2,3.9,19-1.9s3.9-14.2-1.9-19C28.8,7.7,25.7,6.6,22.6,6.6z"/>
73 | 			<g>
74 | 				<path class="st0" d="M17.1,23.5l-4.9,11.3c-0.1,0.1,0,0.3,0.1,0.3c0.1,0.1,0.3,0,0.3-0.1l8.9-8.5C19.7,26.1,18.1,25,17.1,23.5z"
75 | 					/>
76 | 				<path id="pointer" class="st0" d="M34.5,36.6l-6.3-13.3l-2.4-5l0,0c-0.1-0.1-0.1-0.2-0.2-0.3c-1.3-1.6-3.6-2-5.3-0.7
77 | 					c-1.5,1.2-1.9,3.4-0.9,5c0.1,0.1,0.1,0.2,0.2,0.3l0,0l3.9,3.9L34,36.9c0.1,0.1,0.3,0.2,0.4,0.1C34.6,36.9,34.6,36.7,34.5,36.6
78 | 					C34.5,36.6,34.5,36.6,34.5,36.6L34.5,36.6z"/>
79 | 			</g>
80 | 		</g>
81 | 	</g>
82 | </g>
83 | </svg>
84 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="no-js">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 		<title>Interactive Points | Codrops</title>
  8 | 		<meta name="description" content="A hover/click opaqueness background effect that makes images visible when specific points are hovered, showing some content once clicked." />
  9 | 		<meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
 10 | 		<meta name="author" content="Codrops" />
 11 | 		<link rel="shortcut icon" href="favicon.ico">
 12 | 		<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700" rel="stylesheet">
 13 | 		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
 14 | 		<link rel="stylesheet" type="text/css" href="css/demo.css" />
 15 | 		<link rel="stylesheet" type="text/css" href="css/component.css" />
 16 | 		<!--[if IE]>
 17 |   		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 18 | 		<![endif]-->
 19 | 	</head>
 20 | 	<body>
 21 | 		<svg class="hidden">
 22 | 			<defs>
 23 | 				<symbol id="icon-arrow" viewBox="0 0 32 32">
 24 | 					<title>arrow</title>
 25 | 					<path d="M7.333 24c-0.133 0-0.4 0-0.533-0.133l-6.667-6.667c0 0-0.133-0.133-0.133-0.267s0-0.133 0-0.267c0 0 0 0 0 0 0-0.133 0-0.133 0-0.267s0.133-0.133 0.133-0.267l6.667-6.667c0.4-0.133 0.8-0.133 1.067 0s0.267 0.667 0 0.933l-5.6 5.6h29.067c0.4 0 0.667 0.267 0.667 0.667s-0.267 0.667-0.667 0.667h-29.067l5.467 5.467c0.267 0.267 0.267 0.667 0 0.933 0 0.267-0.267 0.267-0.4 0.267z"></path>
 26 | 				</symbol>
 27 | 				<symbol id="icon-drop" viewBox="0 0 32 32">
 28 | 					<title>drop</title>
 29 | 					<path d="M16,31.1c-5.5,0-10-4.5-10-10c0-5.3,9.2-19.2,9.5-19.8c0.3-0.4,0.8-0.4,1,0C16.9,1.8,26,15.8,26,21	C26,26.6,21.5,31.1,16,31.1L16,31.1z M16,2.7C14,5.8,7.2,16.8,7.2,21c0,4.9,3.9,8.8,8.8,8.8s8.8-3.9,8.8-8.8C24.8,16.8,18,5.8,16,2.7z"/><path d="M12.9,25.9c-0.1,0-0.3,0-0.4-0.1c-1.4-1.3-2.1-3-2.1-4.8c0-1.5,1.1-4.3,3.3-8.4c0.1-0.4,0.5-0.5,0.9-0.3c0.3,0.1,0.4,0.5,0.3,0.9c-2,3.8-3.1,6.5-3.1,7.8c0,1.4,0.6,2.8,1.6,3.8c0.3,0.3,0.3,0.6,0,0.9C13.2,25.8,13,25.9,12.9,25.9z"/>
 30 | 				</symbol>
 31 | 				<symbol id="icon-github" viewBox="0 0 32 32">
 32 | 					<title>github logo</title>
 33 | 					<path d="M16,2C8.1,2,1.7,8.4,1.7,16.4c0,6.3,4.1,11.7,9.8,13.6c0.7,0.1,1-0.3,1-0.7c0-0.3,0-1.2,0-2.4c-4,0.9-4.8-1.9-4.8-1.9C7,23.2,6,22.8,6,22.8c-1.3-0.9,0.1-0.9,0.1-0.9c1.4,0.1,2.2,1.5,2.2,1.5c1.3,2.2,3.4,1.6,4.2,1.2c0.1-0.9,0.5-1.6,0.9-1.9c-3.2-0.4-6.5-1.6-6.5-7.1c0-1.6,0.6-2.8,1.5-3.8C8.2,11.4,7.7,9.9,8.5,8c0,0,1.2-0.4,3.9,1.5C13.6,9.1,14.8,9,16,9c1.2,0,2.4,0.2,3.6,0.5C22.3,7.6,23.5,8,23.5,8c0.8,2,0.3,3.4,0.1,3.8c0.9,1,1.5,2.3,1.5,3.8c0,5.5-3.3,6.7-6.5,7.1c0.5,0.4,1,1.3,1,2.7c0,1.9,0,3.5,0,3.9c0,0.4,0.3,0.8,1,0.7c5.7-1.9,9.8-7.3,9.8-13.6C30.3,8.4,23.9,2,16,2z"/>
 34 | 				</symbol>
 35 | 			</defs>
 36 | 		</svg>
 37 | 		<main>
 38 | 			<header class="codrops-header">
 39 | 				<div class="codrops-links">
 40 | 					<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/ItemRevealer/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
 41 | 					<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=27459" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
 42 | 				</div>
 43 | 				<h1 class="codrops-header__title">Interactive Points</h1>
 44 | 				<p class="codrops-header__tagline">Hover/click opaqueness background effect</p>
 45 | 				<a class="icon-link" href="https://github.com/codrops/InteractivePoints/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg><span class="icon-text">View on GitHub</span></a></a>
 46 | 			</header>
 47 | 			<p class="message">Please view this demo on a larger screen.</p>
 48 | 			<section class="interactive-points" id="interactive-1" tabindex="0">
 49 | 				<img class="static" src="img/map.png" alt="Map of London" />
 50 | 				<div class="backgrounds">
 51 | 					<div class="background__element" style="background-image: url(img/1.jpg)"></div>
 52 | 					<div class="background__element" style="background-image: url(img/2.jpg)"></div>
 53 | 					<div class="background__element" style="background-image: url(img/3.jpg)"></div>
 54 | 					<div class="background__element" style="background-image: url(img/4.jpg)"></div>
 55 | 					<div class="background__element" style="background-image: url(img/5.jpg)"></div>
 56 | 					<div class="background__element" style="background-image: url(img/6.jpg)"></div>
 57 | 				</div>
 58 | 				<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
 59 | 					<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
 60 | 					<path class="point" d="M1069.3,589.7L1069.3,589.7c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1076.4,608.2,1075.7,596.1,1069.3,589.7z"/>
 61 | 					<path class="point" d="M1533.8,114.2L1533.8,114.2c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1541,132.6,1540.2,120.6,1533.8,114.2z"/>
 62 | 					<path class="point" d="M878.9,247.4L878.9,247.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C886,265.8,885.3,253.8,878.9,247.4z"/>
 63 | 					<path class="point" d="M615.2,658.3L615.2,658.3c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C622.3,676.8,621.6,664.7,615.2,658.3z"/>
 64 | 					<path class="point" d="M183.5,524L183.5,524c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C190.6,542.5,189.9,530.4,183.5,524z"/>
 65 | 				</svg>
 66 | 				<div class="points-tooltips">
 67 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
 68 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Swiss Court</h2><br><p class="point-tooltip__description">The crazy story of a rebel</p></div>
 69 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Bear Street</h2><br><p class="point-tooltip__description">Hidden gems and stories</p></div>
 70 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Leicester Square</h2><br><p class="point-tooltip__description">A never ending love story</p></div>
 71 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Oxendon Street</h2><br><p class="point-tooltip__description">No need to panik, rescue is close</p></div>
 72 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Haymarket</h2><br><p class="point-tooltip__description">Adventures to be discovered</p></div>
 73 | 				</div>
 74 | 				<div class="points-content">
 75 | 					<div class="point-content">
 76 | 						<h3 class="point-content__title">The Rupert Connection</h3>
 77 | 						<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
 78 | 						<p class="point-content__text">Descended from astronomers encyclopaedia galactica from which we spring worldlets intelligent beings gathered by gravity billions.</p>
 79 | 					</div>
 80 | 					<div class="point-content">
 81 | 						<h3 class="point-content__title">Swiss Court, Miss</h3>
 82 | 						<p class="point-content__subtitle">3<sup>rd</sup> of March, 1928</p>
 83 | 						<p class="point-content__text">Hydrogen atoms circumnavigated Cambrian explosion, a mote of dust suspended in a sunbeam Hypatia.</p>
 84 | 					</div>
 85 | 					<div class="point-content">
 86 | 						<h3 class="point-content__title">Hiding in Bear Street</h3>
 87 | 						<p class="point-content__subtitle">19<sup>th</sup> of July, 1927</p>
 88 | 						<p class="point-content__text">From which we spring the ash of stellar alchemy from which we spring emerged into consciousness, great turbulent clouds rich in heavy atoms. </p>
 89 | 					</div>
 90 | 					<div class="point-content">
 91 | 						<h3 class="point-content__title">Leicester Square Love</h3>
 92 | 						<p class="point-content__subtitle">12<sup>th</sup> of August, 1930</p>
 93 | 						<p class="point-content__text">A mote of dust suspended in a sunbeam are creatures of the cosmos decipherment, Orion's sword corpus callosum galaxies shores of the cosmic ocean.</p>
 94 | 					</div>
 95 | 					<div class="point-content">
 96 | 						<h3 class="point-content__title">Oxendon of Oxes</h3>
 97 | 						<p class="point-content__subtitle">26<sup>th</sup> of March, 1927</p>
 98 | 						<p class="point-content__text">Extraplanetary concept of the number one vanquish the impossible culture trillion the sky calls to us.</p>
 99 | 					</div>
100 | 					<div class="point-content">
101 | 						<h3 class="point-content__title">Haymarket Forever</h3>
102 | 						<p class="point-content__subtitle">14<sup>th</sup> of January, 1927</p>
103 | 						<p class="point-content__text">Birth, are creatures of the cosmos Cambrian explosion colonies great turbulent clouds cosmos are creatures of the cosmos! Great turbulent clouds.</p>
104 | 					</div>
105 | 				</div>
106 | 				<a class="pater" href="https://goo.gl/VqOfus" rel="nofollow">
107 | 					<img class="pater__img" src="img/sponsor/AcuityScheduling_logo.svg" alt="Acuity Scheduling Logo"/>
108 | 					<h3 class="pater__title">Developer Friendly Appointment Scheduling</h3>
109 | 					<p class="pater__description">Get your clients off their phones with online appointment scheduling from Acuity Scheduling and just 2 lines of code. <strong>Get started for free!</strong></p>
110 | 				</a>
111 | 			</section>
112 | 			<a class="pater pater--responsive" href="https://goo.gl/VqOfus" rel="nofollow">
113 | 				<img class="pater__img" src="img/sponsor/AcuityScheduling_logo.svg" alt="Acuity Scheduling Logo"/>
114 | 				<h3 class="pater__title">Developer Friendly Appointment Scheduling</h3>
115 | 				<p class="pater__description">Get your clients off their phones with online appointment scheduling from Acuity Scheduling and just 2 lines of code. <strong>Get started for free!</strong></p>
116 | 			</a>
117 | 			<section class="content">
118 | 				<div class="content__inner">
119 | 					<h2 class="content__title">Seeing the Past in a New Light</h2> 
120 | 					<h3 class="content__subtitle">Life can only be understood backwards;<br/> but it must be lived forwards.</h3>
121 | 					<p>Extraordinary claims require extraordinary evidence billions upon billions, great turbulent clouds preserve and cherish that pale blue dot not a sunrise but a galaxyrise! The only home we've ever known as a patch of light. Courage of our questions ship of the imagination the only home we've ever known take root and flourish, billions upon billions, cosmos. Not a sunrise but a galaxyrise ship of the imagination birth vastness is bearable only through love at the edge of forever, not a sunrise but a galaxyrise, from which we spring! Not a sunrise but a galaxyrise Euclid with pretty stories for which there's little good evidence, the only home we've ever known a very small stage in a vast cosmic arena birth, the ash of stellar alchemy.</p>
122 | 					<p class="margin-paragraph"><strong>The following example shows some different configuration options:</strong></p>
123 | 				</div>
124 | 			</section>
125 | 			<section class="interactive-points interactive-points--alter" id="interactive-2" tabindex="0">
126 | 				<img class="static" src="img/map.png" alt="Map of London" />
127 | 				<div class="backgrounds">
128 | 					<div class="background__element" style="background-image: url(img/1.jpg)"></div>
129 | 					<div class="background__element" style="background-image: url(img/2.jpg)"></div>
130 | 					<div class="background__element" style="background-image: url(img/3.jpg)"></div>
131 | 					<div class="background__element" style="background-image: url(img/4.jpg)"></div>
132 | 					<div class="background__element" style="background-image: url(img/5.jpg)"></div>
133 | 					<div class="background__element" style="background-image: url(img/6.jpg)"></div>
134 | 				</div>
135 | 				<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
136 | 					<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
137 | 					<path class="point" d="M1069.3,589.7L1069.3,589.7c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1076.4,608.2,1075.7,596.1,1069.3,589.7z"/>
138 | 					<path class="point" d="M1533.8,114.2L1533.8,114.2c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1541,132.6,1540.2,120.6,1533.8,114.2z"/>
139 | 					<path class="point" d="M878.9,247.4L878.9,247.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C886,265.8,885.3,253.8,878.9,247.4z"/>
140 | 					<path class="point" d="M615.2,658.3L615.2,658.3c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C622.3,676.8,621.6,664.7,615.2,658.3z"/>
141 | 					<path class="point" d="M183.5,524L183.5,524c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C190.6,542.5,189.9,530.4,183.5,524z"/>
142 | 				</svg>
143 | 				<div class="points-tooltips">
144 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
145 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Swiss Court</h2><br><p class="point-tooltip__description">The crazy story of a rebel</p></div>
146 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Bear Street</h2><br><p class="point-tooltip__description">Hidden gems and stories</p></div>
147 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Leicester Square</h2><br><p class="point-tooltip__description">A never ending love story</p></div>
148 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Oxendon Street</h2><br><p class="point-tooltip__description">No need to panik, rescue is close</p></div>
149 | 					<div class="point-tooltip"><h2 class="point-tooltip__title">Haymarket</h2><br><p class="point-tooltip__description">Adventures to be discovered</p></div>
150 | 				</div>
151 | 				<div class="points-content">
152 | 					<div class="point-content">
153 | 						<h3 class="point-content__title">The Rupert Connection</h3>
154 | 						<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
155 | 						<p class="point-content__text">Descended from astronomers encyclopaedia galactica from which we spring worldlets intelligent beings gathered by gravity billions.</p>
156 | 					</div>
157 | 					<div class="point-content">
158 | 						<h3 class="point-content__title">Swiss Court, Miss</h3>
159 | 						<p class="point-content__subtitle">3<sup>rd</sup> of March, 1928</p>
160 | 						<p class="point-content__text">Hydrogen atoms circumnavigated Cambrian explosion, a mote of dust suspended in a sunbeam Hypatia.</p>
161 | 					</div>
162 | 					<div class="point-content">
163 | 						<h3 class="point-content__title">Hiding in Bear Street</h3>
164 | 						<p class="point-content__subtitle">19<sup>th</sup> of July, 1927</p>
165 | 						<p class="point-content__text">From which we spring the ash of stellar alchemy from which we spring emerged into consciousness, great turbulent clouds rich in heavy atoms. </p>
166 | 					</div>
167 | 					<div class="point-content">
168 | 						<h3 class="point-content__title">Leicester Square Love</h3>
169 | 						<p class="point-content__subtitle">12<sup>th</sup> of August, 1930</p>
170 | 						<p class="point-content__text">A mote of dust suspended in a sunbeam are creatures of the cosmos decipherment, Orion's sword corpus callosum galaxies shores of the cosmic ocean.</p>
171 | 					</div>
172 | 					<div class="point-content">
173 | 						<h3 class="point-content__title">Oxendon of Oxes</h3>
174 | 						<p class="point-content__subtitle">26<sup>th</sup> of March, 1927</p>
175 | 						<p class="point-content__text">Extraplanetary concept of the number one vanquish the impossible culture trillion the sky calls to us.</p>
176 | 					</div>
177 | 					<div class="point-content">
178 | 						<h3 class="point-content__title">Haymarket Forever</h3>
179 | 						<p class="point-content__subtitle">14<sup>th</sup> of January, 1927</p>
180 | 						<p class="point-content__text">Birth, are creatures of the cosmos Cambrian explosion colonies great turbulent clouds cosmos are creatures of the cosmos! Great turbulent clouds.</p>
181 | 					</div>
182 | 				</div>
183 | 			</section>
184 | 			<!-- Related demos -->
185 | 			<section class="content content--related">
186 | 				<p><strong>Images by the <a href="https://www.flickr.com/photos/stockholmtransportmuseum_commons/albums/72157627860632062">Stockholm Transport Museum</a></strong></p>
187 | 					<p>Filler text from <a href="http://saganipsum.com/">Sagan Ipsum</a></p>
188 | 				<p>If you enjoyed this demo you might also like:</p>
189 | 				<a class="media-item" href="http://tympanus.net/Development/TooltipStylesInspiration/">
190 | 					<img class="media-item__img" src="img/related/TooltipStylesInspiration.png">
191 | 					<h3 class="media-item__title">Tooltip Styles Inspiration</h3>
192 | 				</a>
193 | 				<a class="media-item" href="http://tympanus.net/Development/ImageTiltEffect/">
194 | 					<img class="media-item__img" src="img/related/ImageTiltEffect.jpg">
195 | 					<h3 class="media-item__title">Image Tilt Effect</h3>
196 | 				</a>
197 | 			</section>
198 | 		</main>
199 | 		<script src="js/lunar.js"></script>
200 | 		<script src="js/imagesloaded.pkgd.min.js"></script>
201 | 		<script src="js/main.js"></script>
202 | 		<script>
203 | 		(function() {
204 | 			new PointsMap(document.querySelector('#interactive-1'));
205 | 			new PointsMap(document.querySelector('#interactive-2'), {
206 | 				// Maximum opacity that the background element of a Point can have when the point is active (mouse gets closer to it).
207 | 				maxOpacityOnActive : 1,
208 | 				// When the mouse is [activeOn]px away from one point, its image gets opacity = point.options.maxOpacity.
209 | 				activeOn : 90
210 | 			});
211 | 		})();
212 | 		</script>
213 | 	</body>
214 | </html>
215 | 


--------------------------------------------------------------------------------
/js/imagesloaded.pkgd.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * imagesLoaded PACKAGED v4.1.0
3 |  * JavaScript is all like "You images are done yet or what?"
4 |  * MIT License
5 |  */
6 | 
7 | !function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}(this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||[];return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i<t.length;i++)e.push(t[i]);else e.push(t);return e}function o(t,e,r){return this instanceof o?("string"==typeof t&&(t=document.querySelectorAll(t)),this.elements=n(t),this.options=i({},this.options),"function"==typeof e?r=e:i(this.options,e),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(function(){this.check()}.bind(this))):new o(t,e,r)}function r(t){this.img=t}function s(t,e){this.url=t,this.element=e,this.img=new Image}var h=t.jQuery,a=t.console;o.prototype=Object.create(e.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),this.options.background===!0&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&d[e]){for(var i=t.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=t.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var d={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(e.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,t),n=i.exec(e.backgroundImage)}},o.prototype.addImage=function(t){var e=new r(t);this.images.push(e)},o.prototype.addBackground=function(t,e){var i=new s(t,e);this.images.push(i)},o.prototype.check=function(){function t(t,i,n){setTimeout(function(){e.progress(t,i,n)})}var e=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(e){e.once("progress",t),e.check()}):void this.complete()},o.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,t,e)},o.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},r.prototype=Object.create(e.prototype),r.prototype.check=function(){var t=this.getIsImageComplete();return t?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},r.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.img,e])},r.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var t=this.getIsImageComplete();t&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},o.makeJQueryPlugin=function(e){e=e||t.jQuery,e&&(h=e,h.fn.imagesLoaded=function(t,e){var i=new o(this,t,e);return i.jqDeferred.promise(h(this))})},o.makeJQueryPlugin(),o});


--------------------------------------------------------------------------------
/js/lunar.js:
--------------------------------------------------------------------------------
 1 | (function (root, factory) {
 2 |   if (typeof define === 'function' && define.amd) {
 3 |     define(factory);
 4 |   } else if (typeof exports === 'object') {
 5 |     module.exports = factory;
 6 |   } else {
 7 |     root.lunar = factory();
 8 |   }
 9 | })(this, function () {
10 | 
11 |   'use strict';
12 | 
13 |   var lunar = {};
14 | 
15 |   lunar.hasClass = function (elem, name) {
16 |     return new RegExp('(\\s|^)' + name + '(\\s|$)').test(elem.getAttribute('class'));
17 |   };
18 | 
19 |   lunar.addClass = function (elem, name) {
20 |     !lunar.hasClass(elem, name) && elem.setAttribute('class', (!!elem.getAttribute('class') ? elem.getAttribute('class') + ' ' : '') + name);
21 |   };
22 | 
23 |   lunar.removeClass = function (elem, name) {
24 |     var remove = elem.getAttribute('class').replace(new RegExp('(\\s|^)' + name + '(\\s|$)', 'g'), '$2');
25 |     lunar.hasClass(elem, name) && elem.setAttribute('class', remove);
26 |   };
27 | 
28 |   lunar.toggleClass = function (elem, name) {
29 |     lunar[lunar.hasClass(elem, name) ? 'removeClass' : 'addClass'](elem, name);
30 |   };
31 | 
32 |   return lunar;
33 | 
34 | });
35 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * main.js
  3 |  * http://www.codrops.com
  4 |  *
  5 |  * Licensed under the MIT license.
  6 |  * http://www.opensource.org/licenses/mit-license.php
  7 |  * 
  8 |  * Copyright 2016, Codrops
  9 |  * http://www.codrops.com
 10 |  */
 11 | ;(function(window) {
 12 | 
 13 | 	'use strict';
 14 | 
 15 | 	// Helper vars and functions.
 16 | 	function extend(a, b) {
 17 | 		for( var key in b ) { 
 18 | 			if( b.hasOwnProperty( key ) ) {
 19 | 				a[key] = b[key];
 20 | 			}
 21 | 		}
 22 | 		return a;
 23 | 	}
 24 | 	/**
 25 | 	 * Throttle fn: From https://sberry.me/articles/javascript-event-throttling-and-debouncing
 26 | 	 */
 27 | 	function throttle(fn, delay) {
 28 | 		var allowSample = true;
 29 | 
 30 | 		return function(e) {
 31 | 			if (allowSample) {
 32 | 				allowSample = false;
 33 | 				setTimeout(function() { allowSample = true; }, delay);
 34 | 				fn(e);
 35 | 			}
 36 | 		};
 37 | 	}
 38 | 	/**
 39 | 	 * Mouse position: From http://www.quirksmode.org/js/events_properties.html#position.
 40 | 	 */
 41 | 	function getMousePos(e) {
 42 | 		var posx = 0, posy = 0;
 43 | 		if (!e) var e = window.event;
 44 | 		if (e.pageX || e.pageY) 	{
 45 | 			posx = e.pageX;
 46 | 			posy = e.pageY;
 47 | 		}
 48 | 		else if (e.clientX || e.clientY) 	{
 49 | 			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
 50 | 			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
 51 | 		}
 52 | 		return { x : posx, y : posy };
 53 | 	}
 54 | 	/**
 55 | 	 * Distance between two points P1 (x1,y1) and P2 (x2,y2).
 56 | 	 */
 57 | 	function distancePoints(x1, y1, x2, y2) {
 58 | 		return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
 59 | 	}
 60 | 	/**
 61 | 	 * Equation of a line.
 62 | 	 */
 63 | 	function lineEq(y2, y1, x2, x1, currentVal) {
 64 | 		// y = mx + b
 65 | 		var m = (y2 - y1) / (x2 - x1),
 66 | 			b = y1 - m * x1;
 67 | 
 68 | 		return m * currentVal + b;
 69 | 	}
 70 | 
 71 | 	var docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop};
 72 | 
 73 | 	/**
 74 | 	 * Point obj.
 75 | 	 */
 76 | 	function Point(el, bgEl, wrapper, options) {
 77 | 		this.el = el;
 78 | 		this.wrapper = wrapper;
 79 | 		// Options/Settings.
 80 | 		this.options = extend( {}, this.options );
 81 | 		extend( this.options, options );
 82 | 		// A Point obj has a background element (img, video, ..) and a point/position (x,y) in the canvas.
 83 | 		this.bgEl = bgEl;
 84 | 		// The position of the point.
 85 | 		this.position = this._updatePosition();
 86 | 		// When the mouse is dmax away from the point, its image gets opacity = 0.
 87 | 		this.dmax = this.options.viewportFactor != -1 && this.options.viewportFactor > 0 ? this.wrapper.offsetWidth/this.options.viewportFactor : this.options.maxDistance;
 88 | 		if( this.dmax < this.options.activeOn ) {
 89 | 			this.options.activeOn = this.dmax-5; // todo
 90 | 		}
 91 | 		// Init/Bind events.
 92 | 		this._initEvents();
 93 | 	}
 94 | 
 95 | 	/**
 96 | 	 * Point options/settings.
 97 | 	 */
 98 | 	Point.prototype.options = {
 99 | 		// Maximum opacity that the bgEl can have.
100 | 		maxOpacity : 1,
101 | 		// When the mouse is [activeOn]px away from the point, its image gets opacity = this.options.maxOpacity.
102 | 		activeOn : 20,
103 | 		// The distance from the mouse pointer to a Point where the opacity of the background element is 0.
104 | 		maxDistance : 100, 
105 | 		// If viewportFactor is different than -1, then the maxDistance will be overwritten by [window´s width / viewportFactor]
106 | 		viewportFactor : -1,
107 | 		onActive : function() { return false; },
108 | 		onInactive : function() { return false; },
109 | 		onClick : function() { return false; }
110 | 	};
111 | 
112 | 	/**
113 | 	 * Initialize/Bind events.
114 | 	 */
115 | 	Point.prototype._initEvents = function() {
116 | 		var self = this;
117 | 
118 | 		// Mousemove event.
119 | 		this._throttleMousemove = throttle(function(ev) {
120 | 			requestAnimationFrame(function() {
121 | 				// Mouse position relative to the mapEl.
122 | 				var mousepos = getMousePos(ev);
123 | 				// Calculate the opacity value.
124 | 				if( self.bgEl ) {
125 | 					// Distance from the position of the point to the mouse position.
126 | 					var distance = distancePoints(mousepos.x - docScrolls.left, mousepos.y - docScrolls.top, self.position.x - docScrolls.left, self.position.y - docScrolls.top),
127 | 						// Convert this distance to a opacity value. (distance = 0 -> opacity = 1).
128 | 						opacity = self._distanceToOpacity(distance);
129 | 
130 | 					self.bgEl.style.opacity = opacity;
131 | 
132 | 					// Callback
133 | 					if( !self.isActive && opacity === self.options.maxOpacity ) {
134 | 						self.options.onActive();
135 | 						self.isActive = true;
136 | 					}
137 | 					
138 | 					if( opacity !== self.options.maxOpacity && self.isActive ) {
139 | 						self.options.onInactive();
140 | 						self.isActive = false;
141 | 					}
142 | 				}
143 | 			});
144 | 		}, 20);
145 | 		this.wrapper.addEventListener('mousemove', this._throttleMousemove);
146 | 
147 | 		// Clicking a point.
148 | 		this._click = function(ev) {
149 | 			// Callback.
150 | 			self.options.onClick();
151 | 		};
152 | 		this.el.addEventListener('click', this._click);
153 | 
154 | 		// Window resize.
155 | 		this._throttleResize = throttle(function() {
156 | 			// Update Point´s position.
157 | 			self.position = self._updatePosition();
158 | 			// Update dmax
159 | 			if( self.options.viewportFactor != -1 && self.options.viewportFactor > 0 ) {
160 | 				self.dmax = self.wrapper.offsetWidth/self.options.viewportFactor;
161 | 			}
162 | 		}, 100);
163 | 		window.addEventListener('resize', this._throttleResize);
164 | 
165 | 		// Set the opacity of the bgEl to 0 when leaving the wrapper area..
166 | 		this.wrapper.addEventListener('mouseleave', function() {
167 | 			if( !self.isActive ) {
168 | 				self.bgEl.style.opacity = 0;
169 | 			}
170 | 		});
171 | 	};
172 | 
173 | 	/**
174 | 	 * Update Point´s position.
175 | 	 */
176 | 	Point.prototype._updatePosition = function() {
177 | 		var rect = this.el.getBoundingClientRect(), bbox = this.el.getBBox();
178 | 		// Also update origins..
179 | 		this.el.style.transformOrigin = this.el.style.WebkitTransformOrigin = (bbox.x + rect.width/2) + 'px ' + (bbox.y + rect.height) + 'px';
180 | 		return {x : rect.left + rect.width/2 + docScrolls.left, y : rect.top + rect.height/2 + docScrolls.top};
181 | 	};
182 | 
183 | 	/**
184 | 	 * Maps the distance to opacity.
185 | 	 */
186 | 	Point.prototype._distanceToOpacity = function(d) {
187 | 		return Math.min(Math.max(lineEq(this.options.maxOpacity, 0, this.options.activeOn, this.dmax, d), 0), this.options.maxOpacity);
188 | 	};
189 | 
190 | 	/**
191 | 	 * Hides the Point.
192 | 	 */
193 | 	Point.prototype.hide = function() {
194 | 		lunar.addClass(this.el, 'point--hide');
195 | 	};
196 | 
197 | 	/**
198 | 	 * 
199 | 	 */
200 | 	Point.prototype.show = function() {
201 | 		lunar.removeClass(this.el, 'point--hide')
202 | 	};
203 | 
204 | 	/**
205 | 	 * 
206 | 	 */
207 | 	Point.prototype.pause = function() {
208 | 		this.wrapper.removeEventListener('mousemove', this._throttleMousemove);
209 | 	};
210 | 
211 | 	/**
212 | 	 * 
213 | 	 */
214 | 	Point.prototype.resume = function() {
215 | 		this.wrapper.addEventListener('mousemove', this._throttleMousemove);
216 | 	};
217 | 
218 | 	/**
219 | 	 * PointsMap obj.
220 | 	 */
221 | 	function PointsMap(el, options) {
222 | 		this.el = el;
223 | 		// Options/Settings.
224 | 		this.options = extend( {}, this.options );
225 | 		extend( this.options, options );
226 | 		
227 | 		// Backgrounds container.
228 | 		this.bgsWrapper = this.el.querySelector('.backgrounds');
229 | 		if( !this.bgsWrapper ) { return; }
230 | 		
231 | 		// Background elements.
232 | 		this.bgElems = [].slice.call(this.bgsWrapper.querySelectorAll('.background__element'));
233 | 		// Total background elements.
234 | 		this.bgElemsTotal = this.bgElems.length;
235 | 		if( this.bgElemsTotal <= 1 ) { return; }
236 | 		
237 | 		// Points container.
238 | 		this.pointsWrapper = this.el.querySelector('.points');
239 | 		if( !this.pointsWrapper || getComputedStyle(this.pointsWrapper, null).display === 'none' ) { return; }
240 | 
241 | 		// Points tooltips
242 | 		this.tooltips = [].slice.call(this.el.querySelector('.points-tooltips').children);
243 | 
244 | 		// Points´s content
245 | 		this.pointsContentWrapper = this.el.querySelector('.points-content');
246 | 		this.contents = [].slice.call(this.pointsContentWrapper.children);
247 | 
248 | 		// Init..
249 | 		this._init();
250 | 	}
251 | 
252 | 	/**
253 | 	 * PointsMap options/settings.
254 | 	 */
255 | 	PointsMap.prototype.options = {
256 | 		// Maximum opacity that the background element of a Point can have when the point is active (mouse gets closer to it).
257 | 		maxOpacityOnActive : 0.3,
258 | 		// The distance from the mouse pointer to a Point where the opacity of the background element is 0.
259 | 		maxDistance : 100, 
260 | 		// If viewportFactor is different than -1, then the maxDistance will be overwritten by [point´s parent width / viewportFactor]
261 | 		viewportFactor : 9,
262 | 		// When the mouse is [activeOn]px away from one point, its image gets opacity = point.options.maxOpacity.
263 | 		activeOn : 30
264 | 	};
265 | 
266 | 	/**
267 | 	 * Init.
268 | 	 */
269 | 	PointsMap.prototype._init = function() {
270 | 		var self = this, 
271 | 			onLoaded = function() {
272 | 				// Create the Points.
273 | 				self._createPoints();
274 | 			};
275 | 
276 | 		// Preload all images.
277 | 		imagesLoaded(this.bgsWrapper, { background: true }, onLoaded);
278 | 
279 | 		// Init/Bind events.
280 | 		this._initEvents();
281 | 	};
282 | 
283 | 	/**
284 | 	 * Init/Bind events.
285 | 	 */
286 | 	PointsMap.prototype._initEvents = function() {
287 | 		var self = this;
288 | 
289 | 		// Window resize.
290 | 		this._throttleResize = throttle(function() {
291 | 			// Update Document scroll values.
292 | 			docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop};
293 | 		}, 100);
294 | 		window.addEventListener('resize', this._throttleResize);
295 | 
296 | 		// Close content.
297 | 		this._closeContent = function() {
298 | 			var currentPoint = self.points[self.currentPoint];
299 | 			currentPoint.isActive = false;
300 | 			// Hide Point´s bgEl.
301 | 			currentPoint.bgEl.style.opacity = 0;
302 | 			// Hide content.
303 | 			self.pointsContentWrapper.classList.remove('points-content--open');
304 | 			self.contents[self.currentPoint].classList.remove('point-content--current');
305 | 			// Start mousemove event on Points.
306 | 			self._pointsAction('resume');
307 | 			// Show all points.
308 | 			self._pointsAction('show');
309 | 		};
310 | 		this.pointsContentWrapper.addEventListener('click', this._closeContent);
311 | 
312 | 		// Keyboard navigation events.
313 | 		this.el.addEventListener('keydown', function(ev) {
314 | 			var keyCode = ev.keyCode || ev.which;
315 | 			if( keyCode === 27 ) {
316 | 				self._closeContent();
317 | 			}
318 | 		});
319 | 	};
320 | 
321 | 	/**
322 | 	 * Create the Points.
323 | 	 */
324 | 	PointsMap.prototype._createPoints = function() {
325 | 		this.points = [];
326 | 
327 | 		var self = this;
328 | 		[].slice.call(this.pointsWrapper.querySelectorAll('.point')).forEach(function(point, pos) {
329 | 			var p = new Point(point, self.bgElems[pos], self.el, {
330 | 				maxOpacity : self.options.maxOpacityOnActive, 
331 | 				activeOn : self.options.activeOn, 
332 | 				maxDistance : self.options.maxDistance, 
333 | 				viewportFactor : self.options.viewportFactor, 
334 | 				onActive : function() {
335 | 					// Add class active (scales up the pin and changes the fill color).
336 | 					lunar.addClass(self.points[pos].el, 'point--active');
337 | 					// Hide all other points.
338 | 					self._pointsAction('hide', pos);
339 | 					// Show tooltip.
340 | 					var tooltip = self.tooltips[pos];
341 | 					tooltip.classList.add('point-tooltip--current');
342 | 					// Position tooltip.
343 | 					var rect = self.points[pos].el.getBoundingClientRect(),
344 | 						bounds = self.el.getBoundingClientRect();
345 | 
346 | 					tooltip.style.left = rect.left - bounds.left + rect.width/2 + 'px';
347 | 					tooltip.style.top = rect.top - bounds.top + rect.height + 'px';
348 | 				},
349 | 				onInactive : function() {
350 | 					lunar.removeClass(self.points[pos].el, 'point--active');
351 | 					// Show all points.
352 | 					self._pointsAction('show', pos);
353 | 					// Hide tooltip.
354 | 					self.tooltips[pos].classList.remove('point-tooltip--current');
355 | 				},
356 | 				onClick : function() {
357 | 					self.currentPoint = pos;
358 | 					lunar.removeClass(self.points[pos].el, 'point--active');
359 | 					// Hide the current point (and all other points).
360 | 					self._pointsAction('hide');
361 | 					// Hide tooltip.
362 | 					self.tooltips[pos].classList.remove('point-tooltip--current');
363 | 					// Stop mousemove event on Points.
364 | 					self._pointsAction('pause');
365 | 					// Show Point´s bgEl.
366 | 					self.points[pos].bgEl.style.opacity = 1;
367 | 					// Show content.
368 | 					self.pointsContentWrapper.classList.add('points-content--open');
369 | 					self.contents[pos].classList.add('point-content--current');
370 | 				}
371 | 			});
372 | 			self.points.push(p);
373 | 		});	
374 | 	};
375 | 
376 | 	/**
377 | 	 * Calls a Point´s fn. Excludes the point with index = excludedPoint.
378 | 	 */
379 | 	PointsMap.prototype._pointsAction = function(action, excludedPoint) {
380 | 		for(var i = 0, len = this.points.length; i < len; ++i) {
381 | 			if( i !== excludedPoint ) {
382 | 				this.points[i][action]();
383 | 			}
384 | 		}
385 | 	};
386 | 
387 | 	window.PointsMap = PointsMap;
388 | 	document.documentElement.className = 'js';
389 | 
390 | })(window);


--------------------------------------------------------------------------------