일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 홈페이지제작
- #CSS
- #image
- #웹솔루션
- javascript
- 웹솔루션
- CSS
- #쇼핑몰
- #홈페이지제작
- #뉴스
- 홈페이지
- 해피씨지아이
- #해피CGI
- #업종별
- 쇼핑몰
- php
- happycgi
- #happycgi
- #cgimall
- 게시판
- #홈페이지
- #솔루션
- jquery
- #동영상
- 솔루션
- CGIMALL
- 해피CGI
- 사이트제작
- #이미지
- #jQuery
- Today
- Total
목록웹프로그램밍 자료실/JAVA 자료 (765)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
YT Player는 YouTube 동영상을 위한 빠르고 최소한의 동영상 플레이어 웹 앱입니다. JavaScript(jQuery)로 작성되었으며 사용자가 모달 팝업 에서 YouTube 비디오를 재생할 수 있습니다 . 입력 필드에 Youtube 비디오 URL을 입력한 다음 재생 버튼을 클릭하세요. 또한 반응형이므로 데스크톱 컴퓨터에서 휴대폰, 태블릿에 이르기까지 모든 장치에 맞게 크기가 자동으로 조정됩니다. 다운로드 받은 파일의 압축을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 유투브에서 동영상을 공유하기 위한 URL을 복사해서, 위 입력박스에 입력한뒤에 play 버튼을 눌러주면 확인이 가능합니다. 반응형이어서 창 크기에 따라서 동영상이 재생되는 모달창의 크기가 변경이 ..
모바일에서 읽을수 있는 테이블을 만드는 jquery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한뒤, demo/jquery.html, demo/vanilla-js.html 파일들을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같이 표시되던 테이블이 창의 가로크기를 모바일기기의 가로크기 만큼 줄여보면 위 그림 처럼 모바일기기의 화면에서도 데이터를 읽을수 있는 테이블로 변경이 됩니다. 사용방법은 아래와 같습니다. 데모페이지를 살펴보면, 다양한 예제의 테이블들을 볼수 있으며 각각의 예제들을 이용하기 위한 샘플 코드를 확인할 수 있습니다.
css를 이용아여 문자를 회전할 수는 있지만 각 문자를 전부 수동으로 배열하는 것은 상당히 복잡합니다. 해당 js는 이러한 작업을 자동으로 수행하는 jQuery 플러그인 입니다. 반경과 방향을 제어할 수 있습니다. 반경이 작아지면 원에 가까워 집니다. 글자를 회전하지 않게 할 수 있습니다. 해당 사이트 또는 첨부파일 다운로드를 통해 소스를 다운로드 받을수 있습니다.
상하 슬라이드 로링 되는 jquery 자바스크립트 소스입니다. jquery 소스 링크와 간단한 스크립트 소스를 통해서 상하 롤링 슬라이드 기능을 이용할 수 있습니다. 스크립트네 높이값 조절을 통해 이동하는 높이값 설정도 쉽네요. 여러모로 활용도가 높은 소스입니다.
3D 타이포를 쉽게 만들어 주는 js 입니다. 용량도 3.8kb 로 작은 용량입니다. js 를 추가하고, data-z-xxxx 옵션들로 옵션을 조절 하면 됩니다. https://bennettfeely.com/ztext/#options 옵션 페이지를 위의 링크에서 확인 가능합니다. 각 옵션마다 샘플 코드를 바로 볼수 있어, 적용을 쉽게 할 수 있습니다.
자바스크립트를 사용하여 마우스를 따라 선이 생기는 효과를 만들어 볼 수 있습니다. HTML 소스 CSS 소스 body, html { padding: 0; margin: 0; } JS 소스 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); // for intro motion let mouseMoved = false; let mouse = { x: .5 * window.innerWidth, y: .5 * window.innerHeight, tX: 0, tY: 0 } let params = { pointsNumber: 40, widthFactor: .3, mouseThreshold: .6, spring: ...
AskedPlugin은 설문 조사, 설문 조사, 설문지 및 퀴즈에 대한 양식을 동적으로 생성할 수 있는 사용하기 쉬운 jQuery 플러그인입니다. 최신 Bootstrap 프레임워크와 완벽하게 호환되며 라디오 버튼, 텍스트, 입력 필드, 텍스트 영역 및 확인란의 다섯 가지 질문 유형 중에서 선택할 수 있습니다. 다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. json 데이터를 기반으로 위 와 같이 설문조사를 하는 화면을 만들어줍니다. js/asked-config.js 파일을 열어보면, 질문지와 선택지에 대한 데이터포맷을 확인할 수 있습니다. 사용방법은 아래와 같습니다.
Easy Table A11Y는 모바일 및 태블릿 장치와 같은 작은 화면에서 테이블 보기 경험을 향상시키도록 설계된 최소한(~1kb 축소), 액세스 가능, 반응형 테이블 jQuery 플러그인입니다. 작은 화면에서 볼 때 다중 열 테이블을 간결한 2열 형식으로 변환하여 정보를 손상시키지 않으면서 가독성을 향상시키는 방식으로 작동합니다. 다운로드 받은 파일의 압축을 해제한 뒤, dist/demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면이 크면 위 그림의 표처럼 표시가 되다가, 화면의 크기가 줄어들면, 아래 그림 처럼 표의 모양이 변경됩니다. 사용방법은 아래와 같습니다.
jGradHeading은 CSS 선형 그라디언트 기능을 사용하여 지정한 두 색상 사이의 점진적 전환으로 제목 요소(h1~h6)를 채색하는 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 텍스트를 이용해서 그라디언트 효과를 줄수 있는 플러그인입니다. 사용방법은 아래와 같습니다.