일정시간 팝업 노출 간단히 구현해보자 :: 마이구미

이번 글은 "일정시간 팝업 노출" 에 대해 다뤄본다.

일단 주제를 자세히 알기 위해 아래 링크를 방문해보자.

https://www.agoda.com/ko-kr/city/fukuoka-jp.html

http://gostaygolf.com/goods/view.html?pid=67

아래 이미지 보자.

위 링크와 같이 자동으로 팝업이 나왔다가 사라지는 경우를 많이 볼 수 있다.

사실상 크게 어려운 작업이 없다.

하지만 수요가 많기에 개발능력이 미숙한 사람들이 많이 찾아올 꺼 같아서 글을 쓴다.

쉽지만 누구나 히스토리에 남길만한 주제로 괜찮다고 생각했다.

본인이 간단하게 작성한 테스트 페이지이다.

테스트 페이지

여기서 핵심적인 것은 position:fixed 속성이다.

css의 position을 사용할 때는 거의 absolute, relative를 많이 사용한다.

fixed의 특징을 보자.

• fixed 값을 갖는 객체는 relative 객체를 기준으로 삼지 않고, 웹 브라우저의 윈도우를 기준으로 합니다.
• fixed 값을 갖는 객체는 붙박이 성질을 가지고 있으므로, 스크롤해도 화면상에서 사라지지 않습니다.

위와 같은 특징을 가지고 있기에 이러한 항상 고정적인 위치를 원할 경우에 활용하기에 용이하다.

fixed 속성은 이정도만 알아도 충분하다.

그리고 css를 보면 bottom:0px 이라는 것을 확인한 후 아래 소스를 보자.

setTimeout(function() {
        $("#pop_wrap").animate({
            bottom: '-320px',
            opacity: "hide"
        });
    },2000);

setTimeout 메소드를 활용하여 2초 후에 bottom이 -320px이 되고 hide가 되어진다.

(opacity:hide는 display:none과 같다고 보면 된다.)

bottom은 사실상 효과를 주기위해 넣은 것이다. (없애도 상관없다)

0에서 -320이 됨으로써 스스륵 아래로 들어가는 듯한 효과를 낼 수 있다.

소스는 따로 올리진 않겠다.

필요하다면 테스트 페이지에 가서 소스를 끌고 가길 바란다.