[JavaScript] 전광판 효과 구현하기[JavaScript] 전광판 효과 구현하기

Posted at 2019. 12. 5. 13:51 | Posted in JavaScript & jQuery/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>




# 출력결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기