Skip to content

Commit c6cee92

Browse files
thipokchthipokch
committed
DDC Milestone 2: stagger load + custom fonts
1 parent 26c8b0f commit c6cee92

File tree

4 files changed

+89
-59
lines changed

4 files changed

+89
-59
lines changed

‎DisposableCameraConnection/index.html

Lines changed: 89 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
.horizontal-scroll-wrapper>.horizontal-scroll-div {
2828
/* transform: scaleX(-1) translateX(100%); */
29-
transform: scale3d(-1, 1, 1) translate3d(100%, 0, 0);
29+
transform: scale3d(-1.04, 1, 1) translate3d(97%, 0, 0);
3030
transform-origin: right top;
3131
}
3232

@@ -36,12 +36,37 @@
3636
grid-template-columns: repeat(auto-fill, minmax(48vh, 1fr));
3737
grid-auto-rows: 8vh;
3838
width: 96vh;
39+
/* margin-bottom: 50vw; */
40+
}
41+
42+
.masonry.buffer {
43+
opacity: 0;
44+
transition: all 1s;
45+
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
46+
min-height: 25vw;
3947
}
4048

4149
.masonry-item .overlay {
4250
position: absolute;
4351
bottom: 0;
4452
left: 0;
53+
opacity: 0;
54+
transition: all 1s;
55+
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
56+
font-family: 'Reckless Neue', 'Times New Roman', serif;
57+
font-weight: 100;
58+
font-style: italic;
59+
}
60+
61+
.masonry-item:hover .overlay {
62+
opacity: 1;
63+
}
64+
65+
.image-container {
66+
margin-right: 20px;
67+
margin-bottom: 20px;
68+
margin-top: 20px;
69+
overflow: hidden;
4570
}
4671

4772
.masonry-item {
@@ -53,18 +78,20 @@
5378
width: 48vh;
5479
/* margin: 1vh; */
5580
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
56-
/* padding: 12px; */
81+
/* padding: 24px; */
82+
transform: translate3d(0, 50px, 0);
5783
}
5884

5985
.masonry-item img {
60-
max-width: 48vh;
86+
width: 48vh;
6187
object-fit: cover;
62-
transition: opacity .3s !important;
88+
transition: opacity .3s;
6389
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
6490
}
6591

6692
.masonry-item.appended {
6793
opacity: 1;
94+
transform: translate3d(0, 0, 0);
6895
}
6996

