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

screen to gif라는 무료 소프트웨어 프로그램을 이용하여 위 이미지처럼 간단하게 gif 화면 캡쳐를 할 수 있습니다. '홈페이지 바로가기' 링크를 통해 해당 사이트에 접속하셔서 소프트웨어를 다운로드 받으실 수 있습니다. 다운로드 후 해당 프로그램을 여셔서 '녹화' 버튼을 클릭하여 녹화를 진행 하신 후, 완료되시면 '정지' 버튼을 클릭하시면 됩니다. 녹화 종료시 편집기 화면이 나타나고 프레임을 삭제하거나 기타 효과를 넣는 등 다양한 편집이 가능합니다. ^^ ​ ​ ​ ​

파일업로드와 몇번의 클릭만으로 간단하게 애니메이션 gif파일을 만들 수 있는 사이트입니다. 사이트에 접속하셔서 상단메뉴중 두번째 메뉴인 'GIF Maker'를 클릭합니다. 1번 '파일 선택' 버튼을 클릭하여 이미지를 업로드 후, 2번 'Upload and make a GIF!' 버튼을 클릭합니다. 이미지 업로드 후 gif파일 만들기 버튼을 클릭하면 gif 파일에 대한 설정을 할 수 있습니다. Delay time 란은 이미지가 몇초만에 움직일 것인지를 설정할 수 있고 Loop count 란은 몇번 반복할 것인지를 설정할 수 있습니다. 해당 란을 비워두면 영원히 반복됩니다. 아래의 'Make a GIF!' 파일을 클릭하시면 완성된 gif 파일을 확인하실 수 있습니다. crop, resize, rotate 등..

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

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: ..

웹사이트에서 직접 아이콘을 그리고, 움직이는 gif 파일로 만들어 저장할 수 있는 서비스를 제공하는 웹사이트입니다 ※ 크롬에서만 작동합니다 ※ Piskel 사이트에 만든 이미지의 예- 아래에 사용하면서 간략한 주석설명을 달아놓았으니 참고하시기 바랍니다^^