이 그림을 사용해서 좌우로 흔들리는 건배효과를 만들고싶었다.
채팅창에서 버튼을클릭하면 모든 사용자에게 보여주고 싶었기 때문!
우선 작업을 하는건 둘째치고 기본적인 베이스에서
저그림을 좌우로 흔들리게 해줘야함
처음 아이디어는 codepen.io의 제이쿼리로 만들어진 congrats효과에서 영감을 받았다.
그래서 react에서 제이쿼리를 사용할 수 있는지 찾아보다가 방법은 알아냈지만
안에들어있는 플러그인이 너무 옛날거라? 그냥 html파일에서는 사용할 수 있지만 react에 설치해서는
사용할 수가 없더라 후...!
그래서그냥, 직접만들기로했다.
https://www.w3schools.com/css/css3_animations.asp
CSS Animations
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
CSS Animations - keyframs
를 메인으로 사용했다! 별거 필요하진않았다 그냥
좌우로 까딱까닥 움직여주면 충분했음,
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
여기서 방법에 대한 영감을 얻었음!
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
animation-name: example;
animation-duration: 1s;
}
@keyframes example {
0% {transform: rotate(-5deg)}
25% {transform: rotate(-15deg)}
}
</style>
</head>
<body>
<div>
<img src="https://picsum.photos/200/300"></img>
</div>
</body>
</html>이와같은 코드에서 변형해 나갔다.
결과는 이런식으로 잘 작동했다. 클릭이벤트를주고 줌효과도 준거지만! 이건
제이쿼리효과를 준거고 실제 리액트에 적용해 채팅방에한거는 다시 글을 작성해보자
-이어서 작성한글-
'HTML,CSS' 카테고리의 다른 글
| div element center align (div 중앙정렬) (0) | 2022.02.14 |
|---|---|
| Zoom in Zoom out animation (html,css,js and React) (0) | 2022.02.14 |
| div,hr 등 border속성 (0) | 2022.02.11 |
| hr 태그 배경 및 속성변경 (0) | 2022.02.10 |
| React bootstrap customizing (0) | 2022.02.10 |
