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

이미지에 마우스 오버시 돋보기 아이콘과 함께 이미지가 에니메이팅 효과로 줌인되어 심플하지만 주목될수있는 퍼포먼스를 보여주는 Jquery lightgallery 로 사이트의 주목할만한 컨텐츠를 제작하는데 도움이 됩니다. 특정 이미지에 마우스 오버시 에니메이션 효과로 줌인되어 심플한 UI 로 주목성을 줄수 있는 lightgallery 는 핵심이되는 .demo-gallery css 소스를 이용하여 해당 이미지 영역에 반영할 경우 위와같이 줌인되는 이미지를 확인할 수 있습니다. 핵심이 되는 위 css 소스와함께 jquery.min.js (ver 1.11.2) 를 이용하여 위와같은 class 와 script 소스를 정해주시면 작동되게 됩니다.

인풋박스(타입:파일)의 여러가지 형태의 디자인 커스터마이징입니다. 마우스 오버시 색상이 변경됩니다. 업로드하는 파일개수가 출력됩니다. 일반적인 파일명이 출력되는 형태도 있습니다. 파일업로드를 강조해야하거나 사이트의 주기능인 경우에 사용할수 있겠습니다. 해당사이트에서 소스를 다운로드 할 수 있습니다.

인기있는 최신 브라우저에서는 복사명령 메소드를 이용하여 복사가 가능하지만 그 외 브라우저에서는 플래시 기반의 접근법을 이용한 복사기능을 이용하였습니다. 해당 소스는 플래시 없이 다양한 브라우저에서 이용가능합니다. 위 소스를 이용시 태그내 텍스트를 복사할 수 있습니다. 지원브라우저는 Chrome 42+, Firefox 41+, IE 9+, and Opera 29+ 입니다.

FancyBox 소개 - FancyBox는 웹 페이지의 이미지, HTML 콘텐츠 및 멀티미디어를 별도 박스에 표시하는 도구입니다. 라이센스 - MIT, GPL License FancyBox 기능 - 이미지, HTML요소, SWF, 아이프레임, Ajax 요청 - 설정 및 CSS를 통한 사용자 정의 - 마우스 휠 플러그인이 페이지에 포함된 경우 FancyBox뿐만 아니라 마우스 휠 이벤트에 응답 - 확대된 항목 아래 그림자 추가 설치방법 - 첨부된 zip 파일을 압축을 풀고 웹루트 디렉터리에 업로드 한 다음 웹브라우저로 실행하면 다음과 같은 샘플화면을 볼 수 있습니다 작은이미지들이 많거나 갤러리 형태의 웹페이지에 적용하면 꽤 괜찮은 효과를 볼 수 있을거 같네요

alertify 소개 - 웹 브라우저에서 별도의 디자인이 된 대화상자를 역동적으로 볼 수 있습니다 라이센스 - MIT License alertify 기능 - CSS를 편집하여 작업자의 필요에 맞게 모양을 변경할 수 있음 - CONSOLE.LOG 제공 - 크로스 브라우저 및 플랫폼 사용가능 - 데스크톱, 노트북, 태블릿 또는 모바일장치 에서 사용가능 설치 및 사용방법 첨부된 압축파일을 다운받아 압축을 풀고 example 폴더에 index.html 을 웹브라우저에서 실행을 하면 예제를 볼 수 있으면 해당 html 파일을 열어보면 샘플코드도 확인가능합니다 아래와 같이 alertify 선언 및 설정을 하고 HTML의 문구와 조합하여 사용할 수 있게 됩니다

웹접근성을 고려한 탭키사용 드롭다운메뉴 css 웹접근성을 고려한 탭키사용 가능형 드롭다운메뉴 css 코드를 웹브라우저 html에디터를 통해 확인하고 이용할 수 있습니다. "Tab"키를 통해 마크업 순서대로 메뉴가 이동하여. 웹접근성 기준에 준하는 css코드입니다. 웹브라우저 에디터를 통해 HTML소스를 손쉽게 확인하고 수정하고, 복사하여 사용이 가능합니다. 드롭다운메뉴에 사용되는 각종 CSS코드 자바스크립코드까지 수정,확인,복사가 용이합니다. 수정이 가능하므로, 응용하여 더욱 다양한 디자인으로 변경하여 사용해보세요.

부드럽고 쫀득쫀득한 효과의 특이한 jquery메뉴 플러그인 입니다. Gooney 스타일의 메뉴라고 하는데 검색을 해보니 끈적하고 부드러운 이런 뜻이군요 ^^ 데모에서 메뉴를 한번 클릭해보시면 왜 저런 스타일의 메뉴인지 한번에 아실수 있습니다. 위 이미지와 같이 재미있는 형태로 메뉴들이 나타나며. 이미지는 사용하지 않고 jquery 및 css3로만 구성되어 있습니다. 데모페이지 및 상세페이지에서도 사용법을 확인하실 수 있으며 상세페이지에서 파일 다운로드시 관련 css와 jquey 데모 html 파일이 함께 첨부되어 있습니다. http://www.htmldrive.net/items/show/1836/Gooey-menu-plugin-with-jQuery 포트폴리오 또는 원페이지 형태의 이벤트 페이지를 만들때 ..

css 만으로 마우스 오버시 해당영역을 다이나믹하게 흔들수 있는 csshake 로 주요영역에 흔들거리는 효과를 주는데 유용합니다. css 소스만으로 버튼영역을 마우스 오버시 흔들거리는 효과를 줄 수 있습니다. 각 버튼 영역별로 흔들거리는 효과가 조금씩 차이가 있으며, 각 항목별로 각각의 css 소스를 다르게 사용합니다.

input, textarea, div 등 다양한 html 요소내 text 정보를 손쉽게 선택하고 선택해제할 수 있는 JQuery 소스입니다. 해당 소스 제공사이트를 보시면 선택시 필요한 javascript 함수와, 선택해제시 필요한 javascript 함수가 나누어져서 있습니다. 사이트 구성시 다양한 부분에 활용 가능합니다. ie10이상, 크롬, 사파리, 파이어폭스 등 다양한 브라우저에서 정상작동되네요.

HTML,CSS,Javascript 를 이용해서 클라우드 텍스트 형태로 출력해주는 스크립트입니다. 첨부파일을 다운로드 받아서 압축을 풀어보면 examples 라는 폴더 안에는 3가지 샘플이 있습니다. index.html 가장 기본형태의 샘플이네요. rectangular.html 둥근형태가 아니라, 사각형의 영역에 글자들을 표현하는 예제입니다. vertical_words.html 조금 특이한 형태이긴 합니다만, 각 텍스트들의 의미를 쉽게 파악이 되지는 않을것 같기도 합니다. 텍스트 단어, 글자크기(무게?) 클릭했을때 이동하는 URL조절, 마우스를 올렸을때 타이틀 정도를 조절이 가능하도록 구현되어 있으며, 단어를 추가하거나 하는 게 상당히 쉬워 보이긴 합니다. 몇가지 단어를 한글로 바꿔보니 알파벳보다는 결과..