메뉴에 페이드인 효과를 넣고 싶은데요..

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
메뉴에 페이드인 효과를 넣고 싶은데요..

QA

메뉴에 페이드인 효과를 넣고 싶은데요..

답변 2

본문

안녕하세요

메뉴에 페이드인 효과를 넣어서, 처음 사이트 들어갈 때 딱 한번만 애니메이션이 보이게 하고 싶습니다.

 

근데, 그누보드 특성상 게시판이나 게시글 클릭하면 페이지가 새로고침 되는 형태다보니 계속 애니메이션이 반복됩니다...

좀 더 정확히는, 스크립트의 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'님의 코드를 사용하실 것을 추천합니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
이전 아이콘
다음 아이콘
전체 0
로딩중
© SIRSOFT
현재 페이지 제일 처음으로