Added blur and shimmer effect for image loading

This commit is contained in:
Данил 2022-12-03 17:48:11 +03:00
parent 79555722ef
commit 36c1a116dc
2 changed files with 48 additions and 8 deletions

View file

@ -48,7 +48,7 @@ function wallpaper(data) {
$(".header-row").append(` $(".header-row").append(`
<div class="card"> <div class="card">
<a data-bs-toggle="modal" href="#WallpaperModal" role="button"> <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
<img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" id="${id}"> <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top shimmer" id="${id}">
</a> </a>
</div> </div>
`); `);
@ -59,7 +59,7 @@ function wallpaper(data) {
<img src="http://localhost:3000/static/image/placeholder.png" <img src="http://localhost:3000/static/image/placeholder.png"
data-src="https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg" data-src="https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg"
alt="${ids[id]['title']}" alt="${ids[id]['title']}"
class="card-img-top" class="card-img-top shimmer"
id="${id}"> id="${id}">
</a> </a>
</div> </div>
@ -67,6 +67,11 @@ function wallpaper(data) {
} }
} }
//if all images are loaded delete class
$(".card-img-top").on("load", function() {
$(this).removeClass("shimmer");
});
let button_modal = document.querySelector(".header-row"); let button_modal = document.querySelector(".header-row");
button_modal.addEventListener("click", function (event) { button_modal.addEventListener("click", function (event) {
@ -93,16 +98,17 @@ function wallpaper(data) {
} }
let setWallpaper = document.querySelector("#setWallpaper"); let setWallpaper = document.querySelector("#setWallpaper");
ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright']; ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright'];
let explanation = ids[id]['explanation'].length > 200 ? ids[id]['explanation'].slice(0, 200) + "..." : ids[id]['explanation'];
if (ids[id]['media_type'] === "image") { if (ids[id]['media_type'] === "image") {
title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`; title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
img.innerHTML = ` img.innerHTML = `
<img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img"> <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img">
<p><strong>Author:</strong> ${ids[id]['copyright']}</p> <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${ids[id]['date']}</p> <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
<p><strong>Explanation:</strong> ${ids[id]['explanation']}</p> <p><strong>Explanation:</strong> ${explanation}</p>
<button type="button" class="show-more btn btn-primary" id="show-more">Show more</button>
`; `;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
@ -120,13 +126,27 @@ function wallpaper(data) {
<p><strong>Author:</strong> ${ids[id]['copyright']}</p> <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
<p><strong>Date of publication:</strong> ${ids[id]['date']}</p> <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
<p><strong>Explanation:</strong> ${ids[id]['explanation']}</p> <p><strong>Explanation:</strong> ${explanation}</p>
<button type="button" class="show-more btn btn-primary" id="show-more">Show more</button>
`; `;
setWallpaper.addEventListener("click", function () { setWallpaper.addEventListener("click", function () {
wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg`); wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg`);
}); });
} }
let showMore = document.querySelector("#show-more");
showMore.addEventListener("click", function () {
let explanation = document.querySelector(".modal-body p:nth-child(4)");
if(showMore.innerHTML === "Show more") {
explanation.innerHTML = `<strong>Explanation:</strong> ${ids[id]['explanation']}`;
showMore.innerHTML = "Show less";
} else {
explanation.innerHTML = explanation.innerHTML.slice(0, 200) + "...";
showMore.innerHTML = "Show more";
}
});
}); });
$(window).scroll(function () { $(window).scroll(function () {

View file

@ -29,13 +29,33 @@ lottie-player {
margin: 0 auto; margin: 0 auto;
} }
.modal-body, .modal-content {
.modal-footer,
.modal-header {
background-color: #212529; background-color: #212529;
color: white; color: white;
} }
.shimmer {
display: inline-block;
color: grey;
-webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/370% 100%;
background-repeat: no-repeat;
animation: shimmer 2.5s infinite;
filter: blur(50px)
}
@keyframes shimmer {
100% {-webkit-mask-position: left}
}
#show-more {
background-color: #212529;
color: white;
border: none;
border-radius: 16px;
padding: 10px;
margin: 10px;
}
.modal-body p { .modal-body p {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin-top: 16px; margin-top: 16px;