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

* jquery tiltShift.js 는 사진에 흐림,포커스 효과를 줄 수 있는 jquery plugin 입니다 * 라이센스 - GNU GPL License * 기능 - 초점 설정 - 흐림 반경에 대한 설정 - 초점영역의 양, 이미지의 날카로움 설정 - 완전한 초점과 완전한 흐림 사이의 영역의 양 설정 - 방향에 대한 설정 - 크롬 및 사파리6 CSS3 필터를 광범위하게 지원되지 않음 * 사용방법 첨부된 파일을 다운로드 하여 압축을 풀고 아래와 같은 코드를 작성한후 응용하여 원하는 형태로 작업합니다 (index.html 을 확인하시면 샘플예제가 있음) - 상단 css, js 선언부 * 아래는 이미지 호출과 함께 옵션을 설정한 부분입니다 -position : 초점의 점을 설정합니다 -blur : 흐림반경..

다양한 CSS3 효과를 한눈에보고 다양한 효과를 guthub에 공개된 소스를 이용하여 홈페이지에 반영할 수 있습니다. https://github.com/leaverou/animatable 위 링크에서 소스를 다운받으실 수 있으며 제작하는 사이트에 적용하시면 됩니다 ^^ css3를 공부하시는 분이라면 소스파악에 도움이 될듯하며 급하게 다양한 효과를 사이트에 반영하고 싶으신분에게는 좋은 자료가 될것 같습니다.

Css3를 이용하여 다양한 효과를 확인하실 수 있습니다. 단 Css3이기 때문에 구버전 ie에는 제약이 있지만. 요근래에 구버전 ie에서도 css3 효과를 동작가능하도록 제공하는 js들이 많으니 찾아서 사용해보시는 것도 좋을것 같습니다 ^^ 하지만 trasition 그리고 animation은 있는지 확실히 장담을 할 수 없습니다 ㅜㅜ http://caniuse.com/ 위 사이트에서 브라우저별로 동작하는 css속성들을 확인하실 수 있으니 확인해보시는것도 좋을것 같습니다. 기본적으로 trasition과 animaition에대한 css3 속성을 대충 한번 훌터보시고 자료를 받아서 사용하시면 쉽게 적용가능하리라 생각합니다. http://tympanus.net/codrops/2013/05/30/simple-ic..

CSS 코드로만 이루어진 hover 효과로 특정 이미지의 좌표값을 대입하여 아래와 같은 조건의 CSS 소스를 반영하시면 이미지 효과를 만들어 낼 수 있습니다. Jquery 가 아닌 CSS 만으로 두개의 분리된 이미지를 표현하고 해당 영역내에 특정단어를 만들어내는 조합을 만들수 있습니다. 위 작업을 수핸하는 워크 flow 를 아래와 같이 하셔야 합니다. 높이 300px 에 비해 넓은 300px 의 이미지를 만듭니다. 오른쪽 중간에 걸쳐 이미지를 잘라 다른 레이어에 있는 두개의 반쪽을 배치합니다. 이동할 캔버스 (hover시) 크기를 300px 정도 증가시킵니다. 캔버스 상단에 있는 사잔의 하단을 놓습니다. 위와같은 효과로 대입할 경우 아래와 같은 효과를 가진 소스를 확인하실 수 있습니다.