diff options
| author | Yuval Adam <yuval@y3xz.com> | 2015-07-15 23:09:35 +0300 |
|---|---|---|
| committer | Yuval Adam <yuval@y3xz.com> | 2015-07-15 23:09:35 +0300 |
| commit | 64f163256a55a6444f0c3d8313998ec3fa34a8a0 (patch) | |
| tree | 4fcb355ff65eaaee5ec4a37f3e901f6480645252 | |
| parent | 2893db3a20ed97b2036884c354d9e9e6d797d666 (diff) | |
Final Flickering Fix™
| -rw-r--r-- | client/button.js | 7 | ||||
| -rw-r--r-- | client/colors.less | 12 | ||||
| -rw-r--r-- | client/effects.js | 2 | ||||
| -rw-r--r-- | client/templates/photos.html | 2 |
4 files changed, 13 insertions, 10 deletions
diff --git a/client/button.js b/client/button.js index 62f2a91..9bcc542 100644 --- a/client/button.js +++ b/client/button.js @@ -63,9 +63,11 @@ function animate() { $('li#step2').addClass('active'); _.each(Session.get('photos'), function(x, i) { _.delay(function() { - Effects.pixelate(x.id); - $('#img-'+x.id).hide(); $('#canvas-'+x.id).show(); + Effects.pixelate(x.id); + _.delay(function () { + $('#img-'+x.id).hide(); + }, 100); }, 400 * i); }); }, delay + 2000); @@ -80,7 +82,6 @@ function animate() { _.each(Session.get('photos'), function(x, i) { _.delay(function () { Effects.colorize(x.id); - $('#img-'+x.id).hide(); $('#canvas-'+x.id).show(); }, 400 * i); }); diff --git a/client/colors.less b/client/colors.less index 2c70c28..4256865 100644 --- a/client/colors.less +++ b/client/colors.less @@ -209,15 +209,19 @@ body { margin: 3px 8px; width: 153px; height: 173px; - img { - height: 153px; - width: 153px; - } canvas { + position: absolute; width: 153px; height: 153px; } + img { + position: absolute; + height: 153px; + width: 153px; + } div.title { + position: relative; + margin-top: 153px; color: #999; text-align: center; font-family: 'Cutive Mono', serif; diff --git a/client/effects.js b/client/effects.js index afa744f..7b5f9a5 100644 --- a/client/effects.js +++ b/client/effects.js @@ -84,8 +84,6 @@ Effects = (function() { Session.set(id + ':colors', cols); Session.set(id + ':palette', valued_centroids); Session.set(id + ':newcolors', newcols); - - canvas.style.position = 'static'; }); } diff --git a/client/templates/photos.html b/client/templates/photos.html index 1031464..fa11543 100644 --- a/client/templates/photos.html +++ b/client/templates/photos.html @@ -65,8 +65,8 @@ <template name="photo"> <div class="photo" style="display: none;"> + <canvas id="canvas-{{id}}" style="position: absolute; height: 153px; width: 153px;"></canvas> <img id="img-{{id}}" class="instagram-photo" src="{{proxy images.thumbnail.url}}" crossorigin="anonymous"> - <canvas id="canvas-{{id}}" style="position: absolute; left: -9999px; height: 150px; width: 150px;"></canvas> <div class="title">{{date}}</div> </div> </template> |