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

심플하고 가변운 슬라이딩 네비게이션 메뉴 sliiide 입니다. 왼쪽, 오른쪽, 상단, 하단 4가지 방향으로 구현 되어 있습니다. http://ahmedrad.github.io/sliiide/ 페이지 접속으로 4가지 방향의 네비게이션 메뉴 실행 구동 화면을 확인이 가능 합니다. 원하는 방향을 선택하고 왼쪽 상단 전체메뉴보기를 클릭하여 확인을 하실수가 있습니다. https://github.com/ahmedrad/sliiide 페이지에서 최신버전의 소스를 다운로드가 가능 합니다.

Jssor 슬라이더는 다양한 모션과 함께 슬라이드 되는 기능을 제공하는 script 입니다. https://www.jssor.com/ 페이지에 접속시 다양하게 구현되어 있는 데모 슬라이더들을 확인이 가능 합니다. 최신버전의 슬라이더 소스는 https://github.com/jssor/slider 에서 다운르도를 할 수 있습니다. 이 스크립트는 특이하게도 편집툴을 제공하고 있는데 이 툴을 이용해서 소스를 편집 할 수 없는분들도 어느정도 이용을 할 수 있겠습니다. https://www.jssor.com/demos/new.slider/=edit

이번에 소개해 드릴 자료는 에디터 입니다. ^^ ( WYSIWYG Rich Text Editor with HTML5 & jQuery ) 라이센스는 MIT 입니다. 주요특징 - 반응형 인터페이스 - 명령에 대한 글꼴 굉장 아이콘. - 기본 텍스트 서식 일반, 굵게, 기울임꼴, 클릭 시 밑줄. - 선택한 텍스트 나열 및 연결. - 텍스트 선택 시 텍스트 서식 메뉴와 같은 Microsoft Office를 표시합니다. 반응형 인터페이스라고 해서 모바일에서도 사용해 봤는데요. 모바일에서 간단한 텍스트 편집기로 사용하기에는 괜찮은 것 같습니다. 설치 방법 1. 소스 다운로드를 클릭하여 압축을 해제 한다. 2. 폴더에 접근하면 index.html 파일을 브라우저에 호출한다. 그 다음 사용해 보시면 됩니다. 세부적인 ..

JavaScript 와 CSS 를 이용하여 디지털 시계를 멋지게 연출했네요. 사용방법은 매우 간단 합니다. 1. 스타일을 사용해야 합니다. 2. 콘테이너를 선언해 주세요. 3. 실행 스크립트를 호출하세요. 위처럼 하시면 아래와 같은 디지털 시계가 짠하고 나옵니다. 그런데 한가지 단점이 발견 되는데요. 1 이라는 숫자에 대한 자리수 처리가 미흡하네요. 만약 11시 11분 11초 라면 아래와 같이 나와 버립니다. 본 프리웨어에서 사용한 폰트는 digital-7 폰트입니다. 해당 폰트는 개인이 사용할 경우 무료이며 상업적으로 사용할 경우 유료 입니다. ^^

쇼핑몰 상품의 마우스 줌인효과로 많이 쓰는 마우스 줌인 효과 JQuery 소스입니다. 줌인에 대한 이미지 세트를 간단하게 첨부할 수 있으며, 쇼핑몰, 제품 소개 등 다양한 곳에 활용이 가능합니다.

다운로드 받은 파일의 압축을 해제한후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지에서 미리 준비된 항목을 선택하기 위해서 사용하는 셀렉트박스나, 라디오버튼, 체크박스 같은 입력폼을 이미지들로 이용할 수 있는 jQuery 플러그인입니다. 체크박스를 이용해서 여러개의 옵션중 하나만 선택이 가능한 모드(셀렉트박스, 라디오버튼과 같은 식)와, 여러개를 선택이 가능한 모드로 조절이 가능합니다. 화면에 선택할 수 있는 이미지들을 배치하고, 무엇을 선택했는지 표시하는 부분을 위해서는 아래의 과정이 필요합니다. 4번 과정은 화면에 표시되는 이미지들의 모양을 위해서 필요한 CSS 입니다. 그 이후에 아래의 과정이 필요한데, 6번 과정은 이미지들을 선택했을때 생기는 효과(콜백) 이다 보니,..

* jquery animation effect gallery - jQuery를 사용하여 애니메이션 효과를 포함하여 노출되는 갤러리 * 적용방법 - 적용방법은 간단합니다 첨부된 압축파일을 웹루트 디렉터리에 압축해제하여 업로드 합니다 적용할 html 문서에 아래와 같은 css 및 javascript 를 호출합니다 이미지 갤러리에 사용될 이미지 html 구성을 아래와 같이 삽입합니다 코드를 적용하여 최종 적용된 갤러리 화면은 아래와 같습니다 첨부된 파일중 index.html 파일을 참고하여 적용하면 도움이 될것 같습니다

* B&W Box Gallery - 그리드 형태의 jquery 갤러리 * 적용방법 - 첨부된 압축파일을 웹루트 디렉터리에 압축해제하여 업로드 합니다 첨부된 파일중 index.html 파일을 참고하여 적용하면 도움이 될것 같습니다 적용할 html 문서에 아래와 같은 css 및 javascript 를 호출합니다 아래와 같이 갤러리를 형성할 이미지 태그를 구성합니다 이후 하단에 아래와 같이 js 호출 및 javascript 를 선언합니다 (하단에 추가스크립트도 index.html 파일을 보고 참고하여 삽입) 코드를 적용하여 최종 적용된 갤러리 화면은 아래와 같습니다

DIV 박스를 화면에 표시하고, 드래그를 이용해서 크기조절, 회전이 가능한 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제하면 나오는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면에 표시되는 박스(DIV) 를 드래그를 이용해서 크기를 늘리거나, 회전하는 손잡이를 이용해서 박스를 회전시키거나, 박스를 끌어서 이동하는게 가능합니다. 크롬 개발자도구를 열어둔 뒤에, 박스의 크기, 위치를 변경할때와, 박스의 회전을 시켜 보면, 화면에 보이는 박스를 표현하기 위한 style(CSS) 태그의 속성들이 조절되는걸 확인해볼수 있습니다. 사용법에 대한 대략적인 설명은 유투브 링크를 슬쩍 보셔도 어렵지 않게 이해는 될것 같습니다.

배경 및 배경효과로 사용하기 좋은 particles.js를 소개합니다. 사이트 우측에 있는 설정으로 js의 옵션을 이것저것 확인하며 설정해볼 수 있습니다. [파티클 종류] 1) Default 2) NASA 3) Bubble 4) Snow 5) Nyan Cat 마음에 드는 파티클 종류를 선택하고 CodePen 버튼을 클릭하면 해당하는 소스를 바로 확인해보실 수 있습니다. ^^