gsap의 cdn을 복사하여 헤더에 붙여넣기를 해준다.
그리고 박스3개를 만들고 스타일링해준다.
box1을 작성하여 실행해본다.
x축의 300 위치까지 이동한다.
box4를 추가한 뒤 script를 작성하여 작동시켜본다.
box2는 x축의 700까지 이동하는데 360도 돌면서 이동한다.
box3은 x축의 900위치부터 시작하여 0의 위치까지 오게 된다.
box4는 x축의 500위치에서 시작하여 0의 위치로 오는데 box의 색이 주황색으로 변하게 된다.
< 실행화면 >
'IT수업 > JAVASCRIPT' 카테고리의 다른 글
| IT 수업 16주차 (86) JSP LIBRARY_THREEJS (0) | 2024.04.12 |
|---|---|
| IT 수업 16주차 (85) JSP LIBRARY_CHART (1) | 2024.04.11 |
| IT 수업 16주차 (83) JSP LIBRARY_SCROLLMAGIC (0) | 2024.04.09 |
| IT 수업 16주차 (82) JSP LIBRARY_LODASH (0) | 2024.04.09 |
| IT 수업 16주차 (81) JAVASCRIPT LIBRARY_SWIPER (0) | 2024.04.09 |