jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add blur->sharpen animation for loading expanded images on posts

Browse Source
This commit is contained in:
Albert Yi
2019-01-23 16:56:00 -08:00
parent 17ae357da9
commit 6c332057ac
2 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/src/javascripts/posts.js.erb
View File

@@ -315,11 +315,11 @@ Post.expand_image = function(e) {
var $image = $("#image"); var $image = $("#image");
var $notice = $("#image-resize-notice"); var $notice = $("#image-resize-notice");
$image.attr("src", $link.attr("href")); $image.attr("src", $link.attr("href"));
$image.css("opacity", "0.25"); $image.css("filter", "blur(8px)");
$image.width($image.data("original-width")); $image.width($image.data("original-width"));
$image.height($image.data("original-height")); $image.height($image.data("original-height"));
$image.on("load.danbooru", function() { $image.on("load.danbooru", function() {
$image.css("opacity", "1"); $image.css("animation", "sharpen 0.5s forwards");
$notice.hide(); $notice.hide();
}); });
$notice.children().eq(0).hide(); $notice.children().eq(0).hide();
@@ -340,13 +340,13 @@ Post.initialize_post_image_resize_links = function() {
var $image = $("#image"); var $image = $("#image");
var $notice = $("#image-resize-notice"); var $notice = $("#image-resize-notice");
$image.attr("src", $("#image-container").data("large-file-url")); $image.attr("src", $("#image-container").data("large-file-url"));
$image.css("opacity", "0.25"); $image.css("filter", "blur(8px)");
$image.width($image.data("large-width")); $image.width($image.data("large-width"));
$image.height($image.data("large-height")); $image.height($image.data("large-height"));
$notice.children().eq(0).show(); $notice.children().eq(0).show();
$notice.children().eq(1).hide(); // Loading message $notice.children().eq(1).hide(); // Loading message
$image.on("load.danbooru", function() { $image.on("load.danbooru", function() {
$image.css("opacity", "1"); $image.css("animation", "sharpen 0.5s forwards");
$notice.show(); $notice.show();
}); });
Note.Box.scale_all(); Note.Box.scale_all();

34
app/javascript/src/styles/specific/posts.scss
View File

@@ -1,5 +1,27 @@
@import "../base/000_vars.scss"; @import "../base/000_vars.scss";
@keyframes heartbeat {
0% {
transform:scale(1);
}
50% {
transform:scale(1.3);
}
100% {
transform:scale(1);
}
}
@keyframes sharpen {
from {
filter: blur(8px);
}
to {
filter: none;
}
}
article.post-preview { article.post-preview {
height: 154px; height: 154px;
width: 154px; width: 154px;
@@ -149,18 +171,6 @@ body[data-user-can-approve-posts="true"] .post-preview {
color: red; color: red;
} }
@keyframes heartbeat {
0% {
transform:scale(1);
}
50% {
transform:scale(1.3);
}
100% {
transform:scale(1);
}
}
div#c-posts { div#c-posts {
.fav-buttons { .fav-buttons {
font-size: 14pt; font-size: 14pt;