mingle/mingle-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: 크리에이터 사인 마키 속도 조정 및 루프 개선

Browse Source 
- 애니메이션 속도 80s로 변경 (2배 느리게)
- 3배 복제로 부드러운 무한 루프 구현
- translateX(-33.333%)로 클라이언트 마키와 동일한 패턴 적용

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com 2026-02-03 22:50:59 +09:00
parent 7ff1f6db29
commit 860ea09741
2 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/common.css
View File

@ -1586,8 +1586,9 @@ body {
.signs-marquee-track { .signs-marquee-track {
display: flex; display: flex;
gap: var(--spacing-xl); gap: clamp(1.5rem, 3vw, 2.5rem);
animation: signsScroll 15s linear infinite; animation: signsScroll 80s linear infinite;
width: max-content;
} }
.signs-marquee:hover .signs-marquee-track { .signs-marquee:hover .signs-marquee-track {
@ -1596,7 +1597,7 @@ body {
@keyframes signsScroll { @keyframes signsScroll {
0% { transform: translateX(0); } 0% { transform: translateX(0); }
100% { transform: translateX(calc(-50% - var(--spacing-xl) / 2)); } 100% { transform: translateX(-33.333%); }
} }
.sign-item { .sign-item {
@ -1607,11 +1608,10 @@ body {
overflow: hidden; overflow: hidden;
background: var(--bg-light); background: var(--bg-light);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
} }
.sign-item:hover { .sign-item:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }

54
index.html
View File

@ -677,27 +677,39 @@
<div class="signs-marquee"> <div class="signs-marquee">
<div class="signs-marquee-track"> <div class="signs-marquee-track">
<div class="sign-item"><img src="images/sign/김마늘.jpg" alt="김마늘 사인" loading="lazy"><span class="sign-name">김마늘</span></div> <!-- 원본 10개 -->
<div class="sign-item"><img src="images/sign/만타.jpg" alt="만타 사인" loading="lazy"><span class="sign-name">만타</span></div> <div class="sign-item"><img src="images/sign/김마늘.jpg" alt="김마늘 사인"><span class="sign-name">김마늘</span></div>
<div class="sign-item"><img src="images/sign/문모모.jpg" alt="문모모 사인" loading="lazy"><span class="sign-name">문모모</span></div> <div class="sign-item"><img src="images/sign/만타.jpg" alt="만타 사인"><span class="sign-name">만타</span></div>
<div class="sign-item"><img src="images/sign/베니.jpg" alt="베니 사인" loading="lazy"><span class="sign-name">베니</span></div> <div class="sign-item"><img src="images/sign/문모모.jpg" alt="문모모 사인"><span class="sign-name">문모모</span></div>
<div class="sign-item"><img src="images/sign/시에.jpg" alt="시에 사인" loading="lazy"><span class="sign-name">시에</span></div> <div class="sign-item"><img src="images/sign/베니.jpg" alt="베니 사인"><span class="sign-name">베니</span></div>
<div class="sign-item"><img src="images/sign/요나카.jpg" alt="요나카 사인" loading="lazy"><span class="sign-name">요나카</span></div> <div class="sign-item"><img src="images/sign/시에.jpg" alt="시에 사인"><span class="sign-name">시에</span></div>
<div class="sign-item"><img src="images/sign/이무지.jpg" alt="이무지 사인" loading="lazy"><span class="sign-name">이무지</span></div> <div class="sign-item"><img src="images/sign/요나카.jpg" alt="요나카 사인"><span class="sign-name">요나카</span></div>
<div class="sign-item"><img src="images/sign/지한이또.jpg" alt="지한이또 사인" loading="lazy"><span class="sign-name">지한이또</span></div> <div class="sign-item"><img src="images/sign/이무지.jpg" alt="이무지 사인"><span class="sign-name">이무지</span></div>
<div class="sign-item"><img src="images/sign/최또.jpg" alt="최또 사인" loading="lazy"><span class="sign-name">최또</span></div> <div class="sign-item"><img src="images/sign/지한이또.jpg" alt="지한이또 사인"><span class="sign-name">지한이또</span></div>
<div class="sign-item"><img src="images/sign/치요.jpg" alt="치요 사인" loading="lazy"><span class="sign-name">치요</span></div> <div class="sign-item"><img src="images/sign/최또.jpg" alt="최또 사인"><span class="sign-name">최또</span></div>
<!-- 무한 루프용 복제 --> <div class="sign-item"><img src="images/sign/치요.jpg" alt="치요 사인"><span class="sign-name">치요</span></div>
<div class="sign-item"><img src="images/sign/김마늘.jpg" alt="김마늘 사인" loading="lazy"><span class="sign-name">김마늘</span></div> <!-- 복제 1 -->
<div class="sign-item"><img src="images/sign/만타.jpg" alt="만타 사인" loading="lazy"><span class="sign-name">만타</span></div> <div class="sign-item"><img src="images/sign/김마늘.jpg" alt="김마늘 사인"><span class="sign-name">김마늘</span></div>
<div class="sign-item"><img src="images/sign/문모모.jpg" alt="문모모 사인" loading="lazy"><span class="sign-name">문모모</span></div> <div class="sign-item"><img src="images/sign/만타.jpg" alt="만타 사인"><span class="sign-name">만타</span></div>
<div class="sign-item"><img src="images/sign/베니.jpg" alt="베니 사인" loading="lazy"><span class="sign-name">베니</span></div> <div class="sign-item"><img src="images/sign/문모모.jpg" alt="문모모 사인"><span class="sign-name">문모모</span></div>
<div class="sign-item"><img src="images/sign/시에.jpg" alt="시에 사인" loading="lazy"><span class="sign-name">시에</span></div> <div class="sign-item"><img src="images/sign/베니.jpg" alt="베니 사인"><span class="sign-name">베니</span></div>
<div class="sign-item"><img src="images/sign/요나카.jpg" alt="요나카 사인" loading="lazy"><span class="sign-name">요나카</span></div> <div class="sign-item"><img src="images/sign/시에.jpg" alt="시에 사인"><span class="sign-name">시에</span></div>
<div class="sign-item"><img src="images/sign/이무지.jpg" alt="이무지 사인" loading="lazy"><span class="sign-name">이무지</span></div> <div class="sign-item"><img src="images/sign/요나카.jpg" alt="요나카 사인"><span class="sign-name">요나카</span></div>
<div class="sign-item"><img src="images/sign/지한이또.jpg" alt="지한이또 사인" loading="lazy"><span class="sign-name">지한이또</span></div> <div class="sign-item"><img src="images/sign/이무지.jpg" alt="이무지 사인"><span class="sign-name">이무지</span></div>
<div class="sign-item"><img src="images/sign/최또.jpg" alt="최또 사인" loading="lazy"><span class="sign-name">최또</span></div> <div class="sign-item"><img src="images/sign/지한이또.jpg" alt="지한이또 사인"><span class="sign-name">지한이또</span></div>
<div class="sign-item"><img src="images/sign/치요.jpg" alt="치요 사인" loading="lazy"><span class="sign-name">치요</span></div> <div class="sign-item"><img src="images/sign/최또.jpg" alt="최또 사인"><span class="sign-name">최또</span></div>
<div class="sign-item"><img src="images/sign/치요.jpg" alt="치요 사인"><span class="sign-name">치요</span></div>
<!-- 복제 2 -->
<div class="sign-item"><img src="images/sign/김마늘.jpg" alt="김마늘 사인"><span class="sign-name">김마늘</span></div>
<div class="sign-item"><img src="images/sign/만타.jpg" alt="만타 사인"><span class="sign-name">만타</span></div>
<div class="sign-item"><img src="images/sign/문모모.jpg" alt="문모모 사인"><span class="sign-name">문모모</span></div>
<div class="sign-item"><img src="images/sign/베니.jpg" alt="베니 사인"><span class="sign-name">베니</span></div>
<div class="sign-item"><img src="images/sign/시에.jpg" alt="시에 사인"><span class="sign-name">시에</span></div>
<div class="sign-item"><img src="images/sign/요나카.jpg" alt="요나카 사인"><span class="sign-name">요나카</span></div>
<div class="sign-item"><img src="images/sign/이무지.jpg" alt="이무지 사인"><span class="sign-name">이무지</span></div>
<div class="sign-item"><img src="images/sign/지한이또.jpg" alt="지한이또 사인"><span class="sign-name">지한이또</span></div>
<div class="sign-item"><img src="images/sign/최또.jpg" alt="최또 사인"><span class="sign-name">최또</span></div>
<div class="sign-item"><img src="images/sign/치요.jpg" alt="치요 사인"><span class="sign-name">치요</span></div>
</div> </div>
</div> </div>
</div> </div>