코딩스쿨

이미지 슬라이더

텍스트 효과

텍스트 웨이브 효과

1. 데모

2. 데모 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/jquery.textwave.js"></script>
<script>
$(document).ready(function() {
    $("#text_wave").textWave({
      text:"CodingSchool.Info",
      ratio:"1.7",
      repeat:"loop",
      framerate: "120"
    });
});
</script>
<style>
#text_wave {
    background-color: #00aec9;
    font-size: 34px;
    color: #f5f3bf;
    padding: 80px 0px;
    font-weight:bold;
    text-align: center;
}
</style>
</head>
<body>
<div id="effect">
    <div id="text_wave">
        <span id="content"></span>
       </div>
</div>
</body>
</html>

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

https://www.jqueryscript.net/animation/Text-Wave-Effect-jQuery.html

기본 사용법
옵션 설정

1. 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

2. 다운로드 받은 압축 파일을 풀어서 jquery.textwave.js 파일을 작업 폴더 안에 js 폴더에 복사합니다.

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

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

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

<script>
$(document).ready(function() {
    $("#text_wave").textWave({
      text:"CodingSchool.Info",
      ratio:"1.7",
      repeat:"2",
      framerate: "120"
    });
});
</script>

$("#text_wave").textWave({
      text:"CodingSchool.Info",
      ratio:"1.7",
      repeat:"loop",
      framerate: "120"
});

- text : 애니메이션 효소를 줄 텍스트
- ratio : 확대되는 크기
- repeat : 반복 횟수, "loop" : 무한반복
- framerate : 프레임 수, 애니메이션 속도