목록웹프로그램밍 자료실/JAVA 자료 (801)

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

[해피CGI][cgimall] 3D 타이포를 쉽게 ztext.js

3D 타이포를 쉽게 만들어 주는 js 입니다. 용량도 3.8kb 로 작은 용량입니다. js 를 추가하고, data-z-xxxx 옵션들로 옵션을 조절 하면 됩니다. https://bennettfeely.com/ztext/#options 옵션 페이지를 위의 링크에서 확인 가능합니다. 각 옵션마다 샘플 코드를 바로 볼수 있어, 적용을 쉽게 할 수 있습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 9. 5. 10:00
[해피CGI][cgimall] Satisfying curly cursor (3kb of vanilla JS on canvas)

자바스크립트를 사용하여 마우스를 따라 선이 생기는 효과를 만들어 볼 수 있습니다. 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: ...
웹프로그램밍 자료실/JAVA 자료 2023. 9. 4. 09:36
[해피CGI][cgimall] Minimal Quiz/Survey Form Builder - jQuery AskedPlugin

AskedPlugin은 설문 조사, 설문 조사, 설문지 및 퀴즈에 대한 양식을 동적으로 생성할 수 있는 사용하기 쉬운 jQuery 플러그인입니다. 최신 Bootstrap 프레임워크와 완벽하게 호환되며 라디오 버튼, 텍스트, 입력 필드, 텍스트 영역 및 확인란의 다섯 가지 질문 유형 중에서 선택할 수 있습니다. 다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. json 데이터를 기반으로 위 와 같이 설문조사를 하는 화면을 만들어줍니다. js/asked-config.js 파일을 열어보면, 질문지와 선택지에 대한 데이터포맷을 확인할 수 있습니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 8. 29. 09:07
[해피CGI][cgimall] Minimal Accessible Responsive Table Plugin - jQuery Easy Table A11Y

Easy Table A11Y는 모바일 및 태블릿 장치와 같은 작은 화면에서 테이블 보기 경험을 향상시키도록 설계된 최소한(~1kb 축소), 액세스 가능, 반응형 테이블 jQuery 플러그인입니다. 작은 화면에서 볼 때 다중 열 테이블을 간결한 2열 형식으로 변환하여 정보를 손상시키지 않으면서 가독성을 향상시키는 방식으로 작동합니다. 다운로드 받은 파일의 압축을 해제한 뒤, dist/demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면이 크면 위 그림의 표처럼 표시가 되다가, 화면의 크기가 줄어들면, 아래 그림 처럼 표의 모양이 변경됩니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 8. 22. 09:18
[해피CGI][cgimall] Apply Gradients To Heading Elements - jGradHeading

jGradHeading은 CSS 선형 그라디언트 기능을 사용하여 지정한 두 색상 사이의 점진적 전환으로 제목 요소(h1~h6)를 채색하는 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 텍스트를 이용해서 그라디언트 효과를 줄수 있는 플러그인입니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 7. 28. 09:25
[해피CGI][cgimall] swiperjs - 다양한 이미지 슬라이드 효과

다양한 이미지 슬라이드 효과를 제공하는 Swiperjs 입니다. https://swiperjs.com/demos 페이지를 통해 제공되는 이미지 슬라이드를 확인이 가능 합니다. 사용 방법은 https://swiperjs.com/get-started 페이지를 참고 하시면 되겠습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 7. 27. 09:25
[해피CGI][cgimall] wowjs - 화면 스크롤 애니메이션 효과 스크립트

화면 스크롤을 할 때 콘텐츠가 애니메이션 효과를 통해 노출이 되도록 구현 할 수 있는 WOWjs 스크립트입니다. 소스의 사용법 및 다운로드는 아래 페이지에서 확인을 할 수 있습니다. https://github.com/graingert/wow https://wowjs.uk/docs.html
웹프로그램밍 자료실/JAVA 자료 2023. 7. 24. 09:07
[해피CGI][cgimall] Generate SVG-based Arrows Between Elements - jQuery arrows.js

다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 각각의 노드들을 마우스로 드래그가 가능합니다. 화살표가 드래그가 되고, 방향을 변경할 수 있었으면 활용할 곳이 더 많지 않았을까 싶네요. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 7. 20. 09:16
[해피CGI][cgimall] Radio 버튼 클릭 input text 값 전송

라디오 버튼을 클릭하면 값을 인풋창으로 넘겨주는 자료입니다. 압축파일내에 있는 html파일안에서 자료를 확인하실 수 있습니다. 자료의 원본출처는 아래의 링크에서 확인하실 수 있습니다. https://sir.kr/pb_tip/3723
웹프로그램밍 자료실/JAVA 자료 2023. 7. 14. 09:08
[해피CGI][cgimall] Play/Stop GIF Images Programmatically - jQuery JK GIF Player

다운로드 받은 파일의 압축을 해제 한 뒤 index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 버튼을 클릭해서 움직이는 GIF 이미지를 플레이 하거나, 스탑시킬수 있는 Jquery 플러그인 입니다. 사용 방법은 아래와 같습니다. 비교적 저용량인 GIF 이미지 파일을 이용해서 동영상을 재생/중지 시킬 수 있는 효과를 얻을 수 있겠네요.
웹프로그램밍 자료실/JAVA 자료 2023. 6. 29. 09:37
Prev 1 ··· 5 6 7 8 9 10 11 ··· 81 Next