일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 홈페이지
- 사이트제작
- #이미지
- #jQuery
- #동영상
- php
- jquery
- #해피CGI
- happycgi
- #웹솔루션
- #홈페이지
- #업종별
- #happycgi
- #홈페이지제작
- #쇼핑몰
- #뉴스
- #CSS
- 홈페이지제작
- #image
- javascript
- 웹솔루션
- CSS
- 해피CGI
- #cgimall
- #솔루션
- 해피씨지아이
- 솔루션
- 게시판
- CGIMALL
- 쇼핑몰
- Today
- Total
목록웹프로그램밍 자료실/JAVA 자료 (803)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
SVG로 구성한 특이한 JQuery 메뉴 SVG로 구성한 특이한 JQuery 메뉴로 색다른 구성시 좋아요 출력되는 방식, 배경색상, 내용 색상을 선택 사용 가능합니다.
좌측에서 나오는 메뉴 JQuery 좌측에서 나오는 메뉴 JQuery로 1차 메뉴 높이와 2차 메뉴 높이가 같습니다. 간단한 HTML 소스 코딩으로 추가 및 변경이 용이 합니다. 사이트 제작에 기본적인 메뉴 소스네요.
* Inline Menu Layout with Gallery Panel - hover 애미메이션 효과와 갤러리 컨텐츠의 미리보기 기능을 제공합니다 * License - MIT License * 사용방법 - 첨부된 압축파일을 원하는 디렉터리에 업로드후 압축을 해제합니다 적용할 html 문서안에 js,css 를 추가하여 로드합니다 메뉴에 hover 적용시 출력될 이미지와 링크태그를 삽입합니다 메뉴클릭시 하위 갤럴리식으로 출력될 코드를 추가합니다 적용된 코드를 브라우저로 확인하면 아래와 같이 출력됩니다 예제는 압축파일안에 dist/index.html 파일을 참고하시면 되겠습니다
* Horizontal Smooth Scroll Layouts - 부드러운 수평 스크롤 레이아웃을 제공합니다 * License - MIT License * 이용방법 첨부된 압축파일을 원하는 웹루트 디렉터리에 업로드후 압축을 해제합니다 적용할 html 파일에 css , js 를 로드합니다 아래와 같이 가로로 스크롤될 영역에 대한 html 코드를 추가합니다 웹페이지를 호출하면 아래와 같은 형태로 실행되어 마우스 휠스크롤시 가로로 스크롤됨을 확인할 수 있습니다
자바스크립트를 이용한 심플한 아코디언 메뉴입니다. 첨부된 파일내에 index.html 파일과 css파일에서 관련 코드를 확인하실 수 있습니다. 아래의 링크를 통해서도 확인이 가능하니 참고하세요~ https://codepen.io/SoufianeAbid/pen/eZVzBL
자바스크립트를 이용하여 나타내는 타이핑 효과 입니다. HTML에서 타이핑 될 문구를 적으면 됩니다. 캡쳐에서는 타이핑 될 문구가 4개이지만 더 추가할 수 있습니다. 무한반복 재생 됩니다
좌우 스크롤을 이용해서 타임라인을 웹페이지에 표시하는 jquery 타임라인 플러그인 입니다. 많은 기능을 내장한 다른 타임라인 플러그인과 비교하면, 비교적 가볍고, 빠른 반응을 보여줍니다. html 소스코드는 ul, li 태그를 이용해서 각각의 타임라인을 표시하기가 크게 어렵지 않게 구현이 되어 있습니다. 원하는 날짜의 타임스탬프를 계산해야하는 건 약간의 수고가 필요하겠네요. 타임라인으로 표시하는 플러그인에서 지원되는 옵션은 아래와 같습니다. 웹페이지에 타임라인을 표시해야 하는 분들께 유용할 듯 하네요.
이전, 다음 버튼 기능 슬라이더 페이징 기능 슬라이드시 이미지 텍스트에 에니메이션 효과 js 파일에서 반복, 페이징 클릭 등 옵션 조절이 가능합니다.
비메오 영상을 사이트의 백그라운드 사용하는 jQuery 플러그인 입니다. 이번 업데이트로 영상 퀄리티도 설정 가능 합니다. 단, 퀄리티 설정을 하려면 반드시 Vimeo Pro 또는 Plus 사용자만 가능합니다. 사용법 안내 입니다. # 라이브러리를 호출 하세요. # 다음과 같은 비메오 플레이어를 페이지에 삽입하세요. # 플레이어를 호출하세요. # 추가옵션도 확인하여 활용해 보세요.
ImageMapster는 HTML 이미지 맵의 영역을 활성화하므로 강조 표시하고 선택할 수 있습니다. 수동 제어, 도구 설명, 크기 조정 등을위한 다른 많은 기능이 있습니다. 모든 공통 플랫폼과 호환되도록 설계되었으며 Internet Explorer 6-10, Firefox 3.0+, Safari, Opera 및 Chrome에서 테스트되었습니다. 모바일 장치에서 작동하며 Flash를 사용하지 않습니다. 사용법 안내 입니다. 라이브러리를 호출 하세요. 본문을 구성하세요. 이미지 맵을 활성화 하세요. $('img').mapster(); 쉽게 사용하기는 어렵지만 응용하면 좋을듯 합니다. 특히 지도를 이용하여 서비스를 제공하고 싶은 분이라면 사용해 봄직한 기능입니다. 원 사이트에가면 다양한 옵션 안내와 샘플 및..