prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fade in thumbnails

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-06-29 08:33:49 -07:00
parent fa29ea2ab8
commit 63932a356d
2 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/render/recipe.css
View file

@ -22,12 +22,12 @@ body {
width: 100%;
padding-top: 61.8%;
max-height:1vh;
background-color: var(--image-placeholder-color);
background-size: cover;
background-position: center;
margin-bottom:2em;
box-sizing: border-box;
transition:background-image 1s;
transition: opacity 200ms ease-out;
opacity:0;
/* margin: 0 -2em; */
}
@ -335,7 +335,7 @@ a.action .icon {
}
#thumbnail-container {
margin: 0 -8vw;
background-color: var(--image-placeholder-color);
}
#thumbnail {
padding-top: 56.25%;

3
docs/render/recipe.js
View file

@ -284,7 +284,7 @@ function render() {
alert(isLoaded);
}
var bgImg = new Image();
bgImg.onload = function(){
let thumbnail = document.querySelector("#thumbnail");
@ -292,6 +292,7 @@ function render() {
thumbnail.style.backgroundImage = 'url(' + bgImg.src + ')';
thumbnail.style.filter = `blur(${thumbnailContainer.offsetHeight / bgImg.naturalHeight}px)`;
thumbnail.style.transform = `scale(1.1)`;
setTimeout(() => thumbnail.style.opacity = 1.0, 100);
};
bgImg.src = image;