향상된 뉴스티커(News ticker) 기능 구현

안녕하세여 :)

요즘 날씨가 많이 덥죠.. 진짜 에어컨 없으면 못 버틸정도의 더위

요즘 또 휴가철이여서 사람들도 많이 놀러 가고 하지만 저는 회사를 출근을 했다는 점..

이건 저의 TMI였구여,

오늘은 저번에 이어서 뉴스티커 기능을 구현해볼 건데

지난번에 했던 뉴스티커부터 먼저 확인해볼까요??

기본족인 뉴스티커

https://chpofo.tistory.com/58 

기본적인 뉴스티커(News ticker) 기능 구현

 

지난번의 소스는 거의 그대로 사용하고, js부분만 수정을 해서

진짜 네이버 실시간 인기 검색어와 비슷하게 만들어봅시다.

 

---

이번 스크랩트 순서부터 정리하고 시작해봅시다.

1. 일정한 시간마다

2. #rolling 요소를 li요소의 높이만큼 위로 이동

3. #rolling 요소의 이동이 끝나면 

4. #rolling 요소에 설정했던 스타일 속성을 제거하고

5. #rolling 요소의 첫 번째 자식 요소를 #rolling 요소의 마지막으로 옮긴다.

 

2번까지는 지난 뉴스티커와 똑같은데 3~4번이 추가되면서 좀 더 향상된 뉴스티커를 만들 수 있습니다.

 

html과 css 같은 경우는 지난번과 똑같아서 생략하도록 하겠습니다.

html과 css 소스는 이전 게시물에서 확인해주세요

 

var rolling = document.getElementById("rolling");

window.setInterval( function () {

	rolling.style.transitionDuration = "400ms";
	rolling.style.marginTop = "-2em";

	window.setTimeout( function () {
                  
		rolling.removeAttribute("style");         
		rolling.appendChild(rolling.firstElementChild);
        
	}, 400);
}, 2000);

▼ 소스코드 살펴보기

1 :  프로그램에서 참조하는 요소 미리 탐색

3 : 일정 시간마다 -> window.setInterval 메서드로 타이머를 등록해서 구현

5-6 : #rolling요소를 li 요소의 높이(#container 요소의 높이)만큼 위로 이동시킨다

8-13 : #rolling 요소의 이동이 끝나면

          -> #rolling 요소는 위에서 설정한 transition 스타일 속성으로 인해 움직이게 된다.

              따라서 transition-duration 스타일 속성에 지정해놓은 시간이 지나면

              #rolling 요소의 움직임이 끝난다. 즉 400ms가 지난 다음에 다음 기능을 수행하면 된다.

10 : #rolling요소에 설정했던 스타일을 제거하고

       -> rolling.style.transitionDuration = ""; rolling.style.marginTop = "";

11 : #rolling 요소의 첫 번째 자식 요소를 #rolling요소의 마지막으로 옮긴다.

 

완성작을 보게 되면

↓↓↓

향상된 뉴스티커

이제는 네이버처럼 자연스럽게 위로 올라가면서

요소가 바뀌는 뉴스티커를 확인해볼 수가 있다.

 

여기서 추가해보면 좋은 부분은

마우스를 저 골드바 안에 넣게 되면 움직임을 멈추고,

해당 글을 읽을 수 있도록 하는 기능을 추가하게 되면

더 좋은 더 향상된 뉴스티커가 되지 않을까요??

 

더 향상된 뉴스티커를 해보시고, 어려움이 있을 경우나 정리가 필요하게 되시면

댓글 남겨주시면 한 번 더 향상된 뉴스티커를 정리해서 포스팅하겠습니다

그럼 오늘 포스팅은 여기서 마무리하도록 하겠습니다.

 

 

 

궁금하신 점이나 이해하기 어려운 부분은

댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^

 

 

 

 

 

 

댓글과 하트는 저에게 많은 힘이 됩니다 :)