반응형

IT/CSS

[css] easing 의 종류 및 사용방법

easing이란? - 애니메이션 을 자연스럽게 만든다. - 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피해야함 (사용자에게 갑갑한 느낌을 줄수 있음) 키워드 - ease : 시작과 종료를 부드럽게 - linear : 일정 - ease-in : 서서히 시작 - ease-out : 서서히 종료 - ease-in-out : 서서히 시작하여 서서히 종료 - cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정 - easeInQuad - easeOutQuad - easeInOutQuad - easeInCubic - easeOutCubic - easeInOutCubic - easeInQuart - ease..

2020.01.23 게시됨

IT/JavaScript

::스크롤시 애니메이션효과 라이브러리::AOS. js

AOS(Animate On Scroll Library) 페이지 스크롤을 했을 때 페이드, 회전 확대 등의 다양한 에니메이션 효과를 구현 한 라이브러리 ※ IE9 지원안함 ※ https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io //헤드에 아래코드 추가 //사용할 태그에 data-aos 추가/attribute="애니메이션 이름" //첫번째 방법 AOS //두번째 방법 AOS

2020.01.06 게시됨

IT/JavaScript

[javascript] a태그 선택시 특정위치로 부드럽게 가기

● href에 id를 지정하여 jquery의 animate함수와 offset()함수를 이용하여 그위치로 이동합니다. ● offset()함수는 범위를 지정할 때 자주 사용하는 함수입니다.(특정이름으로 지정, 아이디를 가진 요소의 위치값) ● this.hash를 사용하여 유효한 id값을 반환합니다. ​ ● offset() 사용방법 // 상단을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환 a.offset().top; // 좌측을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환 a.offset().left; // 절대좌표를 기준으로 위에서 200px에 해당하는 좌표로 이동시킴 a.offset({top: 200}); // 절대좌표를 기준으로 좌측에서 200px에 해당하는 좌표로 이동시킴 a...

2019.12.11 게시됨

IT/JavaScript

[javascript] modal 창으로 팝업띄우기

모달과 모달리스의 차이는 모달외의 화면창이 클릭이 되냐 안되냐의 차이이다. ​ ▶ HTML 검색 × 상세검색 ▶ CSS /* modal */ .modal {display: none;position: fixed;z-index: 99999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);} .modal-cnt {background-color: #fefefe;margin: 10% auto;border: 1px solid #888;width: 50%;height: 498px;border-radius: 5px;} .modal_close {color: #..

2019.12.11 게시됨

반응형