-
Notifications
You must be signed in to change notification settings - Fork 4
/
example.html
122 lines (112 loc) · 4.42 KB
/
example.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
<html>
<style>
/* Use this if images are appearing before rendering correctly */
.container {
opacity: 0;
}
.box {
background-color: gray;
transition: transform 500ms ease-in 0ms, height 500ms ease-in 0ms, width 500ms ease-in 0ms;
}
/* 100% height and width are necessary for images to render correctly*/
.image {
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 375ms ease-in;
}
.is-loaded .image {
opacity: 1;
}
</style>
<body>
<div style="margin : auto; text-align: center">
<h1>Tessarray<h1>
</div>
<button class="selector" data-filter="" data-sort="">all</button>
<button class="selector" data-filter="" data-sort="data-reverse">reverse-all</button>
<button class="selector" data-filter="nature">nature</button>
<button class="selector" data-filter="buildings">buildings</button>
<button class="selector" data-filter="people">people</button>
<span style="float: right">Try resizing the window!</span>
<!-- Provide aspect ratio or height and width through data attributes for a smoother load. -->
<!-- If you don't know the dimensions, you don't have to provide any -->
<div class="container">
<div class="box reverse people" data-reverse="9" data-height="1600" data-width="1080">
<img class="image" src="https://source.unsplash.com/category/people/1080x1600"/>
</div>
<div class="box reverse nature" data-reverse="8" data-aspect-ratio="0.66666666666" >
<img class="image" src="https://source.unsplash.com/category/nature/720x1080"/>
</div>
<div class="box reverse nature" data-reverse="7" data-aspect-ratio="1">
<img class="image" src="https://source.unsplash.com/category/nature/900x900"/>
</div>
<div class="box reverse people" data-reverse="6" data-aspect-ratio="1.77777777778">
<img class="image" src="https://source.unsplash.com/category/people/1600x900"/>
</div>
<div class="box reverse nature" data-reverse="5" data-aspect-ratio="1.333333">
<img class="image" src="https://source.unsplash.com/category/nature/800x600"/>
</div>
<div class="box reverse buildings" data-reverse="4" data-aspect-ratio="1">
<img class="image" src="https://source.unsplash.com/category/buildings/600x600"/>
</div>
<div class="box reverse people" data-reverse="3" data-aspect-ratio="1">
<img class="image" src="https://source.unsplash.com/category/people/900x900"/>
</div>
<div class="box reverse buildings" data-reverse="2" data-aspect-ratio="0.675">
<img class="image" src="https://source.unsplash.com/category/buildings/1080x1600"/>
</div>
<div class="box reverse nature" data-reverse="1" data-aspect-ratio="1.333333333">
<img class="image" src="https://source.unsplash.com/category/nature/1200x900"/>
</div>
</div>
</body>
<script src='dist/tessarray.js'></script>
<script>
var tessarray = new Tessarray(".container", ".box", {
selectorClass: "selector",
boxTransition: false,
boxTransformOutTransition: false,
// You can uncomment lines to see how options effect the render:
// imageClass: "imageClass",
// defaultCategory: "people",
// containerTransition: "opacity 400ms ease-in",
// containerTransition: false,
// containerTransition: {
// duration: 5000,
// timingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
// delay: 0
// },
// boxTransition: {
// duration: 350,
// timingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
// timingFunction: "cubic-bezier(0.320, 1.385, 0.730, -0.470)",
// delay: 0,
// },
// boxTransition: 'transform 500ms ease-in 0ms, height 500ms ease-in 0ms, width 500ms ease-in 0ms',
// boxTransition: 'height 500ms ease-in 0ms, width 500ms ease-in 0ms',
// isLoaded: function(box) {
// // box.style.opacity = 1;
// },
// flickr: {
// containerWidth: 900,
// targetRowHeight: 300,
// targetRowHeightTolerance: 0.25,
// showWidows: false,
// containerPadding: 0,
// containerPadding: {
// top: 10,
// right: 15,
// bottom: 0,
// left: 5
// }
// maxNumRows: 2,
// containerPadding: 40
// }
});
// You can change the options after Tessarray is instantiated, just
// call tessarray.renderBoxes to apply new changes.
// tessarray.options.flickr.targetRowHeight = 500;
// tessarray.renderBoxes();
</script>
</html>