Easing
공식 홈페이지
https://gsgd.co.uk/sandbox/jquery/easing/
public/lib/easing 폴더
CDN으로 진행 해봅시다
BODY
<!-- 6) easing : https://gsgd.co.uk/sandbox/jquery/easing/ cdn 으로 설치할 것 -->
<script src="/lib/easing/easing.min.js"></script>
< 간단한 예제 >
scr/assets/js/initMain.ts
// TODO : 7) Easing
$(function () {
$("#boxing").click(function () {
$("#boxing")
// .animate({css속성:값}, 지속시간, easing_효과)
// easeOutElastic 함수 : easing.js 에 라이브러리 함수가 정의되어 있음
.animate({ marginLeft: "50px" }, 1000, "easeOutElastic")
.animate({ marginTop: "50px" }, 1000, "easeOutBounce")
.animate({ marginLeft: "-150px" }, 1000, "easeOutQuad")
.animate({ marginTop: "-150px" }, 1000, "easeInOutBack")
.animate(
{ height: "100px", marginTop: "0px", width: "50px" },
1000,
"easeOutElastic"
)
.animate(
{ height: "50px", marginTop: "25px", width: "50px" },
1000,
"easeOutBounce"
)
.animate(
{ height: "50px", marginTop: "25px", width: "100px" },
1000,
"easeOutQuad"
)
.animate(
{ height: "100px", marginTop: "0px", width: "100px" },
1000,
"easeInOutBack"
);
});
});
컴포넌트
// EasingCom.tsx
import React, { useEffect } from 'react'
// 내가 만든 css
import '../assets/css/EasingCom.css';
import initMain from '../assets/js/initMain';
function EasingCom() {
useEffect(()=> {
initMain();
})
return (
<div>
<div id='boxing'>
<div id='box'></div>
</div>
</div>
)
}
export default EasingCom
css
/* EasingCom.css */
#boxing {
height: 100px;
width: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
#box {
height: 100px;
width: 100px;
background: #000;
margin: 0 auto;
}
'React > React - 외부라이브러리' 카테고리의 다른 글
외부라이브러리 - DaterangePicker (1) | 2023.10.31 |
---|---|
외부라이브러리 - Jquery-ui Calendar (0) | 2023.10.31 |
외부라이브러리 - Isotope (0) | 2023.10.30 |
외부라이브러리 - owl-carousel (0) | 2023.10.30 |
외부라이브러리 - simpleLightBox (0) | 2023.10.30 |