mirror of
https://github.com/Starlio-app/StarlioX
synced 2024-11-24 09:06:22 +03:00
Added blur and shimmer effect for image loading
This commit is contained in:
parent
79555722ef
commit
36c1a116dc
2 changed files with 48 additions and 8 deletions
|
@ -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 () {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Reference in a new issue