📘 오늘 배운 것
📍 애니메이션 라이브러리 사이트
사용 방법 👇
- 아래 link 태그 입력
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>- Utility classes에서 구현하고 싶은 div태그 복사해서 붙여넣기
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>-
css에서 활용하기
첫번째 클래스 ( animate__animated ) : 애니메이션 홈페이지 연결
두번째 클래스 ( animate__bounce ) : bounce 애니메이션 종류
세번째 클래스 ( animate__delay-2s ) : 애니메이션 구현하는 시간
.animate__animated { margin-top: 200px; margin-left: 200px; }
📌 오늘의 Tip
📍 다양한 애니메이션 참고 사이트
❔ 궁금했던 것
좋은 웹사이트란 어떤 것일까?
애니메이션을 잘 구현하는 것이 좋은 사이트일까?
애니메이션이 등장하게 된 이유는 무엇일까 ?
💡 해결 방법!
https://www.youtube.com/watch?v=qwYWs2X8xuA
유튜브 영상을 참고하자면, 웹사이트의 유용성에 대해 알 수 있었다.
흥미와 재미를 주어 재방문율을 높이고, 사용자 참여도를 높이는 것이 좋은 웹사이트의 요건이라 한다.
이런 점에서 애니메이션이 무궁무진하게 발전된 것 같다.
구글링을 해보면 웹디자이너가 추천하는 좋은 웹사이트 순위나 여러 자료들이 꽤나 있었다.
이를 참고해 웹사이트를 만들어보고 사용자들의 의견을 직접 들어보는 방향이 좋을 것 같다.
🌱 공부를 마무리하며,
오늘은 강의가 짧아서 알려주신 사이트에서 다양한 애니메이션 기능들을 구현해봤다.
구현하고 싶은 기능들이 많은데 웹사이트에 적용할 때 어디까지가 적당선일지 궁금했다.
사이트를 사용하는 고객 입장에서 어떤 사이트가 좋은 사이트일까 ?
code_jini