[JavaScript] 전광판 효과 구현하기
출처① : http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
출처② : https://balancing425.tistory.com/7
CSS : http://www.dynamicdrive.com/dynamicindex2/crawler/crawler.js
■ 전광판 효과 구현(Marquee 대체)
한때 HTML이 막 유행하던 초창기에 <marquee> 태그가 들어간 싸이트는
뭔가 굉장히 화려한 사이트라고 느껴지던 때가 있었다.
지금은 완전히 묻혔지만.
프로젝트 진행중 marquee와 비슷하지만,
무한 루프처럼 끊이없이 화면에 텍스트 내용이 비춰야 하는
(<marquee> 태그사용시 해당영역에서 모든 내용이 다 사라지고 나서 출력된다.)
상황이 있었기에 필요한 코드를 찾았고 정리해 본다.
# 소스코드
<html> <head> <title>:: JavaScript 전광판 효과 ::</title> <style type="text/css"> span { margin-right:50px; } </style> <script type="text/javascript" src="./crawler.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { marqueeInit({ uniqueid : "mycrawler" , style : { "padding" : "2px" , "width" : "600px" , "height" : "30px" } , inc : 5 // 속도 , mouse : "cursor driven" // 마우스 사용여부 , moveatleast : 2 // 이동속도 , neutral : 150 , savedirection : true // false를 선언하면 마우스 커서가 위치하는 순간 역방향으로 움직인다. , random : false // 나오는 순서(기본값 : true) }); }); </script> </head> <body> <h1>■ 전광판 효과</h1> <div class="marquee" id="mycrawler"> <span>I'm defying gravity And you can't pull me down!</span> <span>이제는 나 중력을 벗어나 날아올라 날개를 펼칠거야</span> <span>They'll never bring us down!</span> <span>아무도 우릴 막지 못할 거야</span> <span>Everyone deserves the chance to fly</span> <span>그 누구라도 날아오를 자격이 있잖아!</span> </div> </select> </body> </html> |
# 출력결과
