milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Blurhash implementation (from scratch)

Browse source
This commit is contained in:
ferferga 2020-05-23 18:35:34 +02:00
parent 2efdc94146
commit 8ef7a7a054
4 changed files with 139 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/images/style.css
View file

@ -1,13 +1,18 @@
.cardImageContainer.lazy {
opacity: 0;
.lazy-blurhash-fadein-fast {
transition: opacity 0.2s;
}
.cardImageContainer.lazy.lazy-image-fadein {
opacity: 1;
.lazy-blurhash-fadein {
transition: opacity 0.7s;
}
.cardImageContainer.lazy.lazy-image-fadein-fast {
opacity: 1;
transition: opacity 0.2s;
/* We let the canvas overflow a little, so it gives a cooler zoom effect when transitioning */
.blurhash-canvas {
align-items: stretch;
position: absolute;
top: -5px;
left: -5px;
width: 105%;
height: 105%;
z-index: -1000;
}