웹솔루션개발 25년 노하우! 해피CGI의 모든것

jQuery 를 이용하여 텍스트에 애니메이션 형태의 강조 효과를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. 1. 라이브러리 호출 합니다. 2. 컨텐츠 구성 Hello, Dolly Well, hello, Dolly Hello, Dolly marker-animation class 로 강조효과를 주고 싶은 텍스트를 감싸 주세요. 3. 플러그인 실행 $('.marker-animation').markerAnimation(); npm 버젼의 경우 여러가지 옵션을 제공하지만 현재 등록된 첨부파일은 npm 버젼과는 다른 버젼임을 참고 해주세요. ( Color, thickness, duration, delay, font_weight, repeat, stripe ) npm 버젼 사용하시길 희망하시는 경우 아래의..

css 로 구현되는 마우스 오버시 메뉴 애니메이션 효과입니다.

* Freezeframe.js Freezeframe.js는 애니메이션 .gif를 일시 중지하고 마우스 오버 / 마우스 클릭 / 터치 이벤트에서 애니메이션을 적용하거나 수동으로 트리거 할 수있게 해주는 라이브러리입니다 * License MIT License * 사용방법 첨부된 압축파일을 다운로드하여 적용할 디렉터리에 압축을 해제합니다 Freezeframe 을 적용할 html 파일을 열어 js파일을 호출합니다 적용할 gif 애니메이션 파일을 img 태그로 호출하고 class 명을 지정한후 아래와 같이 스크립트를 호출하여 적용할 수 있습니다 위와 같이 적용하였을때에 이미지 클릭을 통한 애니메이션 작동여부를 확인하실 수 있겠으며 코드의 적용 샘플을 확인하실 경우 첨부된 파일중 freezeframe.js-mast..

Animista는 css 애니메이션을 쉽게 구현시킬 수 있는 사이트 입니다. 다양한 효과와 옵션을 이용하여 설정한 애니메이션들을 사이트에서 미리 볼 수 있으며 css 소스코드 또한 제공하기 때문에 유용하게 사용하실 수 있습니다. try me! 를 클릭 후 사이트를 들어가보시면 다양한 효과와 옵션들을 설정하여 미리보기를 통해 바로 확인 하실 수 있습니다. 마음에 드시는 효과를 설정하셨다면 미리보기 화면 우측 상단에 {·} 버튼을 클릭하시면 아래의 캡쳐와 같이 css소스를 확인하시고 사용하실 수 있습니다.

CSS만으로 로딩이미지를 쉽게 만들 수 있습니다. gif애니메이션의 로딩이미지를 별도로 제작할 필요 없이 CSS만으로 쉽게 사용이 가능해 간편합니다. 준비할것은 8컷의 로딩이미지가 담긴 PNG1장 입니다. 아래와 같이 html상에는 loader라는 클래스명을 지정하여 줍니다. html Loading… 그리고 나서, 아래와 같이 CSS 를 선언하여 줍니다. 아래에 infinite steps(8)값을 바꿔보면 아시겠지만, 위에서 만든 PNG1장을 8칸으로 나누어 애니메이션처럼 보여지게 한다보면 됩니다. CSS @keyframes loader { to { background-position: -800px 0; } } .loader { width: 100px; height: 100px; text-indent: ..

이벤트 발생시 Animate를 이용하여 특정 객체에 크기 변화, 애니메이션 효과,색상 변경 등을 동시에 적용할 수는 있는 소스코드입니다. - 이벤트 발생 전 - 이벤트 발생 후 - 소스코드

포커스 되었을때 Placeholder value 가 삭제되는 에니메이션 효과 입력부분에 마우스클릭 포커스 하시면 입력되어 있는 Placeholder value 값이 우측부터 촤측으로 삭제가 되는 애니메이션입니다. 사이트에서 위의 Placeholdem.js 를 클릭하시면 해당 스크립트 소스를 확인 할수 있습니다.