Skip to content

Commit 44a59f0

Browse files
SaturateSaturate
committed
Animate and get backers and supporters
This will load all backers and sponsor images, and fade them in - untill they are loaded a loading animation will play. Polyfills for fetch and promises included. ES5ify code.
1 parent 079af35 commit 44a59f0

File tree

3 files changed

+131
-33
lines changed

3 files changed

+131
-33
lines changed

‎css/main.css

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -512,21 +512,85 @@ p.paragraph {
512512
}
513513
}
514514

515+
516+
@media (max-width: 750px) {
517+
.footer .col-6:nth-of-type(1) {
518+
margin-bottom: 0;
519+
}
520+
.footer .col-6 {
521+
width: 100%;
522+
margin-top: 30px;
523+
}
524+
}
525+
526+
@media (max-width: 750px) {
527+
.footer .flex {
528+
flex-wrap: wrap;
529+
}
530+
}
531+
515532
.supporters {
516533
padding: 10px 0;
534+
display: flex;
535+
align-items: center;
536+
justify-content: center;
537+
flex-wrap: wrap;
517538
}
518539
.supporter {
519540
display: flex;
520541
align-items: center;
521542
justify-content: center;
543+
overflow: hidden;
522544
border-radius: 3px;
523545
margin: 10px;
524546
float: left;
525-
width: 112px;
526-
height: 112px;
547+
width: 80px;
548+
height: 80px;
527549
box-sizing: content-box;
528550
background: #fff;
529551
}
552+
.supporter--skeleton{
553+
position: relative;
554+
}
555+
.supporter--skeleton:after{
556+
content:'';
557+
box-sizing: border-box;
558+
/* centre everything */
559+
position: absolute;
560+
transform: translate(-50%, -50%);
561+
top: 50%;
562+
left: 50%;
563+
background: #e2e2e2;
564+
width: 10px;
565+
height: 10px;
566+
border-radius: 50%;
567+
-webkit-animation: loading 1000ms ease-in-out infinite alternate;
568+
-moz-animation: loading 1000ms ease-in-out infinite alternate;
569+
animation: loading 1000ms ease-in-out infinite ;
570+
}
571+
530572
.supporter img {
531-
border-radius: 3px;
573+
opacity: 1;
574+
transition: opacity 400ms;
575+
}
576+
.supporter--skeleton img {
577+
opacity: 0;
578+
}
579+
@-webkit-keyframes loading {
580+
0% {transform: translate(-40px, -50%); opacity: 0;}
581+
60% {opacity: 1;}
582+
90% {opacity: 0;}
583+
100% {transform: translate(27px, -50%); opacity: 0;}
584+
}
585+
@-moz-keyframes loading {
586+
0% {transform: translate(-40px, -50%); opacity: 0;}
587+
60% {opacity: 1;}
588+
90% {opacity: 0;}
589+
100% {transform: translate(27px, -50%); opacity: 0;}
590+
}
591+
@keyframes loading {
592+
0% {transform: translate(-40px, -50%); opacity: 0;}
593+
60% {opacity: 1;}
594+
90% {opacity: 0;}
595+
100% {transform: translate(27px, -50%); opacity: 0;}
532596
}

‎index.html

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -136,32 +136,36 @@ <h4 class="subheading">
136136
</div>
137137

