728x90
반응형
이 것의 주제는 무엇인가
나도 알 수 없다
해리포터 신문지 보고 문득 움직이는 신문지를 만들고싶어져서 시도해봤다.
HARRY POTTER 부분은 SVG로, UNDESIRABLE은 Splitting.js로, No.1 부분은 이미지로 마크업해 각각 애니메이션을 주었다.
신문지에 마우스를 오버하면 타이틀에 matrix3D transformation이 일어남
Splitting.js는 Codepen의 Shaw라는 분의 코드를 활용했다.
이미지는 그냥 늘어지다가 사라지며, 바디 배경이 바뀌고 커서에 해리포터 이미지 url을 넣었다.
정말 이것저것 해본 잡스러운 애니메이팅 연습ㅋㅋㅋㅋㅋ
728x90
반응형
'Front-end' 카테고리의 다른 글
| [HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션 (0) | 2023.02.16 |
|---|---|
| [HTML/SCSS] CSS로 ON&OFF 온/오프 스위치 만들기 (input 체크박스) (0) | 2023.02.07 |
| [HTML/jQuery] input에 포커스 되면 value 지우기 (0) | 2023.01.19 |
| [HTML/CSS] :has() selector를 활용한 투명 카드 CSS (0) | 2023.01.11 |
| [HTML/jQuery] Input[type="text"]에 숫자만 입력하기 (0) | 2023.01.02 |
