Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2025-12-06 18:20:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: image load animation

Browse Source
This commit is contained in:
Rico van Zelst
2023-11-07 19:38:34 +01:00
parent b5342fcc9d
commit 790b8d280f
2 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/app.js
View File

@@ -3,3 +3,14 @@ import "flowbite";
import "./icons"; import "./icons";
import "./icons-brands"; import "./icons-brands";
import "./icons-duotone"; import "./icons-duotone";
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll(".transition-opacity");
images.forEach((image) => {
image.onload = function () {
image.style.filter = "blur(0)";
image.style.opacity = "1";
};
});
});

5
resources/views/components/champions/list_all.blade.php
View File

@@ -19,12 +19,13 @@
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10"> border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
<div <div
class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40"> class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
<img @if($key < 8) loading="auto" @else loading="lazy" @endif <img @if($key < 8) loading="eager" @else loading="lazy" @endif
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=400&output=webp&q=70" src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=400&output=webp&q=70"
class="object-cover w-full h-full" class="object-cover w-full h-full transition-opacity filter blur-3 opacity-0"
alt="{{ $champion->name }} Splash Art" alt="{{ $champion->name }} Splash Art"
/> />
</div> </div>
<div class="px-4 py-2"> <div class="px-4 py-2">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<p class="block text-base antialiased font-medium text-gray-100"> <p class="block text-base antialiased font-medium text-gray-100">