메뉴에 페이드인 효과를 넣고 싶은데요.. 채택완료
Winter0
11개월 전
조회 2,605
안녕하세요
메뉴에 페이드인 효과를 넣어서, 처음 사이트 들어갈 때 딱 한번만 애니메이션이 보이게 하고 싶습니다.
근데, 그누보드 특성상 게시판이나 게시글 클릭하면 페이지가 새로고침 되는 형태다보니 계속 애니메이션이 반복됩니다...
좀 더 정확히는, 스크립트의 5초 지연은 한번만이 잘 적용되는데, css의 show가 반복되어요...
어떻게 하면 좋을까요..? ^^ㅠㅠ
추가 : 테마 레이아웃은 플렉스로 잡았습니다.
</p>
<p>#menu {
visibility: hidden; /* 처음에 보이지 않음 */
opacity: 0; /* 투명도 0 */
transition: opacity 0.5s ease-in-out; /* 부드러운 페이드 효과 */
}
#menu.show {
visibility: visible; /* 보이게 설정 */
opacity: 1; /* 투명도 100% */
}</p>
<p> </p>
<p>document.addEventListener("DOMContentLoaded", function() {
const menu = document.getElementById("menu");</p>
<p> // 애니메이션 실행 여부 확인
if (!localStorage.getItem("menuAnimationPlayed")) {
setTimeout(function() {
if (menu) {
menu.classList.add("show");
}
// 애니메이션 실행 상태 저장
localStorage.setItem("menuAnimationPlayed", "true");
}, 5000);
} else {
// 이미 애니메이션 실행된 경우 바로 표시
if (menu) {
menu.classList.add("show");
}
}
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
미니님a
Expert
11개월 전
</p>
<p>document.addEventListener("DOMContentLoaded", function() {
const menu = document.getElementById("menu");
// 쿠키를 사용하여 애니메이션 상태 확인
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = `expires=${date.toUTCString()}`;
document.cookie = `${name}=${value};${expires};path=/`;
}
// 애니메이션이 한 번도 실행되지 않았다면
if (!getCookie('menuAnimationPlayed')) {
// 초기 상태에서 메뉴 숨기기
menu.classList.remove('show');
setTimeout(function() {
if (menu) {
menu.classList.add("show");
}
// 쿠키를 사용해 애니메이션 실행 상태 저장 (7일 동안 유효)
setCookie('menuAnimationPlayed', 'true', 7);
}, 5000);
} else {
// 이미 애니메이션이 실행된 경우 즉시 보이기
if (menu) {
menu.classList.add("show");
}
}
});</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
W
Winter0
11개월 전
닷홈 문제인지 이상하게 안됐지만 그래도 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
11개월 전
. . . "애니메이션의 반복 실행"이 불편하시면 ~ 반 영구 제명
※ 쿠키보다는 로컬스토리지를 사용하세요. - 스타일은 동일
</p>
<p> document.addEventListener("DOMContentLoaded", function() {</p>
<p> const menu = document.getElementById("menu");</p>
<p> </p>
<p> if (!localStorage.getItem("menuAnimationPlayed")) {</p>
<p> // 첫 로드에서 5초 지연 후 애니메이션 실행</p>
<p> setTimeout(function () {</p>
<p> if (menu) {</p>
<p> menu.classList.add("show");</p>
<p> }</p>
<p> // 상태를 LocalStorage에 저장</p>
<p> localStorage.setItem("menuAnimationPlayed", "true");</p>
<p> }, 5000);</p>
<p> } else {</p>
<p> // 이미 애니메이션이 실행된 경우 즉시 보이도록 설정</p>
<p> if (menu) {</p>
<p> menu.style.visibility = "visible";</p>
<p> menu.style.opacity = "1";</p>
<p> }</p>
<p> }</p>
<p> });</p>
<p>
※ 애니메이션이 필요하다고 판단해서 만드셨지만,
사용자가 애니메이션으로 인해 불편함을 느낄 가능성을 고려하시나 보군요.
특정 상황에서는 애니메이션의 반복 실행을 막기 위해 이런 코드가 필요할 수는 있습니다.
> 간극을 조절할 수 있는, '미니님a'님의 코드를 사용하실 것을 추천합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
W
Winter0
11개월 전
닷홈 문제인지 이상하게 안됐지만 그래도 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인