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

css를 이용한 사각형태의 정형화된 마우스 오버효과가 아닌 다른 느낌의 마우스 오버효과 css를 이용하여, 대각선의 hover 효과를 만들어주며, 마우스 오버시 위아래로 효과가 적용됩니다. 새로운 마우스 오버 효과로 사이트에 포인트를 줄 수 있네요. ​ ​ ​ ​

모바일용 이미지 슬라이드 Custom scroll slider로 슬라이더바를 이용한 이동, 터치를 이용한 이동이 가능합니다. html, css, js를 이용하여 구성 및 이용이 가능하며, js내 옵션 변경을 통해서 간격 너비, 속도 제어등이 가능합니다. 또한 html 소스를 개수도 자유롭게 늘릴 수 있습니다.

BOOTSTRAP 을 이용한 아날로그 시계를 웹 페이지에 보여주는 플로그인을 소개 합니다. 라이센스는 MIT 라이센스 입니다. 특이사항은 Time Zone 셋팅이 가능 하구요. 7개의 시계 스타일을 제공 합니다. 사용법 안내 합니다. 1. 라이브러리 호출 하세요. 2. 시계가 출력될 컨테이너를 선언하세요. 3. 컨테이너에 시계를 생성하는 스크립트를 호출 합니다. 정상 작동하면 아래의 이미지 처럼 출력 됩니다. ^^ 타임존 셋팅 외에는 시계의 크기 등을 변경하려면 css 를 수정해야 한다는게 안타깝네요. 제공되는 옵션은 대부분 색상에 대한 옵션입니다. 타임존 셋팅값은 혹시나 필요하실까 생각되어 첨부 합니다. (타임존이 너무 많아요 ^^ ) Europe/Andorra, Asia/Dubai, Asia/Kabu..

아날로그 시계를 웹 페이지에 보여주는 플러그인을 소개 합니다. 라이센스는 MIT 라이센스 입니다. 사용법에 대해서 안내 합니다. 1. 라이브러리를 호출 하세요. 2. 시계 위치를 잡기 위해 css 를 추가해 주세요. 3. 시계를 출력할 컨테이너를 선언하세요. 4.컨테이너에 시계를 생성하는 스크립트를 호출 합니다. 정상 작동하게 되면 아래의 이미지 처럼 출력 됩니다. 스크립트로 시계 함수에 전달 가능한 옵션에 대해서 설명 합니다. szie : 시계의 크기 설정 x : 시계의 x축 시작 좌표 y : 시계의 y축 시작 좌표 x, y 값 설정시 주의사항은 시계의 중심점을 기준으로 좌표를 설정해야 합니다. 즉, x값 0, y값 0 으로 설정하신 후 원하시는 좌표 값을 설정하시면 됩니다.

다운로드 받은 파일의 압축을 해제한후 easy_slides.test.html 파일을 웹브라우져로 열어보면 샘플 확인이 가능합니다. 총 4가지의 이미지 슬라이더 유형을 지원합니다. 1. One Big Picture 2. Circle 3. 4 in line 4. Clock 장점으로는 HTML태그가 간단하게 구성되어 있습니다. 슬라이더를 작동시키는데 있어서 지정할수 있는 전체 옵션은 이며, 자바스크립트 코드 역시 사용하기에는 많이 어렵지 않게 작성되어 있네요. ​ ​ ​

sign in을 누를시 슬라이드 형태의 로그인창으로 각 버튼을 누를때 슬라이딩 효과와 함께 폼이 나타나게 됩니다. sign up을 누를시 데모사이트를 누르시면 html/css/js 모두 있음으로 소스를 참고하여 다른 결과물을 만들어내기도 좋은 소스 같습니다.

* Slide Out Box Menu 각 섹션별로 원하는 페이지를 슬라이드 하여 보여주는 기능을 가진 플러그인입니다 첨부된 압축파일을 다운받아 적용하고자하는 웹루트 디렉터리에 압축을 해제합니다 기본제공되는 css 파일을 문서상단에 호출합니다 아래와 같이 각 섹션페이지 별로 슬라이드해줄 컨텐츠를 삽입합니다 detail 레이어 부분 코드 body 태그 위에 제공되는 js 파일을 삽입합니다 위와 같이 적용하였을때 슬라이드 페이지 및 레이어로 정보를 노출하고 싶은 부분을 보여줄 수 있습니다 첨부된 압축파일에 제공되는 샘플파일들을 참고 및 응용하여 작업하면 도움이 될것 같습니다

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

검색버튼을 클릭하면 입력부분이 확장되고 입력후 클릭하면 검색됩니다. 입력값이 없는 상황에서는 검색버튼을 클릭하면 다시 닫힙니다. 입력부분 외부를 클릭하면 닫힙니다. css와 JavaScript를 이용하여 구현되어 있습니다. 해당사이트에서 소스 다운로드 및 설명을 확인할 수 있습니다. ​ ​ ​

우측 상단의 검색 클릭시 전체화면을 오버레이하는 레이어 검색창이 출력됩니다. 검색창 출력시 에니메이션 효과로 자연스럽게 전환이 됩니다. 해당 사이트에서 소스 다운로드 및 설명을 확인할 수 있습니다.