본문 바로가기
반응형

분류 전체보기98

animate.css aos 에니메이션 효과주기 *****레이어팝업밑에서 위로 올라오는 css로 일반적으로 줄때#밑 (안보일때) transform: translateY(100%);#위 (보일때 - 클래스 붙음) transform: translateY(0);   1. animate.css 오직 css만으로 가능 동작은 화면 보일때 한번만https://animate.style/ Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-gui.. 2024. 7. 24.
chart.js 방사형 radar 커스텀 border dashed color 구현: 가이드라인 안쪽선은 dashed 바깥선은 solid / 안쪽선과 바깥에 외곽선 굵기다르게   # chart.js커스텀 설명 자세한 블로그 (방사형외에도 여러가지 자세하게 나와있음) https://kasumil.tistory.com/204# 3.x일때 옵션 https://stackoverflow.com/questions/63775419/changing-borderdash-for-specific-gridlines-in-radar-chart# 4.x일때 옵션 https://stackoverflow.com/questions/76055239/dashed-gridlines-in-chart-js-version-4-x -------------------------2. 핑퐁으로 흰색 회색 백그라운드 표시  -> .. 2024. 7. 23.
체크박스 전체선택 전체해제 필수값 버튼활성화 1. 전체체크박스 선택시 다른 체크박스 전체선택 / 전체선택 해제시 다른체크박스 체크해제2. 다른 체크박스 해제시 전체체크박스 해제3. 필수선택 체크박스 선택시에만 버튼 활성화 See the Pen 체크박스 전체선택 전체해제 버튼활성화 select all checkbox by uni (@agosto) on CodePen. 2024. 7. 18.
gsap scroll wide masking 스크롤되면서 백그라운드가 글자를 왼쪽에서 오른쪽으로  마스킹하기gsap +  ScrollTrigger------------------------background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;background-clip: text;See the Pen Text scroll and hover effect with GSAP and clip by uni (@agosto) on CodePen. 2024. 7. 16.
gsap text animation 효과들 //effect2 $('.text2').each(function(){   $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "$&")); });  이거는 안에서 뿌려주는거라서 클래스이름은 아무거나 적당히 만들면된다    See the Pen Text Animation with GSAP by uni (@agosto) on CodePen. 2024. 7. 15.
gsap 플러그인 https://gsap.com/docs/v3/Eases 플러그인쓴거 보면 power1.out이런게 있는데 사이트에 들어가서 체크하면 다양한 이징 효과를 볼수있다 Easing | GSAP | Docs & Learning"slow", "rough", and "expoScale" eases are not in the core - they are packaged together in an EasePack file in order to minimize file size. "CustomEase", "CustomBounce", and "CustomWiggle" are packaged independently as well (not in the core).gsap.com 2024. 7. 11.
반응형