이미지 슬라이드(좌우)
1. CSS로 구현하기
- @keyframes를 이용함
- margin-lert로 좌측 좌표를 선언하여 좌우 슬라이드를 구현
2. JavaScript로 구현하기
- 지정 시간마다 반복되는 setinterval()함수를 활용
- animate 메소드를 통해 지정 시간 마다 요소의 left 속성을 할당하여 구현
이미지 슬라이드(상하)
1. CSS로 구현하기
- @keyframes를 이용함
- margin-top으로 상단 좌표를 선언하여 상하 슬라이드를 구현
2. JavaScript로 구현하기
- 지정 시간마다 반복되는 setinterval()함수를 활용
- animate 메소드를 통해 지정 시간 마다 요소의 top 속성을 할당하여 구현
페이드인-아웃 구현하기
1. CSS로 구현하기
- @keyframes를 이용함
- opacity로 투명도를 선언하여 페이드인-아웃을 구현
2. JavaScript로 구현하기
- 지정 시간마다 호출하는 setTimout()함수를 활용
-style.display 속성을 'none', 'block'으로 할당하여 페이드인-아웃을 구현
'기타 > Remote class' 카테고리의 다른 글
[웹 표준에 맞는 HTML5 프로그래밍] 11차시 - 탭 메뉴를 통한 흐름 제어 구현하기 (0) | 2023.02.10 |
---|---|
[웹 표준에 맞는 HTML5 프로그래밍] 10차시 - UI를 통해 화면 구현하기 (0) | 2023.02.10 |
[웹 표준에 맞는 HTML5 프로그래밍] 8차시 - 화면설계 UI 해석하기 (0) | 2023.02.10 |
[웹 표준에 맞는 HTML5 프로그래밍] 7차시 - 화면설계 확인하기 (0) | 2023.02.10 |
[웹 표준에 맞는 HTML5 프로그래밍] 6차시 - 다양한 레이아웃의 구성과 기능 (0) | 2023.02.05 |