caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: AlbumGallery 이미지 로드 애니메이션 추가

Browse source
This commit is contained in:
caadiq 2026-01-02 12:20:08 +09:00
parent 9f7548b4b4
commit 96e7ae0539
1 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/pages/pc/AlbumGallery.jsx
View file

@ -5,8 +5,18 @@ import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
import { RowsPhotoAlbum } from 'react-photo-album'; import { RowsPhotoAlbum } from 'react-photo-album';
import 'react-photo-album/rows.css'; import 'react-photo-album/rows.css';
// CSS로 호버 효과 추가 + overflow 문제 수정 // CSS로 호버 효과 추가 + overflow 문제 수정 + 로드 애니메이션
const galleryStyles = ` const galleryStyles = `
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.react-photo-album { .react-photo-album {
overflow: visible !important; overflow: visible !important;
} }
@ -17,12 +27,25 @@ const galleryStyles = `
transition: transform 0.3s ease, filter 0.3s ease !important; transition: transform 0.3s ease, filter 0.3s ease !important;
cursor: pointer; cursor: pointer;
overflow: visible !important; overflow: visible !important;
animation: fadeInUp 0.4s ease-out backwards;
} }
.react-photo-album--photo:hover { .react-photo-album--photo:hover {
transform: scale(1.05); transform: scale(1.05);
filter: brightness(0.9); filter: brightness(0.9);
z-index: 10; z-index: 10;
} }
/* 순차적 로드 애니메이션 */
.react-photo-album--photo:nth-child(1) { animation-delay: 0.02s; }
.react-photo-album--photo:nth-child(2) { animation-delay: 0.04s; }
.react-photo-album--photo:nth-child(3) { animation-delay: 0.06s; }
.react-photo-album--photo:nth-child(4) { animation-delay: 0.08s; }
.react-photo-album--photo:nth-child(5) { animation-delay: 0.1s; }
.react-photo-album--photo:nth-child(6) { animation-delay: 0.12s; }
.react-photo-album--photo:nth-child(7) { animation-delay: 0.14s; }
.react-photo-album--photo:nth-child(8) { animation-delay: 0.16s; }
.react-photo-album--photo:nth-child(9) { animation-delay: 0.18s; }
.react-photo-album--photo:nth-child(10) { animation-delay: 0.2s; }
.react-photo-album--photo:nth-child(n+11) { animation-delay: 0.22s; }
`; `;
function AlbumGallery() { function AlbumGallery() {