7097
.masonry-item img:hover {
@@ -80,27 +107,46 @@
80107
top: 0px;
81108
left: 0px;
82109
}
110+
111+
@font-face {
112+
font-family: 'Reckless Neue';
113+
font-style: normal;
114+
font-weight: 100;
115+
src: local('Reckless Neue'), local('Reckless Neue-Thin'), url(https://gh.uwdesignshow.com/2020/fonts/RN-Thin.woff) format('woff');
116+
}
117+
118+
@font-face {
119+
font-family: 'Reckless Neue';
120+
font-style: italic;
121+
font-weight: 100;
122+
src: local('Reckless Neue'), local('Reckless Neue-ThinItalic'),url(https://gh.uwdesignshow.com/2020/fonts/RN-ThinItalic.woff) format('woff');
123+
}
124+
125+
@font-face {
126+
font-family: 'Oakes Grotesk';
127+
font-style: normal;
128+
font-weight: 400;
129+
src: url(https://gh.uwdesignshow.com/2020/fonts/OG-Regular.woff2) format('woff2');
130+
}
83131
</style>
84132
</head>
85133

86134
<body>
87135
<div class="horizontal-scroll-wrapper">
88136
<div class="masonry horizontal-scroll-div" id="masonry">
89-
<!-- <div class="masonry-item stagger"></div> -->
137+
<div class="masonry-item stagger"></div>
90138
</div>
139+
<div class="masonry buffer" id="masonry-buffer"></div>
91140
</div>
92141

93-
<button id="loadMore" type="button">Load more</button>
94-
95-
96142
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
97143
<script>
98144
// Predefined constansts
99145
const $uwdimg = "https://images.uwdesignshow.com/?"; // UW image proxy to images.weserv.nl
100146
const imgquery = "ro=90&af&il&auth=uw"; // Authentication token and image transforms
101147
const urlpath =
102148
"https://gh.uwdesignshow.com/2020/DisposableCameraConnection/"; // Base url for this page's resources
103-
const itemsFetchCount = 6; // Number of images/items to add in each fetch
149+
var itemsFetchCount = 0; // Number of images/items to add in each fetch
104150

105151
// On DOM constructed
106152
$(document).ready(() => {
@@ -125,6 +171,7 @@
125171
})();
126172

127173
var $msnry = $('#masonry')
174+
var $msnrybf = $('#masonry-buffer')
128175

129176
// Masonry layout
130177

@@ -141,17 +188,10 @@
141188
rowHeight = isLandscape ? '72vh' : '32vh';
142189

143190
$item.height(rowHeight);
144-
$img.height(rowHeight)
191+
$img.height(rowHeight);
145192
$item.css('gridRowEnd', 'span ' + rowSpan);
146193
}
147194

148-
// Asynchronously populate json and hiddenItems
149-
$.getJSON(urlpath + "data/" + urlParams["data"],
150-
(data) => {
151-
json = data;
152-
hiddenItems = data.images;
153-
}
154-
);
155195

156196
// Returns a srcset of image mirror for the given url and array of width sizes
157197
function srcSetImageMirror(url, sizes) {
@@ -167,64 +207,54 @@
167207
// Returns generated masonry item based on given itemData
168208
function generateItem(itemData) {
169209
var src = urlpath + itemData.src.substring('2')
170-
return '<div class="masonry-item new"><img srcset="' +
210+
return '<div class="masonry-item buffer"><div class="image-container"><img srcset="' +
171211
srcSetImageMirror(src, [100, 300, 500, 750, 1000, 1500, 2500, 5000]) +
172212
'" class="masonry-content"><a class="overlay" href="https://www.uwdesignshow.com/students/' +
173213
itemData
174-
.slug + '">' + itemData.name + '—' + itemData.program + '</a></div>';
214+
.slug + '">' + itemData.name + '—' + itemData.program + '</a></div></div>';
175215
}
176216

177217
// Fetch predefined number of images and add it to masonry
178218
function addMsnryItems() {
179-
if (hiddenItems.length > 0 && fetching <= 0) {
219+
if (hiddenItems.length > 0) {
220+
itemsFetchCount = hiddenItems.length
180221
fetching += itemsFetchCount;
181-
var msnryItems = []
182222
for (var i = itemsFetchCount - 1; i >= 0; i--) {
183223
// Randomly pick and remove items from hiddenItems
184224
var item = hiddenItems.splice(Math.floor(Math.random() * hiddenItems.length), 1);
185-
$item = $(generateItem(item[0]))
186-
msnryItems.push($item);
187-
addedItems.push([item, $item]);
188-
$msnry.append($item);
225+
if (item.length > 0 && item[0].src) {
226+
setTimeout(addMsnryItem, 750 * i, item)
227+
}
189228
}
190-
191-
$msnry.find('img').on('load', (event) => {
192-
var img = event.target;
193-
var $item = $(img.parentElement);
194-
195-
// var lastmsn = $msnry.find('.appended').last()
196-
// if (lastmsn) {
197-
// $item.detach
198-
// $item.insertAfter(lastmsn)
199-
// }
200-
201-
// if (!$staggerItems) {
202-
$item.removeClass('new');
203-
resizeGridItem($item, $(img));
204-
// $staggerItem
205-
$item.addClass('appended');
206-
fetching--;
207-
$('#loadMore').show();
208-
})
209-
210-
setTimeout(() => {
211-
fetching = 0;
212-
}, 2000)
213229
}
214230
}
215231

216-
$(window).scroll(() => {
217-
var scrollTop = $(window).scrollTop();
218-
var docHeight = $(document).height();
219-
var winHeight = $(window).height();
220-
var scrollPercent = (scrollTop) / (docHeight - winHeight);
221-
var scrollPercentRounded = Math.round(scrollPercent * 100);
222-
if (scrollPercent > 75) {
223-
addMsnryItems();
224-
}
225-
})
232+
function addMsnryItem(item) {
233+
$item = $(generateItem(item[0]))
234+
$msnrybf.append($item);
235+
$item.find('img').on('load', (event) => {
236+
var img = event.target;
237+
var $item = $(img.parentElement.parentElement);
238+
$item.detach()
239+
$item.removeClass('buffer');
240+
$msnry.append($item)
241+
resizeGridItem($item, $(img));
242+
$item.addClass('appended');
243+
244+
fetching--;
245+
})
246+
addedItems.push([item, $item]);
247+
}
248+
226249

227-
addMsnryItems();
250+
// Asynchronously populate json and hiddenItems
251+
$.getJSON(urlpath + "data/" + urlParams["data"],
252+
(data) => {
253+
json = data;
254+
hiddenItems = data.images;
255+
addMsnryItems()
256+
}
257+
);
228258
})
229259
</script>
230260
</body>

‎fonts/OG-Regular.woff2

39 KB
Binary file not shown.

‎fonts/RN-Thin.woff

44.8 KB
Binary file not shown.

‎fonts/RN-ThinItalic.woff

41.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)