코딩 스쿨에 오신것을 환영합니다~~

랜덤 문자 애니메이션

1. 데모

We always dreams!

2. 데모 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/descrambler.min.js"></script>
<script>
$(document).ready(function() {
    $(".scramble").scramble();
});
</script>
<style>
#effect p {
    background-color:black; 
    text-align:center; 
    font-size: 30px; 
    padding: 100px 0; 
    color:white;
}
</style>
</head>    
<body>
<div id="effect">
    <p class="scramble">We always dreams!</p>
</div>
</body>
</html>

3. 플로그인 URL(파일 다운로드)

https://www.jqueryscript.net/animation/Animate-Text-With-Random-Characters-jQuery-Descrambler.html
1. 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

2. 다운로드 받은 압축 파일을 풀어서 dist 폴더에 있는 descrambler.min.js 파일을 작업폴더 내 js 폴더에 복사합니다.

3. 플러그인을 불러옵니다.
<script src="js/descrambler.min.js"></script>

4. 데모 소스를 참고하여 HTML과 CSS를 작성합니다.

5. 제이쿼리 ready() 메소드 내에서 플러그인의 scramble() 메소드를 실행합니다.

<script>
$(document).ready(function() {
    $(".scramble").scramble();
});
</script>
$(".scramble").scramble( duration, interval, charset, uppercase );

- duration : 애니메이션 실행 시간을 의미한다. 최소 : 200, 최대 : 200000
- interval : 랜덤 문자가 바뀌는 시간 간격을 의미한다. 기본 : 20, 최소 : 5, 최대 10000
- charset : 기본 : "All", "alphabet", "punctuation", "numbers"
    . numbers: ["1","2","3","4","5","6","7","8","9","0"],
    . alphabet: ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],
    . punctuation: ["@","#","$","%","^","*","(",")","&","+","=","}","{","|",":",";",">","<","?","~"," "]