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

반응형 HTML5 플레이어 입니다. ( Youtube, Vimeo 지원 ) 예전에 plyr 에 대해서 소개해 드린적이 있는데요. ( http://happycgi.com/16211 ) 그때 안내드린 개발중인 기능들이 새롭게 추가되었네요. [ 기능 안내 ] - VVT 캡션 및 화면 판독기에 대해서 완벽히 지원 합니다. - 플레이어 디자인을 다양하게 변경 가능 합니다. - 모든 크기에 반응하는 반응형 플레이어 입니다. - HTML Video + Audio 지원 합니다. - 임베디드형 Youtube, Vimeo 지원 합니다. - 동영상에 AD 기능 삽입 가능 합니다. - 스트리밍 hls.js, Shaka 및 dash.js 스트리밍 지원 합니다. - API 제공 합니다. - Vimeo, Youtube API 를 ..

SVG로 제작된 지도이미지 파일에서 마우스를 오버하거나, 클릭시 해당 지역을 하이라이팅 시켜주는 스크립트입니다. 첨부파일의 압축을 해제하고 나오는 docs/index.html 파일을 웹브라우저로 열어보면 데모를 확인하는게 가능합니다. 데모 페이지를 열면 위와 같이 몇가지 간단한 샘플데모로 이동하는 링크가 나옵니다. The simple demo 를 클릭하면, 간단한 그림이 하나 나오고 마우스를 그림위에 올려보면 위 그림과 같이 그림 위에 특정 위치가 하이라이팅이 됩니다. a map of the world 를 클릭해보면 세계지도가 표시가 되고, 각 나라에 마우스를 올려보면 지도상에 해당 나라의 영역만큼이 하이라이팅이 됩니다. 이 데모를 위한 HTML 소스코드를 열어서 보면 세계지도인 이미지파일 위에서, 한국..

유투브에 등록된 동영상을 웹페이지 배경에서 재생이 될 수 있도록 지원하는 Jquery.mb.YTPlayer 입니다. https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html 페이지에 접속시 해당 스크립트가 구동되는 데모 화면을 확인이 가능 합니다. 첨부된 압축파일을 다운받거나 https://github.com/pupunzi/jquery.mb.YTPlayer 페이지에서 소스 다운로드가 가능 합니다. 압축을 풀어보시면 examples 폴더가 확인이 되며, 해당 소스들을 참고 하셔서 웹사이트에 추가 해주시면 됩니다. examples 폴더내에 있는 예제파일들중 소스가 간단하게 구현된 test-3.html 파일을 참고해보면 아래와 같습니다. 해당 소스는 배경에 ..

마우스휠 이벤트를 감지하거나 제어를 해야 되는 경우, 사용이 가능한 Jquery 플러그인 mousewheel.js 입니다. 첨부된 압축파일 (Ver3.1.13) 을 다운로드 받으시거나 홈페이지로 이동하여 최신버전을 다운로드 할 수 있습니다. http://plugins.jquery.com/mousewheel/ 압축파일을 풀어 보면 test 폴더가 있으며, 해당 폴더내에 접근시 샘플 소스를 확인이 가능 합니다. 샘플로 존재하는 소스를 보면 각종 영역에 대한 휠 이벤트를 감지 할 수 있는 샘플이 있으니, 해당 소스를 활용하여 필요한곳에 적용 하여 이용을 할 수 있습니다.

여러 각도에서 촬영한 상품의 이미지를 360도 회전하면서 마치 동영상을 보여주듯이 화면에 재생시키는 스크립트 입니다. 첨부된 파일의 압축을 해제하고 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 재생하기 버튼, 멈추기 버튼 막대바를 이용해서 화면에 이미지를 표시해줍니다. 샘플 파일을 다운로드 받아서 압축을 풀어보면, 360도 회전하면서 이미지를 보여주기 위해서, 아래 그림 처럼 이미지를 총 36개를 준비해둔게 확인이 됩니다. 재생하기 버튼을 클릭하면 이미지를 순차적으로 표시해주는데 사진을 보여주면서, 마치 동영상을 재생하는것 과 같은 효과가 나타나네요. 온라인으로 상품을 판매하는 쇼핑몰 사이트에서 특정 상품의 이미지를 보여줄 때 사용할만할 듯 하네요.

- 소개 원 페이지 스크롤 네비게이션 jQuery 소스입니다. 랜딩 페이지 등 원 페이지 사이트나 이벤트 페이지 제작시 유용할 것 같습니다. - 라이센스 MIT - 작업 예제 1. 섹션을 나누어 웹 페이지를 생성합니다. 2. 섹션 내용이 화면을 꽉 채우게 CSS를 추가합니다. 3. 네비게이션 버튼을 추가합니다. 각 섹션별로 입력한 ID 값을 통해 링크를 걸어줍니다. 4. CSS 스타일을 추가합니다. 5. jQuery 라이브러리를 링크해 줍니다. 6. 특별한 추가 jQuery 라이브러리 없이 jQuery 기본 함수들만으로 네비게이션이 작동할 수 있도록 코딩합니다. - 결과물

슬라이더를 이용하여 시간을 설정하는 jQuery 플로그인입니다. - 라이센스 MIT - 사용 방법 1. 사용할 페이지 상단에 jQuery 라이브러리와 CSS 링크를 걸어줍니다. 2. 사용할 페이지 상단에 durationSlider 플러그인 파일을 링크해줍니다. 3. 설정 시간을 표시할 INPUT 태그를 추가합니다. 4. 슬라이더를 표시할 DIV 레이어를 추가합니다. 5. durationslider 플러그인을 호출하여 슬라이더를 생성합니다. 6. 시간의 출력 포멧도 설정할 수 있습니다. 7. 슬라이더의 범위(최소/최대값)와 값의 변동 단위를 변경할 수 있습니다. 8. 슬라이더를 마우스 휠로 이동할지 여부도 설정할 수 있습니다. - 결과물

모바일 사이트 UI 제작을 위한 프레임워크 jquery mobile jquery mobile은 HTML5 및 CSS3의 기본지식만 있어도 손쉽게 다양한 디바이스의 반응형 UI 제작이 가능합니다. https://jquerymobile.com/ 위 사이트에 가서 최신 버전을 다운로드 및 연결해주고, http://demos.jquerymobile.com/1.4.2/transitions/ 위 사이트에 가서 원하는 타입을 찾아서 선택한 타입의 view Source를 복사 붙여넣기 하면 바로 적용이 됩니다. 확인은 크롬 모바일 버전으로 가능하겠죠... 간단하고 쉽고, 깔끔한 모바일 모바일 사이트 UI 제작용 프레임워크 jquery mobile 입니다.

쓸때마다 찾기 귀찮지만 필요한 뒤로가기, 새로고침, 앞으로 가기 자바스크립트 소스입니다. 첨부 소스 다운로드 받으시면 3가지 자바스크립트 소스가 있으며, 매번 쓸때마다 검색하는게 번거롭고 찾기 귀찮지만 필요한 소스입니다.

* jquery Sliding Panels Template - 선택된 프로젝트에 대한 내용을 슬라이드 효과로 보여주는 기능이 있습니다 * 사용방법 - HTML 구조는 정렬되지 않는 두개의 목록 , 프로젝트 미리보기 이미지의 ul.cd-projects-previews , ul.cd-projects-title nav.cd-primary-nav 로 구성됩니다 의 너비는 뷰포트 높이의 1/4에 해당하며 하위 요소의 배경이미지로 설정됩니다 높이가 뷰포트 높이와 같고 전체 뷰포트를 덮기 위해 맨위로 변환됩니다 .cd-projects > li 에서 각 목록 항목은 절대 위치, 너비와 높이가 각각 뷰포트 높이와 같으며 기본적으로 숨겨져 있습니다 HTML 문서에 적용하였을때 기본적으로 아래와 같이 코드가 삽입됩니다 cs..