메뉴에 페이드인 효과를 넣고 싶은데요..
본문
안녕하세요
메뉴에 페이드인 효과를 넣어서, 처음 사이트 들어갈 때 딱 한번만 애니메이션이 보이게 하고 싶습니다.
근데, 그누보드 특성상 게시판이나 게시글 클릭하면 페이지가 새로고침 되는 형태다보니 계속 애니메이션이 반복됩니다...
좀 더 정확히는, 스크립트의 5초 지연은 한번만이 잘 적용되는데, css의 show가 반복되어요...
어떻게 하면 좋을까요..? ^^ㅠㅠ
추가 : 테마 레이아웃은 플렉스로 잡았습니다.
#menu {
visibility: hidden; /* 처음에 보이지 않음 */
opacity: 0; /* 투명도 0 */
transition: opacity 0.5s ease-in-out; /* 부드러운 페이드 효과 */
}
#menu.show {
visibility: visible; /* 보이게 설정 */
opacity: 1; /* 투명도 100% */
}
document.addEventListener("DOMContentLoaded", function() {
const menu = document.getElementById("menu");
// 애니메이션 실행 여부 확인
if (!localStorage.getItem("menuAnimationPlayed")) {
setTimeout(function() {
if (menu) {
menu.classList.add("show");
}
// 애니메이션 실행 상태 저장
localStorage.setItem("menuAnimationPlayed", "true");
}, 5000);
} else {
// 이미 애니메이션 실행된 경우 바로 표시
if (menu) {
menu.classList.add("show");
}
}
});
답변 2
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");
}
}
});
. . . "애니메이션의 반복 실행"이 불편하시면 ~ 반 영구 제명
※ 쿠키보다는 로컬스토리지를 사용하세요. - 스타일은 동일
document.addEventListener("DOMContentLoaded", function() {
const menu = document.getElementById("menu");
if (!localStorage.getItem("menuAnimationPlayed")) {
// 첫 로드에서 5초 지연 후 애니메이션 실행
setTimeout(function () {
if (menu) {
menu.classList.add("show");
}
// 상태를 LocalStorage에 저장
localStorage.setItem("menuAnimationPlayed", "true");
}, 5000);
} else {
// 이미 애니메이션이 실행된 경우 즉시 보이도록 설정
if (menu) {
menu.style.visibility = "visible";
menu.style.opacity = "1";
}
}
});
※ 애니메이션이 필요하다고 판단해서 만드셨지만,
사용자가 애니메이션으로 인해 불편함을 느낄 가능성을 고려하시나 보군요.
특정 상황에서는 애니메이션의 반복 실행을 막기 위해 이런 코드가 필요할 수는 있습니다.
> 간극을 조절할 수 있는, '미니님a'님의 코드를 사용하실 것을 추천합니다.
답변을 작성하시기 전에 로그인 해주세요.