데이블 인피니트(무한) 피드 광고 자동 스크롤 하기

데이블 인피니트(무한) 피드 광고 자동 스크롤 하기

인피니트 광고를 어떻게 하면 효율적으로 보여줄 수 있을까 고민하다가 만든 기능입니다. 고정 영역에 광고를 띄우는 것까지는 어렵지 않은데 자동 스크롤이 되게 하는 건 생각을 조금 해야 합니다.

다음과 같은 무한피드 광고는 스크롤 시 컨텐츠가 계속 생기는데 사람들에게 관심 끌기는 어려울 수 있습니다.

데이블 광고 게재 방법은 이미 알고 있어야 하는 사항으로서 따로 설명하지 않겠습니다.

목차

고정 위치 광고 생성하기

고정 위치가 아니더라도 자동 스크롤 기능은 적용할 수 있지만 좀 더 효율적인 광고 효과를 위해 광고의 위치를 고정해 보겠습니다.

다음은 데이블 광고 태그 예시입니다.

//광고 스크립트

다음과 같이 css style을 적용하시면 됩니다. 클래스 명과 수치는 예시입니다. 각자 상황에 맞게 고쳐서 적용하시면 됩니다.

.dable { position: fixed; top: 100px; right: 10px; }

자동 스크롤 코드 작성

스크롤이 위 아래로 무한으로 왔다 갔다 하는 코드를 자바스크립트로 짜 보겠습니다.

먼저 돌발 상황에서 무한 재귀호출이 되어 브라우저가 먹통이 되는 일이 없도록 delay 함수를 만들어 보겠습니다. 간단하게 다음과 같이 만들어 보았습니다.

function delay(ms) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(); },ms); }); }

delay 함수를 이용하여 0.2초 간격으로 자동 스크롤 함수를 재귀 호출하는 로직을 작성해 보았습니다.

function autoScroll() { delay(200).then(function() { var $dable = $('.sidebar .dable'); var scrollHeight = $dable[0].scrollHeight; var currentPosition = $dable.scrollTop(); var innerHeight = $dable.innerHeight(); var goalPostion = scrollHeight - innerHeight; var speedWeight = 13; var speed = (scrollHeight - innerHeight - currentPosition)*speedWeight; if(Math.ceil(currentPosition + innerHeight) >= scrollHeight) { goalPostion = 0; speed = (scrollHeight - innerHeight)*speedWeight; } $dable.animate({ scrollTop: goalPostion }, speed, 'linear', autoScroll); }); }

남은 스크롤 높이에 13을 곱하여 속도를 계산했더니 적절하게 움직였습니다. 이 부분은 원하는대로 수정하시면 됩니다. 스크롤이 가장 바닥까지 내려갔다면 목표 위치를 최상단(0)으로 잡고 속도 계산 시 현재 위치를 빼면 됩니다.

이렇게 계산된 값으로 마지막에서 jQuery의 animate 메서드를 활용하여 자연스럽게 스크롤이 되게 할 수 있습니다. 스크롤 애니메이션이 끝나면 재귀 호출로 다시 값을 계산하여 무한 실행 되도록 하였습니다.

적용 결과 확인

다음과 같이 스크롤이 왔다갔다 잘 실행되는 것을 알 수 있습니다.

꼭 데이블 광고 뿐만이 아니라 여러 분야에 활용할 수 있어 보입니다.

도움이 되시길 바랍니다.

반응형

BIG

from http://sangminem.tistory.com/695 by ccl(A) rewrite - 2021-11-28 18:01:52