-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
606 lines (582 loc) · 32.3 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
---
title: UI composition & animation in pure HTML | layerJS
frame: home
description: UX patterns like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zoom effects, etc. are really just interactive animated layers. layerJS is a simple open source library that provides one simple universal concept to create such patterns in pure HTML.
sitemap:
priority: 1
changefreq: daily
---
<link href="css/explain.css" type="text/css" rel='stylesheet' />
<script src="js/explain.js" defer></script>
<a href="#sidemenu;backdrop" class="index-menu icon-menu"></a>
<section id="hero">
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-6">
<h1>
<img src="img/logo1.png" width="100"> layerJS
<div id="herotext">UI composition & animation in pure HTML</div>
</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 hidden-xs">
</div>
<div class="col-md-6">
<!--<a href="https://github.com/layerJS/layerJS" class="btn hidden github-btn btn-default">Find us on Github</a>-->
<br class="visible-xs">
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/layerjs/layerjs" data-size="large" data-show-count="true" aria-label="Star layerjs/layerjs on GitHub">Github</a>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</div>
</div>
</div>
</section>
<section class="grey" style="height:100px;">
<a name="howitworks"> </a>
</section>
<section class="grey">
<div class="container">
<h2>One concept for all your UX patterns</h2>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<p>UX patterns like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zoom effects, etc.
are really just
<strong>interactive animated layers</strong>. layerJS is a simple
<strong>open source library</strong> that provides
<strong>one simple universal concept</strong> to create such patterns in pure HTML.
</p>
<!--<p>layerJS is not a UI kit. Upon user interaction it simply animates "empty boxes" - we call them <strong> Frames</strong>. What you put into the Frames is totally up to you.</p>-->
</div>
</div>
</div>
</section>
<section class="explain">
<div class="container">
<h2>How layerJS works</h2>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<p>In layerJS
<span class="hframe">Frames</span> are containers that contain your content, like sub pages, menues, lightboxes, cards, slides, etc.
These are fit into
<span class="hstage">Stages</span> which are like virtual windows in which UI interaction happens. Watch the animation on how it works:</p>
</div>
</div>
</div>
<a name="explain-animation" href="#explain-animation" style="position:relative;top:-70px;"> </a>
{% include _blocks/explain.html %}
</section>
<section class="benefits">
<div class="container">
<h2>Benefits</h2>
<div class="row">
<div class="col col-md-4 col-sm-12">
<svg class="icon icon-sphere">
<symbol id="icon-sphere" viewBox="0 0 32 32">
<title>sphere</title>
<path d="M15 2c-8.284 0-15 6.716-15 15s6.716 15 15 15c8.284 0 15-6.716 15-15s-6.716-15-15-15zM23.487 22c0.268-1.264 0.437-2.606 0.492-4h3.983c-0.104 1.381-0.426 2.722-0.959 4h-3.516zM6.513 12c-0.268 1.264-0.437 2.606-0.492 4h-3.983c0.104-1.381 0.426-2.722 0.959-4h3.516zM21.439 12c0.3 1.28 0.481 2.62 0.54 4h-5.979v-4h5.439zM16 10v-5.854c0.456 0.133 0.908 0.355 1.351 0.668 0.831 0.586 1.625 1.488 2.298 2.609 0.465 0.775 0.867 1.638 1.203 2.578h-4.852zM10.351 7.422c0.673-1.121 1.467-2.023 2.298-2.609 0.443-0.313 0.895-0.535 1.351-0.668v5.854h-4.852c0.336-0.94 0.738-1.803 1.203-2.578zM14 12v4h-5.979c0.059-1.38 0.24-2.72 0.54-4h5.439zM2.997 22c-0.533-1.278-0.854-2.619-0.959-4h3.983c0.055 1.394 0.224 2.736 0.492 4h-3.516zM8.021 18h5.979v4h-5.439c-0.3-1.28-0.481-2.62-0.54-4zM14 24v5.854c-0.456-0.133-0.908-0.355-1.351-0.668-0.831-0.586-1.625-1.488-2.298-2.609-0.465-0.775-0.867-1.638-1.203-2.578h4.852zM19.649 26.578c-0.673 1.121-1.467 2.023-2.298 2.609-0.443 0.312-0.895 0.535-1.351 0.668v-5.854h4.852c-0.336 0.94-0.738 1.802-1.203 2.578zM16 22v-4h5.979c-0.059 1.38-0.24 2.72-0.54 4h-5.439zM23.98 16c-0.055-1.394-0.224-2.736-0.492-4h3.516c0.533 1.278 0.855 2.619 0.959 4h-3.983zM25.958 10h-2.997c-0.582-1.836-1.387-3.447-2.354-4.732 1.329 0.636 2.533 1.488 3.585 2.54 0.671 0.671 1.261 1.404 1.766 2.192zM5.808 7.808c1.052-1.052 2.256-1.904 3.585-2.54-0.967 1.285-1.771 2.896-2.354 4.732h-2.997c0.504-0.788 1.094-1.521 1.766-2.192zM4.042 24h2.997c0.583 1.836 1.387 3.447 2.354 4.732-1.329-0.636-2.533-1.488-3.585-2.54-0.671-0.671-1.261-1.404-1.766-2.192zM24.192 26.192c-1.052 1.052-2.256 1.904-3.585 2.54 0.967-1.285 1.771-2.896 2.354-4.732h2.997c-0.504 0.788-1.094 1.521-1.766 2.192z"></path>
</symbol>
<use xlink:href="#icon-sphere"></use>
</svg>
<h3>Universal</h3>
<p>One library for all UX patterns. Slider, Popups, Accordeon, Menu, Parallax, (Touch) Gestures, etc.</p>
</div>
<div class="col col-md-4 col-sm-12">
<svg class="icon icon-html5">
<symbol id="icon-html5" viewBox="0 0 32 32">
<title>html5</title>
<path d="M2 0h28l-2.547 28.751-11.484 3.249-11.419-3.251-2.551-28.749zM11.375 13l-0.309-3.624 13.412 0.004 0.307-3.496-17.568-0.004 0.931 10.68h12.168l-0.435 4.568-3.88 1.072-3.94-1.080-0.251-2.813h-3.479l0.44 5.561 7.229 1.933 7.172-1.924 0.992-10.876h-12.789z"></path>
</symbol>
<use xlink:href="#icon-html5"></use>
</svg>
<h3>Pure HTML</h3>
<p>Layout your interface with HTML attributes and define interaction with Links</p>
</div>
<div class="col col-md-4 col-sm-12">
<svg class="icon icon-angular">
<symbol id="icon-angular" viewBox="0 0 32 32">
<title>angular</title>
<path d="M13.24 16.86h5.512l-2.757-6.54z"></path>
<path d="M15.995 0.012l-15.080 5.305 2.3 19.68 12.78 6.991 12.784-6.984 2.299-19.684-15.083-5.307zM25.405 24.408h-3.515l-1.893-4.668h-8.004l-1.893 4.668h-3.517l9.413-20.864 9.409 20.864z"></path>
</symbol>
<use xlink:href="#icon-angular"></use>
</svg>
<h3>Plays with</h3>
<p>Angular, VueJS, React, jQuery. Use your framework to modify frame content or generate frames dynamically.</p>
</div>
<div class="col col-md-4 col-sm-12">
<svg class="icon">
<symbol id="icon-tools" viewBox="0 0 31 32">
<title>tools</title>
<path stroke-width="0.7" d="M0.211 5.646c-0.847 0.848-0.666 2.042 0.008 2.715 0.027 0.026 2.734 2.612 6.541 6.419 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146c0.195-0.195 0.195-0.512 0-0.707-0.574-0.574-1.12-1.117-1.638-1.631l1.589-1.589c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-1.593 1.593c-0.891-0.88-1.676-1.648-2.315-2.271l3.615-3.615c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-3.626 3.626c-0.736-0.713-1.16-1.118-1.167-1.125-0.211-0.211-0.488-0.805 0-1.293l5-5c0.193-0.196 0.707-0.585 1.271-0.024 0.025 0.028 2.55 2.896 6.404 6.75 0.195 0.195 0.512 0.195 0.707 0s0.195-0.512 0-0.707c-3.83-3.829-6.336-6.675-6.382-6.727-0.932-0.93-2.056-0.651-2.707 0l-5.001 5zM21.419 24.146c-0.195-0.195-0.512-0.195-0.707 0l-1.591 1.59c-0.485-0.491-0.994-1.005-1.53-1.541-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707c3.704 3.703 6.291 6.469 6.328 6.509 0.343 0.344 0.813 0.533 1.323 0.533v0c0.525 0 1.056-0.205 1.385-0.535l4.998-5.057c0.629-0.629 0.665-1.696 0.078-2.285l-6.706-6.705c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l6.706 6.705c0.2 0.2 0.162 0.632-0.079 0.873l-4.999 5.057c-0.115 0.116-0.376 0.24-0.676 0.24 0 0 0 0 0 0-0.172 0-0.418-0.042-0.604-0.229-0.010-0.011-0.429-0.458-1.156-1.219l3.644-3.644c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-3.629 3.629c-0.624-0.649-1.389-1.438-2.26-2.326l1.596-1.596c0.195-0.194 0.195-0.51 0-0.706zM-0.293 31.829c0.096 0.098 0.225 0.15 0.358 0.15 0.048 0 0.096-0.007 0.143-0.021l10-2.979c0.081-0.024 0.153-0.067 0.212-0.127l17.090-17.205c0.024-0.024 0.036-0.055 0.054-0.082l3.656-3.656c0.294-0.295 0.457-0.686 0.457-1.103s-0.163-0.807-0.457-1.1l-5.235-5.234c-0.588-0.588-1.615-0.588-2.203 0l-3.739 3.739c-0.024 0.024-0.037 0.055-0.055 0.083l-17.116 17.117c-0.056 0.056-0.098 0.124-0.122 0.199l-3.16 9.715c-0.058 0.177-0.013 0.37 0.117 0.504zM20.425 5.271l1.039 1.039-15.523 15.565-1.727-0.392 16.211-16.212zM6.565 22.666l15.607-15.648 2.436 2.436-15.748 15.546h-2.295v-2.334zM26.449 11.296l-16.244 16.354-0.577-2.002 15.687-15.487 1.134 1.135zM3.558 22.359l2.007 0.456v2.685c0 0.276 0.224 0.5 0.5 0.5h2.624l0.634 2.2-8.488 2.529 2.723-8.37zM24.49 1.179c0.211-0.211 0.578-0.211 0.789 0l5.235 5.235c0.105 0.105 0.163 0.245 0.163 0.394 0 0.148-0.058 0.289-0.164 0.395l-3.371 3.372-6.023-6.023 3.371-3.373z"></path>
</symbol>
<use xlink:href="#icon-tools"></use>
</svg>
<h3>All designs</h3>
<p>Totally design agnostic. layerJS just provides the navigation effects while leaving the design up to you.</p>
</div>
<div class="col col-md-4 col-sm-12">
<svg class="icon icon-document-file-zip"><symbol id="icon-document-file-zip" viewBox="0 0 32 32">
<title>document-file-zip</title>
<path stroke-width="0.7" d="M21 13v-3l-6-7h-10.997c-1.106 0-2.003 0.898-2.003 2.007v22.985c0 1.109 0.891 2.007 1.997 2.007h15.005c1.103 0 1.997-0.898 1.997-1.991v-2.009h7.993c1.661 0 3.007-1.342 3.007-2.999v-7.002c0-1.656-1.336-2.999-3.007-2.999h-7.993zM20 26v2.007c0 0.548-0.448 0.993-1 0.993h-15c-0.545 0-1-0.446-1-0.995v-23.009c0-0.54 0.446-0.995 0.996-0.995h10.004v4.994c0 1.119 0.895 2.006 1.998 2.006h4.002v2h-7.993c-1.661 0-3.007 1.342-3.007 2.999v7.002c0 1.656 1.336 2.999 3.007 2.999h7.993zM15 4.5l4.7 5.5h-3.703c-0.546 0-0.997-0.452-0.997-1.009v-4.491zM11.995 14h17.011c1.092 0 1.995 0.892 1.995 1.992v7.016c0 1.092-0.893 1.992-1.995 1.992h-17.011c-1.092 0-1.995-0.892-1.995-1.992v-7.016c0-1.092 0.893-1.992 1.995-1.992zM14 22l4-5v-1h-5v1h4l-4 5v1h5v-1h-4zM20 17v5h-1v1h3v-1h-1v-5h1v-1h-3v1h1zM23 18v-2h2.995c1.111 0 2.005 0.895 2.005 2 0 1.112-0.898 2-2.005 2h-1.995v3h-1v-5zM24 17v2h2.001c0.552 0 0.999-0.444 0.999-1 0-0.552-0.443-1-0.999-1h-2.001z"></path>
</symbol><use xlink:href="#icon-document-file-zip"></use></svg>
<h3>Lean</h3>
<p>30kb minimized gezipped. No dependencies.</p>
</div>
<div class="col col-md-4 col-sm-12">
<svg class="icon icon-important_devices"><symbol id="icon-important_devices" viewBox="0 0 24 24">
<title>important_devices</title>
<path d="M11.953 9h3.047l-2.484 1.781 0.938 2.906-2.438-1.828-2.484 1.828 0.938-2.906-2.484-1.781h3.047l0.984-3zM20.016 2.016c1.078 0 1.969 0.844 1.969 1.969v5.016h-1.969v-5.016h-18v12h12.984v2.016h-2.016v2.016h2.016v1.969h-8.016v-1.969h2.016v-2.016h-6.984c-1.125 0-2.016-0.938-2.016-2.016v-12c0-1.125 0.891-1.969 2.016-1.969h18zM23.016 20.016v-7.031h-5.016v7.031h5.016zM23.016 11.016c0.563 0 0.984 0.422 0.984 0.984v9c0 0.563-0.422 0.984-0.984 0.984h-5.016c-0.563 0-0.984-0.422-0.984-0.984v-9c0-0.563 0.422-0.984 0.984-0.984h5.016z"></path>
</symbol><use xlink:href="#icon-important_devices"></use></svg>
<h3>Responsive</h3>
<p>Works on mobile or desktop. Use your choice of mediaqueries. Adds even more options to fit content to different screens.</p>
</div>
</div>
</section>
<!--<section class="signup hidden-xs">
<div class="container">
<h2>Don't miss updates from layerJS</h2>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<p>Signup now for our newsletter and receive
<strong>tutorials</strong>,
<strong>release notes</strong> and
<strong>product updates</strong>. Our <a style="font-weight: inherit;color: inherit; text-decoration: underline" href="/privacy.html">privacy policy</a> applies. We won't spam you. Promised.
</p>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<form action="https://layerjs.us13.list-manage.com/subscribe/post?u=8ad79651646c189c4b1e8780c&id=81732fa6fd" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="row">
<div class="col-md-3"><input type="text" value="" name="FNAME" class="form-control" id="mce-FNAME" placeholder="First name (optional)">
</div><div class="col-md-3"><input type="text" value="" name="LNAME" class="form-control" id="mce-LNAME" placeholder="Last name (optional)">
</div><div class="col-md-3"><input type="email" name="EMAIL" id="mce-EMAIL" class="form-control required email" placeholder="Email address">
</div><div class="col-md-3"> <button type="submit" class="btn btn-key" name="subscribe" id="mc-embedded-subscribe">Signup now</button>
</div> </div> </form></div>
</div>
</div>
</section>-->
<section>
<div class="container">
<h2>Define in pure HTML</h2>
<div class="row">
<div class="col-md-8">
{% highlight html linenos %}
<div lj-type="stage">
<div lj-type="layer">
<div id="f1" lj-type="frame">
… your HTML code …
</div>
<div id="f2" lj-type="frame">
… your HTML code …
</div>
</div>
</div>{% endhighlight %}
</div>
<div class="col-md-4">
<p>Simply define
<span class="hstage">Stages</span> and
<span class="hframe">Frames</span> by adding attributes to HTML elements. Define the dimensions of the Stages through CSS.
<span class="hlayer">Layers</span> allow overlaying Frames. Each Stage needs at least one Layer. Use HTML links to trigger transitions,
e.g.
{% highlight html %}
<a href="#f2">Frame 2</a>{% endhighlight %}</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
To make everything work simply include layerJS in the head of your document. Our Sponsor KeyCDN will provide you with ultrafast server access to the library.
</p>
{% highlight html linenos %}
<script src="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.1.min.js"></script>
<link href="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.1.css" type="text/css" rel="stylesheet" /> {% endhighlight %}
</div>
</div>
<div class="full_cta">
<a class="btn btn-key" href="#mailform-bottom">Get tutorials by email</a>
<a class="btn btn-key" href="https://medium.com/layerjs/getting-started-with-layerjs-17f679452c8d">Read get started guide</a>
<a class="btn btn-key" href="./examples.html">See examples</a>
</div>
</div>
</section>
<section>
<div class="container">
<h2>Fitting modes & responsiveness</h2>
<div class="row">
<div class="col-md-8">
<p>Since your content will display on various screen sizes, the aspect ratios of your Stages and Frames will generally
not match. layerJS offers different fitting modes, including
<strong>width, height, cover, contain, responsive, responsive-width, responsive-height</strong>. Just select a mode using
an HTML attribute:
{% highlight html %}
<div lj-type="frame" lj-fit-to="responsive-width"></div>{% endhighlight %}</p>
<p>
Depending on the fitting mode, scrolling may occur. The initial scroll position can be any of
<strong>top, left, bottom, right, center, top-center, bottom-left, etc.</strong>. This will be set with:
{% highlight html %}
<div lj-type="frame" lj-start-position="top"></div>{% endhighlight %}</p>
</p>
<p>
You can disable scrolling using
{% highlight html %}
<div lj-type="frame" lj-no-scrolling="true"></div>{% endhighlight %}</p>
You can still define an initial "scroll" position to specify the alignment of the Frame.
</p>
</div>
<div class="col-md-4">
<figure class="drawing" style="width:150px;height:380px">
<div class="dframe" style="top:0px;left:0px;width:150px;height:100px;">
<p>
▄▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div class="dstage" style="top:0px;left:20px;width:110px;height:100px;">
</div>
<div class="dframe" style="top:160px;left:20px;width:110px;height:200px;padding:10px;">
<p>
▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div class="dstage" style="top:180px;left:20px;width:110px;height:80px;">
</div>
</figure>
</div>
</div>
<div class="full_cta">
<a class="btn btn-key" href="https://github.com/layerJS/layerJS/wiki/Frame-Fitting">See Frame attributes</a>
</div>
</div>
</section>
<section>
<div class="container">
<h2>Transitions</h2>
<div class="row">
<div class="col-md-4">
<figure class="drawing" style="width:240px;height:200px">
<div class="dframe" style="top:0px;left:0px;width:110px;height:100px;padding:10px;">
<p>
▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div class="dstage" style="top:0px;left:65px;width:110px;height:100px;">
</div>
<div class="dframe" style="top:0px;left:130px;width:110px;height:200px;padding:10px;">
<p>
▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div style="top:15px;left:85px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
width="493.356px" height="493.356px" viewBox="0 0 493.356 493.356" style="transform: scale(0.15);transform-origin: 0 0"
xml:space="preserve">
<g>
<path d="M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z"
style="fill: rgb(121, 121, 121);"></path>
</g>
</svg>
</div>
</figure>
</div>
<div class="col-md-8">
<p>Every Layer has an active Frame. Transitions are exchanging the current active Frame of a Layer with a target Frame
using an animation. Different transition types exist, among others
<strong>left, right, up, down, fade, blur, zoomin, zoomout</strong>. The active Frame can become the special "!none" Frame
in which case no Frame is shown. You can specify the transition type in a link (see "Routing" section) or as Frame
or Layer attribute: </p>
{% highlight html %}
<div lj-type="frame" lj-transition="left"></div>{% endhighlight %}
<p>
Layouts define which Frames are shown where. The default Layout is the Slide-Layout which only shows the active Frame fitted
into the Stage. During a transition the current Frame and the target FRame are shown. See the
<a href="https://github.com/layerJS/layerJS/wiki/Layouts">Layouts sections in the Wiki</a>.
</p>
<p>
Interstage transitions allow sending Frames across Layers and Stages. This allows for example to "zoom" a Frame from a grid
to fullscreen.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2>Control with CSS</h2>
<div class="row">
<div class="col-md-8">
<p>Alternative to controlling layerJS by HTML attributes (<code>lj-*</code> or <code>data-lj-*</code>) you can also use custom CSS properties. The advantage is that you can make the behaviour itself responsive by using media queries.</p>
{% highlight css %}
#menu {
width: 100px;
--lj-fit-to: responsive-height;
--lj-transition: left;
}
@media (max-width: 640px) {
#menu {
--lj-fit-to: responsive;
--lj-transition: fade;
}
}{% endhighlight %}
<p>
The above example will modify the fitting mode and the transition type of a frame with id <code>menu</code> for screens smaller than 640px.
</p>
<p>
You can use any layerJS attribute also in CSS except <code>lj-type</code>, <code>lj-name</code>. You can mix CSS properties and HTML attributes, in which case CSS properties will precede.
</p>
</div>
<div class="col-md-4">
<figure class="drawing" style="width:150px;height:380px">
<div class="dframe" style="top:0px;left:0px;width:150px;height:100px;">
<p>
▄▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div class="dmframe" style="top:0px;left:0px;width:50px;height:100px;">
<p>
▄▄ ▄▄ ▄▄
</p>
</div>
<div class="dstage" style="top:0px;left:0px;width:150px;height:100px;">
</div>
<div class="dframe" style="top:160px;left:40px;width:70px;height:100px;padding:10px;">
<p>
▄▄▄▄
▄▄▄▄
</p>
</div>
<div class="dmframe" style="top:160px;left:40px;width:70px;height:100px;padding:10px;">
<p>
▄▄
▄▄
▄▄
</p>
</div>
<div class="dstage" style="top:160px;left:40px;width:70px;height:100px;padding:10px;">
</div>
</figure>
</div>
</div>
<div class="full_cta">
<a class="btn btn-key" href="https://github.com/layerJS/layerJS/wiki/layerJS-Attributes">See all attributes</a>
</div>
</div>
</section>
<section>
<div class="container">
<h2>Routing & State</h2>
<div class="row">
<div class="col-md-4">
<figure class="drawing" style="width:240px;height:240px">
<code style="position:absolute;top:0px;left:0px;width:110px;height:35px;padding:10px;">
d.com/#f1
</code>
<div class="dframe" style="top:40px;left:0px;width:110px;height:200px;padding:10px;">
<p>
▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div class="dstage" style="top:40px;left:65px;width:110px;height:100px;">
</div>
<code style="position:absolute;top:0px;left:130px;width:110px;height:35px;padding:10px;">
d.com/#f2
</code>
<div class="dframe" style="top:40px;left:130px;width:110px;height:200px;padding:10px;">
<p>
▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div style="top:55px;left:85px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
width="493.356px" height="493.356px" viewBox="0 0 493.356 493.356" style="transform: scale(0.15);transform-origin: 0 0"
xml:space="preserve">
<g>
<path d="M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z"
style="fill: rgb(121, 121, 121);"></path>
</g>
</svg>
</div>
</figure>
</div>
<div class="col-md-8">
<p>Using a standard HTML link you can trigger transitions. The link should contain a '#' followed by the Frame name
or id. This will make the Frame the active Frame in the containing Layer.
{% highlight html %}
<a href="#f1&p=right&t=1s"></a>{% endhighlight %}
You can add the parameters 'p' for the transition type and 't' for the transition duration.</p>
<p>
There exist special Frames like
<strong>!none, !next, !prev</strong>. You will need to specify a Layer id or name in order to use them:
{% highlight html %}
<a href="#sliderlayer.!next"></a>{% endhighlight %}
If you specify a Layer and a Frame from a different Layer you will trigger an interstage
transition.
{% highlight html %}
<a href="#otherlayer.f1"></a>{% endhighlight %}
</p>
<p>
The State of the UI defines which Frames are in which Layers (and hence in which Stages) and which Frames are active. The
State is represented by an array of paths:
{% highlight html %}
stage.contentlayer.home stage.menulayer.leftmenu
stage.popuplayer.!none{% endhighlight %}
You can supply such an array as link using ';' as separator to trigger
several transitions at the same time. It is usually sufficient to only supply Layer name and Frame name and only
supply the paths that should change:
{% highlight html %}
<a href="#contentlayer.f2;menulayer.!none"></a>{% endhighlight %}
</p>
<p>
Transitions change the State. The State will be represented by the URL. When you transition from 'f1' to 'f2' the URL will
change:
{% highlight html %}
https://domain.com#f1 --> https://domain.com#f2{% endhighlight %}
The URL will only
show State information that diverts from the default State. Generally, the first Frame in a Layer will be the default
active Frame unless you specify a default Frame using:
{% highlight html %}
<div lj-type="layer" id="menulayer" lj-default-frame="!none"></div>{% endhighlight %}
URL modifications can be disabled per Layer using the 'lj-no-url' Layer attribute.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2>Gestures</h2>
<div class="row">
<div class="col-md-8">
<p>Gestures can trigger transitions. This includes touch gestures and swipes on the touchpad. There exist 4 directions
<strong>left, right, up, down</strong>. Those directional gestures will trigger transitons to frames that are specified
in the neigbor property of the Frame.
{% highlight html %}
<div lj-type="frame" id="f2" lj-neighbors.l="f1" lj-neighbors.r="f3"></div>{% endhighlight %}
</p>
</div>
<div class="col-md-4">
<figure class="drawing" style="width:240px;height:200px">
<div class="dframe" style="top:0px;left:0px;width:110px;height:100px;padding:10px;">
<p>
▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div class="dstage" style="top:0px;left:35px;width:110px;height:100px;">
</div>
<div class="dframe" style="top:0px;left:130px;width:110px;height:200px;padding:10px;">
<p>
▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄ ▄▄▄▄
</p>
</div>
<div style="top:25px;left:55px;">
<img src="img/swipeleft.svg" width="64" alt="One finger swipe left gesture outlined hand symbol free icon" title="One finger swipe left gesture outlined hand symbol free icon">
</div>
</figure>
</div>
</div>
</div>
</section>
<!-- <section>
<div class="container">
<h2> Why layerJS is different</h2>
<div class="row">
<div class="col-md-4">
<img src="img/iconHTML.png" width="150" class="column-icon">
<h3 class="text-center">Just HTML</h3>
<p>With layerJS the full layout and interactivity can be defined by pure CSS and HTML</p>
</div>
<div class="col-md-4">
<img src="img/iconstar.png" class="column-icon">
<h3 class="text-center">Full flexiblity</h3>
<p>layerJS does not provide a single effect with a given design but rather handles transitions of emtpy boxes that you can fill with your design.</p>
</div>
<div class="col-md-4">
<img src="img/icongestures.png" class="column-icon">
<h3 class="text-center">A framework</h3>
<p>layerJS does not just provide transition effects but a full framework including gesture support, a router and an API.</p>
</div>
</div>
</div>
</section> -->
<a name="feedback"> </a>
<section class="">
<div class="container">
<h2 style="">Feedback & questions</h2>
<p style="">Your feedback is very welcome! If you have any questions or comments please contact us
at
<a href="mailto:[email protected]">[email protected]</a>. We are continiously improving layerJS so with your feedback you can help shaping the future
development.
</p>
<!-- <textarea id="feedback_text" class="form-control" rows="3" placeholder="Please enter your comments or questions."></textarea>
<a id="feedback_send" class="btn btn-key pull-right" href="#">Send
<br>
</a> -->
<p>
Also please checkout our
<a href="https://medium.com/layerjs/getting-started-with-layerjs-17f679452c8d">"Getting started" tutorial</a>,
<a href="examples.html">examples</a>,
<a href="faq.html">FAQ</a> and
<a href="https://github.com/layerJS/layerJS/wiki">Wiki</a> for more detailed documentation of the layerJS functions.
</p>
</div>
<script>
deferReady(function () {
$('#feedback_text').on('blur', function () {
if (!$(this).val()) return;
dataLayer = dataLayer || [];
dataLayer.push({
event: "feedback_blur",
data: $(this).val()
});
});
$('#feedback_send').on('click', function () {
if (!$('#feedback_text').val()) return;
dataLayer = dataLayer || [];
dataLayer.push({
event: "feedback_click",
data: $('#feedback_text').val()
});
$(this).html("Thank you!");
});
});
</script>
</section>
<section class="signup" id='mailform-bottom'>
<div class="container">
<h2>Don't miss updates from layerJS</h2>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<p>Signup now for our newsletter and receive
<strong>tutorials</strong>,
<strong>release notes</strong> and
<strong>product updates</strong>. Our <a style="font-weight: inherit;color: inherit; text-decoration: underline" href="/privacy.html">privacy policy</a> applies. We won't spam you. Promised.
</p>
<!--<p>layerJS is not a UI kit. Upon user interaction it simply animates "empty boxes" - we call them <strong> Frames</strong>. What you put into the Frames is totally up to you.</p>-->
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<form action="https://layerjs.us13.list-manage.com/subscribe/post?u=8ad79651646c189c4b1e8780c&id=81732fa6fd" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="row">
<div class="col-md-3"><input type="text" value="" name="FNAME" class="form-control" id="mce-FNAME" placeholder="First name (optional)">
</div><div class="col-md-3"><input type="text" value="" name="LNAME" class="form-control" id="mce-LNAME" placeholder="Last name (optional)">
</div><div class="col-md-3"><input type="email" name="EMAIL" id="mce-EMAIL" class="form-control required email" placeholder="Email address">
</div><div class="col-md-3"> <button type="submit" class="btn btn-key" name="subscribe" id="mc-embedded-subscribe">Signup now</button>
</div> </div> </form></div>
</div>
</div>
</section>