웹페이지
JAVASCRIPT STEP 55 - 다량의 선 애니메이션
★ 다량의 선 애니메이션 해당 선을 커서를 대면 선의 곡율 처럼 효과 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
css
웹페이지
JAVASCRIPT STEP 54 - 셀 클릭 애니메이션
★ 셀 클릭 애니메이션 셀을 클릭하였을 때, 애니메이션 처리 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 53 - 이미지 뷰어
★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 1초마다 순차적으로 이미지가 변경. 특정 버튼을 눌러 이미지를 변경한다. 자동 실행 중 특정 버튼을 누르면 타이머는 중단되고 누른 이미지가 출력된다. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 52 - 사람 애니메이션
★ 사람 애니메이션 사람을 걷게 한다. 첫번째 사람 : 그냥 걷는다. 두번째 사람 : 누르면 앞으로 간다. 세번째 사람 : 누르면 걷기 시작하고, 다시 누르면 앞으로 간다. 네번째 사람 : 왔다 갔다 걷는다. 이미지 전체 크기 : 512 x 256 / 한 장면 크기 : 128 x 128 ■ HTML 코드 걷기 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 51 - 새를 이용한 애니메이션
★ 새를 이용한 애니메이션 새를 날게 함. 이미지 전체 크기 : 800 x 140 / 한 장면 크기 : 200 x 140 ■ HTML 코드 새 날개짓 새의 속도 : 느림 보통 빠름 엄청빠름 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
웹페이지
JAVASCRIPT STEP 50 - TRANSITION 알고리즘 - 2
★ 알고리즘 5 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 6 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 7 메뉴를 구현. 선택된 메뉴에 따라 문서 배경색과 글자색을 바..
웹페이지
JAVASCRIPT STEP 49 - TRANSITION 알고리즘 - 1
★ 알고리즘 1 스크롤바 이동에 따라 배경색을 바꾸기 ■ HTML 코드 Index Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, commodi, natus ex, iste fugiat provident doloremque mollitia numquam nulla perferendis ab. Repudiandae ullam veniam sit dolor quibusdam nemo excepturi impedit. About me Lorem ipsum dolor sit amet consectetur adipisicing elit. Et eius possimus recusandae repellat labore in officia eligendi ..
웹페이지
JAVASCRIPT STEP 48 - STYLE 다양한 알고리즘 - 2
★ 알고리즘 6 보안키 입력패드를 구현 ■ HTML 코드 비밀번호 입력 사용법 숫자 4자리를 입력한다. enter를 누른다. 구현할 것 숫자 버튼을 눌러 입력한다. del 버튼을 눌러 삭제한다. 4자리 이상 입력이 되지 않는다. 정답 암호 : 0425 암호가 틀리면 붉게 변한다. 암호가 맞으면 파랗게 변한다. 3회 틀리면 작동이 불가능하다. 상단 숫자키로 입력할 수 있다. 우측 숫자키로 입력할 수 있다. 백스페이스, Delete, Enter 키로 입력할 수 있다. ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 7 고양이/강아지를 생성 후 테이블에 넣는다. 만들기 버튼을 눌러 고양이/강아지를 생성. 드래그로 이동시켜 테이블에 넣는다. 테이블에 넣어진 고양이/강아지는 더 이상 이동이 불가..
