자바스크립트 타이핑 효과 구현하기
안녕하세요! 곧 자려고 하는데, 잠들기 전에 가볍게 자바스크립트 타이핑 효과 구현하는 방법 포스팅해봅니다. 비어있는 h1 태그를 만들고, 거기에 글자가 써지는 효과를 구현해 보았습니다. 좀 더 실감나는 효과를 만들기 위해 CSS로 간단한 애니메이션 효과도 적용해봤습니다. 코드는 index.html / style.css / script.js 세 파일로 구성되어 있습니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 repl.it 웹문서에 필요한 기본적인 구조에 CSS파일(style.css)과 JS파일(script.js)을 추가해주었습니다. 표시되는 태그는 h1 하나 뿐인데, 이마저도 아무것도 쓰여있지 않습니다. 스크립트 및 스타일시트 적용을 위해 class를 "text"로 지정..
WOW.js 사용법 : 스크롤 애니메이션 라이브러리
개요 안녕하세요. 오늘은 자바스크립트 스크롤 애니메이션 라이브러리인 WOW.js의 사용법에 대해 정리해보려고 합니다. 다양한 종류의 애니메이션을 제공하는데다 사용법도 무척 간단해 개인적으로 강력 추천하는 라이브러리입니다. 그럼 바로 시작하도록 하겠습니다. 설치 WOW.js 의 메인 페이지로 이동합니다. 링크를 클릭 : wowjs.uk/ 그러면 위와 같은 페이지가 나타나는데, 여기에서 좌측 상단에 표시되는 메뉴 중 GITHUB 을 클릭합니다. 그러면 새 탭이 열리고 라이브러리를 다운로드할 수 있는 깃헙 저장소가 나타납니다. 깃헙 저장소 페이지를 보면 Code라고 적힌 초록색 버튼이 보이는데, 이를 클릭하면 박스가 하나 열립니다. 이 박스의 맨 아래에는 Download ZIP 이라는 메뉴가 있습니다. 이를 ..
[CSS] 007 효과 애니메이션 구현하기
안녕하세요! 오늘도 CSS 애니메이션 예제를 하나 만들어봤습니다. 이러한 효과를 어떻게 부르는지 정확히 알지 못해서 007효과라고 표현했는데, 구현한 효과는 다음과 같습니다. ...네! 펭귄군 캐릭터가 배경 이미지로 지정된 영역을 남색 영역이 덮고 있는 상태에서, 투명한 원이 왔다갔다 하면서 원에 해당되는 부분만 배경 이미지가 노출되게 만든 애니메이션 효과입니다. 영화 007 시리즈의 오프닝과 느낌이 비슷하여 '007 효과 애니메이션 구현하기'라 이름 붙여봤습니다(정확한 이름 아시는 분 알려주세요...). 여기에 필요한 프로그래밍 언어는 HTML과 CSS인데, 각 코드는 다음과 같이 구현하였습니다. 1 2 3 4 5 div 가 세 번 사용되었고, 각각의 class를 통해서 역할을 구분하였습니다. cont..