페이지에 들어가면 텍스트가
왼쪽으로 들어가고, 오른쪽으로 다시나오며 돌아갑니다.
텍스트를 누르면 멈추도록 했습니다.
마치 LED 전광판 같기도 한 효과입니다.
그라데이션 색상을 즉석에서 뽑았는데 예쁘네요
<!DOCTYPE html>
<html>
<head><title>무한회전 텍스트</title>
<style>
#text {
background: #c9ace2;
background: -moz-linear-gradient(top, #c9ace2 0%, #bdefec 47%, #bdefec 47%, #fcf4b5 95%);
background: -webkit-linear-gradient(top, #c9ace2 0%,#bdefec 47%,#bdefec 47%,#fcf4b5 95%);
background: linear-gradient(to bottom, #c9ace2 0%,#bdefec 47%,#bdefec 47%,#fcf4b5 95%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9ace2', endColorstr='#fcf4b5',GradientType=0 );
}
/*style="background-color:"*/
</style>
</head>
<body>
<hr>
<span id ="text" > Welcome! Khookie-Lab </span>
<script>
var s = document.getElementById("text");
var timer = setInterval("rotate()", 300); //0.3초 간격
s.onclick = function (e) { clearInterval(timer);} //클릭시 정지
function rotate() {
var str = s.innerHTML ;
var firstChar = str.substr(0, 1);
var remains = str.substr(1, str.length-1);
str = remains + firstChar;
s.innerHTML= str;
}
</script>
</body>
</html>'프론트엔드 > Java Script' 카테고리의 다른 글
| Swiper 라이브러리를 사용하여 js 스와이프 구현하기 (0) | 2022.04.20 |
|---|---|
| 웹 개발환경 오류 노트 : (0) | 2021.06.19 |
| javaScript 태그 갯수 세기 getElementsByTagName 함수 사용 (0) | 2020.11.29 |
| 자바스크립트 : 타자효과 타이핑 텍스트 출력 (0) | 2020.11.13 |
| JavaScript : 문자열 모든 공백 제거하기 (0) | 2020.11.09 |
댓글