138138
<div class="footer">
139-
<div class="container-sml">
140-
<div class="col-12 text-center">
139+
<div class="container-lrg flex">
140+
<div class="col-6 text-center">
141141
<div class="contribute-copy center vertical text-center">
142-
<h3 class="subheading">Backers &amp; Sponsors</h3>
143-
<div class="supporters" id="supporters">
144-
<div class="supporter supporter--skeleton"></div>
145-
<div class="supporter supporter--skeleton"></div>
146-
<div class="supporter supporter--skeleton"></div>
147-
<div class="supporter supporter--skeleton"></div>
148-
<div class="supporter supporter--skeleton"></div>
149-
<div class="supporter supporter--skeleton"></div>
150-
<div class="supporter supporter--skeleton"></div>
151-
<div class="supporter supporter--skeleton"></div>
152-
<div class="supporter supporter--skeleton"></div>
153-
<div class="supporter supporter--skeleton"></div>
154-
</div>
155142
<h3 class="subheading">Become a backer</h3>
156143
<p class="paragraph">
157144
Support the community and keep development going strong.
158145
</p>
159146
<a class="ctas-button" href="https://opencollective.com/gulpjs">Donate</a>
160147
</div>
161148
</div>
149+
<div class="col-6 text-center">
150+
<h3 class="subheading">Backers &amp; Sponsors</h3>
151+
<div class="supporters" id="supporters">
152+
<div class="supporter supporter--skeleton"></div>
153+
<div class="supporter supporter--skeleton"></div>
154+
<div class="supporter supporter--skeleton"></div>
155+
<div class="supporter supporter--skeleton"></div>
156+
<div class="supporter supporter--skeleton"></div>
157+
<div class="supporter supporter--skeleton"></div>
158+
<div class="supporter supporter--skeleton"></div>
159+
<div class="supporter supporter--skeleton"></div>
160+
<div class="supporter supporter--skeleton"></div>
161+
<div class="supporter supporter--skeleton"></div>
162+
</div>
163+
</div>
162164
</div>
163165
</div>
164166

167+
<script src="//unpkg.com/promise-polyfill@6.0.2/promise.min.js"></script>
168+
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
165169
<script async src="/js/script.js"></script>
166170
</body>
167171
</html>

‎js/script.js

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,45 @@
1-
Promise.all(['https://opencollective.com/gulpjs/sponsor.json','https://opencollective.com/gulpjs/backer.json'].map(url =>
2-
fetch(url).then(resp => resp.json())
3-
)).then(entries => {
4-
let html = '';
5-
const supporters = [].concat.apply([], entries);
6-
const supportersToDisplay = supporters
7-
.sort( (first, second) => {return (second.totalDonations - first.totalDonations)} )
8-
.slice(0, 10);
9-
10-
supportersToDisplay.forEach((supporter) => {
11-
html += `<a class="supporter" href="${supporter.website}"><img alt="${supporter.name}" src="${supporter.avatar}" width="112"></a>`
12-
});
13-
14-
document.getElementById('supporters').innerHTML = html;
15-
});
1+
(function(){
2+
var services = [
3+
'https://opencollective.com/gulpjs/sponsor.json',
4+
'https://opencollective.com/gulpjs/backer.json'
5+
].map(function (url) {
6+
return fetch(url)
7+
.then(function(resp) {
8+
return resp.json();
9+
});
10+
})
11+
12+
Promise.all(services).then(function (entries) {
13+
var fragment = document.createDocumentFragment();
14+
var nodes = [];
15+
var supporters = [].concat.apply([], entries);
16+
var supportersToDisplay = supporters
17+
.sort(function(first, second) {
18+
return (second.totalDonations - first.totalDonations)
19+
})
20+
.slice(0, 10);
21+
22+
supportersToDisplay.forEach(function(supporter) {
23+
var img = new Image();
24+
img.src = 'https://opencollective.com/proxy/images/?src=' + supporter.avatar ;
25+
img.width = 80;
26+
img.onload = function(e) {
27+
e.currentTarget.parentNode.classList.remove('supporter--skeleton');
28+
}
29+
30+
var link = document.createElement('a');
31+
link.className = 'supporter supporter--skeleton';
32+
link.href = supporter.website;
33+
34+
link.appendChild(img);
35+
nodes.push(link);
36+
});
37+
38+
nodes.forEach(function(node) {
39+
fragment.appendChild(node);
40+
});
41+
42+
document.getElementById('supporters').innerHTML = ''; // Clear prerendered items
43+
document.getElementById('supporters').appendChild( fragment );
44+
});
45+
})();

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy