| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- jquery
- happycgi
- 솔루션
- CGIMALL
- #쇼핑몰
- #솔루션
- #업종별
- 해피CGI
- #뉴스
- #홈페이지
- php
- 게시판
- 홈페이지
- 쇼핑몰
- #image
- #CSS
- #해피CGI
- #웹솔루션
- #동영상
- #happycgi
- 사이트제작
- CSS
- #홈페이지제작
- #이미지
- 해피씨지아이
- javascript
- #cgimall
- #jQuery
- 웹솔루션
- 홈페이지제작
- Today
- Total
목록#타이핑효과 (3)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 텍스트 입력 및 삭제 애니메이션 - animateTyping.js
animateTyping.js는 컨테이너 요소 내에서 텍스트의 입력 및 삭제 애니메이션으로 타자기 효과를 내는 Jquery 플러그인입니다. - 라이센스 MIT - 작동 브라우저 Chrome, IE 9 이상, FireFox, Opera, Safari - 사용 방법 1. 파일 상단에 JQuery 라이브러리와 jquery.animateTyping.js 파일 링크를 걸어줍니다. 2. 객체에 animate-typing 속성을 부여하고 문구를 입력하면 플러그인이 나머지를 알아서 처리합니다. 3. 여러 줄의 문구를 입력하고 삭제하는 애니메이션을 구현하려면 간단하게 여러줄을 입력하면 됩니다. 4. data-animate-loop 속성으로 입력/삭제 애니메이션을 반복할 수 있습니다. 5. 다음과 같이 애니메이션 속도 및..
[해피CGI][cgimall] 글자 타이핑 효과를 낼 수 있는 간단한 css입니다.
css만으로 간단하게 글자 타이핑 효과를 낼 수 있는 소스입니다. 다소 조금 부자연스러운 느낌이 나기도 하지만 간단하게 글자 타이핑 효과를 내기에는 유용할 듯 합니다. 첨부된 index.html 파일을 통해 자세하게 해당 효과를 확인하실 수 있습니다. ^^
[해피CGI][cgimall] Auto Typer JS Ver1.0.1
* Auto Typer JS 애니메이션 타이핑을위한 플러그인. Chrome, Firefox, Safari, Internet Exploer 에서 사용가능 * License MIT License * 이용방법 사용법은 비교적 간단합니다 첨부된 압축파일을 다운로드하여 원하는 경로의 디렉토리에서 압축해제합니다 html 문서 상단부에 디자인에 필요한 style 파일을 호출합니다 초기문구 삽입 및 타이핑 효과가 들어갈 영역을 아래와 같이 넣어줍니다 타이핑 효과를 적용하기 위한 js 파일 호출 및 스크립트 옵션을 선업합니다 위와 같이 작성하게 되면 button 요소 클릭시 타이핑효과가 아래와 같이 진행되는것을 확인하실 수 있습니다 스크립트 정의 옵션에 해당 하는 속성의미는 아래와 같습니다 selector : 대상 요소..