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

다양한 이미지 효과를 해당 데모페이지에서 라디오 버튼을 클릭하여 확인하실 수 있습니다. 라디오버튼 이미지 효과 밑 아래에 css코드가 노출되고 있으니 복사하여 적용하여 사용할 수 있습니다.데모링크를 클릭하면 샘플 페이지를 확인하실 수 있습니다. 익스플로러 상위버전, 크롬, 파폭등 최신 브라우저에서만 작동이되니 참고하시길 바랍니다 ^^

CSS3로 가능한 애니메이션효과를 쉽게 찾아볼수 있고, 적용도 가능한 AniCollection 사이트를 소개합니다. 사이트에 들어가보시면 위 이미지처럼 출력되며 각 부분에 마우스를 올리면 효과확인이 가능합니다. 마우스를 올리면 출력되는 눈아이콘을 클릭하면 각 효과 상세화면이 출력되며 사용된 css는 물론 HTML, JQuery 소스도 확인할 수 있습니다. 사용된 css와 HTML 소스를 그대로 html 소스에 삽입해보시면 효과가 적용되는 것을 확인하실 수 있습니다.

회전, 줌인, 줌아웃, 페이드 효과 등 다양한 효과를 심플하고 가벼운 CSS로 구현되는 애니메이션 효과 라이브러리 입니다. 예제 사이트 http://kristofferandreasen.github.io/wickedCSS/examples.html 밋밋한 사이트에 아기자기함을 더해주니, 괜찮은 CSS 애니메이션 효과네요. 사용법 http://kristofferandreasen.github.io/wickedCSS/documentation.html 관련 CSS를 다운로드 받은 후 사이트에 업로드 및 링크해주시고, 효과가 필요한 이미지에 효과별 class를 선언하면 끝... 완전 간단 하네요. 일부 효과에는 jQuery 가 필요한 경우도 있으니, 사용법을 참고해서 사용하세요.

마우스 오버시 이미지가 수평으로 회전하면서 다른 이미지를 보여줍니다. 3d 효과로 회전을 하면서 자연스럽게 다른 이미지가 보여집니다. 텍스트를 입력할 수 있습니다. 해당 사이트에서 html,css 소스를 확인 및 다운로드 할 수 있습니다.

마우스 오버를 하면 아래와 같이 이미지가 확대와 이미지가 어두워지는 효과가 있습니다. 이미지의 배율과 검은색 그림자의 투명도를 조절할수 있습니다. 해당사이트에서 소스를 확인하고 바로 수정해볼수 있습니다.

jQuery의 내장 메소드인 toggle를 확장하여 효과를 지정하여 요소를 표시하거나, 숨기는 jQuery toggle 소스입니다. blind, bounce, clip, fade 등 다양한 효과를 선택하여 이용가능합니다. 소스도 간편하고, 효과 셀렉트옵션을 선택한 후 실행하면 toggle 요소창이 선택된 효과에 따라 표시 혹은 감춰집니다.

이미지부터 템플릿, 메뉴등 웹사이트에 이용할 수 있는 다양한 퍼포먼스를 확인할 수 있으며,관련 소스를 분석하여 홈페이지내에 반영도 가능한 소스모음사이트입니다. 카테고리별로 원하시는 효과를 확인합니다 이용하는 방법은 아래와 같습니다. 1) 원하는 효과를 확인합니다. - 1585 번째 이미지 마우스 오버효과를 확인합니다. 2) 해당 소스의 html 소스를 확인합니다. - class="snip1585" 라는 css 를 이용하는것을 확인할 수 있습니다. 3) 관련 css 소스를 확인하여 최종 웹사이트에 적용할 소스 구조를 확인하여 응용/사용이 가능합니다. 이로인해 원하는 효과를 사전에 구조파악이 쉽고, 응용하여 효과를 적용할 수 있습니다.

제이쿼리와 css 를 이용한 풀스크린 책장 넘기는 효과입니다. 버튼을 클릭해서 페이지를 이동 할 수 있습니다. 좌측메뉴에 네이게이션으로 해당 페이지로 이동합니다. 해당 사이트에서 소스에 대한 설명과 다운로드를 받으실수 있습니다.

최종결과 1단계 : 포토샵으로 원하는 사진을 열어 시작합니다. 이미지를 알맞은 사이즈로 먼저 조정합니다. 2단계 : 레이어를 두번 복제합니다. 3단계 : 변환 도구 (Ctrl 키 / Cmd를 + T 또는 편집> 자유 변형)을 수평으로 기울 값이 45º로 설정을 활성화합니다. 수평으로 기울여 형태를 바꿔줍니다. 4단계 : 필터 > 픽셀 화> 모자이크 필터로 이동합니다. 입력창에 알맞은 값을 입력합니다 5단계 : 다음으로, 반대 방향으로 변환합니다. 6단계 : 상단의 레이어를 선택하여 불투명도를 50%로 설정합니다. 7단계 : 중간 레이어를 선택하여 다시 수평기울기를 -45로 설정하여 변환합니다. 8단계 : 다시 같은 모자이크 필터를 적용합니다. 9단계 : 45º 할 수있는 수평으로 기울이기 값을 설정하여 ..

버튼을 클릭하면 화면에 이펙트가 생기는 스크립트 입니다. 클릭했을때 화면에 보이는 몇가지 유형의 효과가 있지만, 스크린샷으로 저장하기는 쉽지가 않네요. 소스코드도 단순해서 버튼에 동적인 효과를 줄때 쉽게 사용이 가능할것 같네요 출처는 http://www.htmldrive.net/items/show/1846/animateClick-with-jQuery 입니다. 각 클릭했을때 어떤 효과가 생기는지는 아래의 데모를 통해서 바로 확인이 가능합니다. http://www.htmldrive.net/items/demo/1846/animateClick-with-jQuery