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

* Typography Motion Effect - 글자와 이미지를 버튼클릭시 애니메이션 효과를 적용하여 보여줄 수 있습니다 * License - MIT LICENSE * 사용방법 첨부된 압축파일을 해제하고 폴더와 파일확인후 적용할 웹루트 디렉터리에 업로드 합니다 적용할 html 문서에 제공된 css 및 js 를 호출합니다 텍스트 및 이미지에 대한 애니메이션 효과를 버튼으로 교차하여 보여줄수 있게 class 선언 및 보여줘야될 문자와 이미지 태그를 삽입합니다 첨부된 압축파일안에 샘플 파일이 있으며 dist/index.html 파일을 참조하여 사이트에 적용하시면 좋을것으로 생각됩니다

* Revealing Hero Effect with CSS & JavaScript 페이지가 스크롤 될 때 섹션별로 컨텐츠를 표시합니다 첨부된 압축파일을 다운로드하여 웹루트 디렉터리에 압축 해제합니다 적용한 html 문서를 열고 문서 상단에 제공되는 css 를 호출하도록 합니다 그리고 섹션별로 아래와 같이 페이지 스크롤 영역안에 들어갈 각 컨텐츠를 삽입할 수 있습니다 섹션별로 컨텐츠를 삽입할 영역을 다정한후 body 태그 위에 기본제공되는 js 파일을 아래와 같이 호출하도록 합니다 적용후 브라우저로 호출할시 아래와 같이 스크롤될때 각 섹션영역을 구분하면서 스크롤링 됨을 확인할 수 있습니다

CSS sticky position 및 Intersection Observer API 를 사용하여 스태킹 카드 효과를 구현합니다 내용을 카드인터페이스에 담아 여러장으로 구성하여 접을 수 있습니다 사용방법은 아래와 같습니다 첨부된 압축파일을 해제하여 아래와 같이 css , js 파일을 불러오도록 합니다 HTML,CSS,J 구성은 아래와 같습니다 각 item 별 내용들을 삽입할 수 있습니다 sticky css position 속성값을 사용하여 .stack-cards__item 요소에 적용할 수 있습니다 StackCards 쌓기 효과를 초기화하는데 사용할 객체를 정의 할 수 있습니다 Intersection Observer API가 지원 intersectionObserverSupported === true)되고..

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

사이트에서 제공하는 액션을 이용하여 간단히 클릭만으로 이미지를 변경 할 수 있습니다. 다운로드 받은 액션 파일은 압축을 해제후 Presets/Actions 에 압축해제를 합니다 포토샵경로는 개인 사용자의 PC에 따라 다를수도 있습니다. 설치를 완료 후 포토샵 실행후 window탭에서 액션창을 불러옵니다. 액션창의 오른족 버튼을 클릭하여 추가한 액션을 클릭하여 로드할 수 있습니다. 불러온 액션을 이용하여 간단히 버튼을 클릭하여 이미지 효과를 적용하실 수 있습니다. 이미지에따라 적용효과가 다를수 있으니 액션 또는 사이트의 영상을 확인하여 상황에 맞게 변경을 하시면 되며 cs6가 아닌 하위버전의 같은경우는 oil filter가 없어 정상 적용이 되지 않을수 있으니 참고하세요 ^^

첨부된 파일의 압축을 풀어서 demo.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 마우스를 올려보면 해당 부분이 확대되는 효과가 나타납니다. 출처는 http://www.htmldrive.net/items/show/51/Apple-like-Retina-Effect-With-jQuery 입니다.