Devlog 7월 8일 애니메이션
1. 학습내용
https://animate.style/
적용방법
클래스명을 html 태그에 입력만하면 바로 애니메이션 효과가 적용이됨, 별도의 추가적인 작업이 필요가없음
head에 입력해야할 내용
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>코드작동방식
1. css에 color-red라는 class를 만들고 속성을 넣음
.color-red {
color: red;
}2. 사용할 html tag에 class명 추가
<div class="animate__animated animate__shakeX animate__slow color-red">Example</div>3. 아까 처음 불러온 animate.css에 이런 여러가지 css로 만들어진 class들이 많음, 그것들을 우리는 불러와서 사용하는 것 뿐이다.
4. 코드설명
첫번째는 animate css 파일에서 존재하는 클래스를 가져온다
두번째는 애니메이션의 종류(shakeX)
세번째는 속도나 딜레이(slow)
네번째는 우리가 추가한 red class
<div class="animate__animated animate__shakeX animate__slow color-red">Example</div>https://codepen.io/
다른사람들이 만들어놓은 오픈소스 애니메이션 모음 사이트
2. 어려웠던 점
애니메이션 구동원리를 이해하는 것과 종류가 많아서 헷갈렸다.
3. 해결방법
위 두사이트를 통해 내가 만들고자 하는 애니메이션의 대략적인 구상도는 짜졌지만 아직 완벽하지는 않음. 그래서 좀더 구글링도 해보고 여러가지 실험해볼 예정
4. 학습소감
오늘 배운 사이트에 들어가서 여러가지 실험을 해봤다. 생각보다 많은 효과들이 있었고 그리고 그 뿐만아니라 코드펜에는 매우 다양한 애니메이션이 있었으며 javascript를 사용하는 것들도 많았다. 매우 흥미 깊은 공부였던것 같다.
Author And Source
이 문제에 관하여(Devlog 7월 8일 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@woosungkim0123/Devlog-7월-8일-애니메이션
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
위 두사이트를 통해 내가 만들고자 하는 애니메이션의 대략적인 구상도는 짜졌지만 아직 완벽하지는 않음. 그래서 좀더 구글링도 해보고 여러가지 실험해볼 예정
4. 학습소감
오늘 배운 사이트에 들어가서 여러가지 실험을 해봤다. 생각보다 많은 효과들이 있었고 그리고 그 뿐만아니라 코드펜에는 매우 다양한 애니메이션이 있었으며 javascript를 사용하는 것들도 많았다. 매우 흥미 깊은 공부였던것 같다.
Author And Source
이 문제에 관하여(Devlog 7월 8일 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@woosungkim0123/Devlog-7월-8일-애니메이션
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여(Devlog 7월 8일 애니메이션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@woosungkim0123/Devlog-7월-8일-애니메이션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
