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

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

@@ -19,15 +19,16 @@
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
<div
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"
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"
/>
</div>
<div class="px-4 py-2">
<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">
{{ $champion->name }}
</p>
<span class="text-xsm text-stone-300">{{ $champion->title }}</span>