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

긴 글에 더보기 로 줄여주고, 더 보고 싶다면 해당 링크를 클릭하여글 내용 전부를 펼쳐주고, 하단에 Close 버튼으로 다시 닫도록도 해주는 js 입니다.Read More 와 Close 모두 변경이 가능하며여러 옵션이 제공 됩니다. 위 js 를 선언해주면 이제 사용 하면 됩니다.new Readmore('article', { speed: 75, moreLink: '더보기', lessLink: '닫기'}); article 태그에 걸어주고 싶다면, 스피드 75 에, 하단 더보기 버튼 더보기 버튼을 눌러 모두 펼쳐지고 난 후 하단에 닫기 버튼이렇게 추가할 수 있습니다. 여러 옵션이 있으니 참고 하시면 되겠습니다.

위처럼 심플한 노티 알람을 작동하게 하는 Oh Snap! js 입니다.사용 방법 역시 간단한데,사용 하기 앞서 설치 방법 역시 js 를 선언하고 id 가 ohsnap 인 div 를 하나 만들어 주시면 됩니다.ohSnap('Oh Snap! I cannot process your card...', {color: 'red'}); // alert will have class 'alert-color'ohSnap('Yeeaahh! You are now registered.', {'duration':'2000'}); // 2 seconds그리고 위 처럼 js 를 사용하면 됩니다. 색상과 시간 등을 주시면 됩니다.샘플한 노티 알람이 필요하다면, 해당 js 도 고려해 보시기 바랍니다.

이제는 비디오도 WebGL 을 써서 전환효과를 줄 수 있습니다. Curtains.js와 셰이더를 활용한 몇 가지 실험적인 비디오 전환을 소개합니다. 라이센스 : MIT압축 파일을 해제하시면 index.html 파일 종류가 여러개 있습니다. 하지만 이건 브라우저에 바로 사용할 수 없습니다. 이유는 ES6 관련 문제로 확인되었습니다. 그래서 압축된 파일에 test.html 과 js/app_test.js 를 추가 업로드 해 두었습니다. 해당 파일로 실행하시면 문제 없이 작동됩니다. 다시 한번 실행해 봐도 영상이 멈추고 이팩트가 나타나는 건가 싶었지만 영상이 재생되면서 이팩트가 효과가 보입니다. 다시 봐도 놀랍습니다.

SpaceTime 플로그인은 시간대, 날짜를 변경할 수 있습니다. 사람들은 쉽게 수학을 할 수 있지만 날짜 계산은 할 수 없다는게 이상하지 않나요?- 올해가 끝나기까지 며칠 남았나요?- 11시간 전은 몇 시였나요?- 프랑스에서 지금 점심시간인가요? 이런 것들을 우리는 보통 구글에 검색해서 알아내야 합니다. 라이센스는 Apache License, Version 2.0 입니다. 압축을 해제하시면 index.html 파일을 만들어 두었습니다. 샘플 파일에는 아래와 같은 기능으로 구성해 두었습니다.1. 여러 지역의 현재 시간을 볼 수 있습니다. 2. 특정 시간대의 나라별 시간을 확인할 수 있습니다. 3. 날짜 계산

커스텀 체크박스 입니다.클릭시 에니메이션 효과와 함께 변경됩니다.html 소스입니다.svg 소스를 사용하지 않고 사각형 보더를 기울인후 가려지게 해서 체크모양을 구현하였습니다.클릭시 회전을 하게 됩니다.

해당 사이트에서 버튼을 클릭하시면 유용한 효과들을 확인할 수 있습니다.일부 css 소스입니다.js 소스입니다.해당 사이트 또는 첨부파일을 다운로드 하면 전체 css 소스를 확인할 수 있습니다.

좌우 버튼 클릭 시 이미지 카드가 부드럽게 순환되는 슬라이더.두 번째 카드에만 제목과 설명이 표시되며 자연스러운 전환 효과가 특징임.HTML, CSS, JavaScript로 구성된 간단한 순환형 이미지 슬라이더입니다. 버튼 클릭 시 첫 번째 카드는 뒤로, 마지막 카드는 앞으로 이동하며 자연스럽게 순환됩니다.중앙의 카드에는 제목, 설명, 버튼이 애니메이션 효과로 표시됩니다.가볍고 확장성이 좋아 포트폴리오, 여행, 제품 소개 등에 활용하기 적합합니다.HTML 구조 class="item" style=" background-image: url('https://images.unsplash.com/photo-14787603291..

- 소개TailwindCSS 태그 입력 시스템은 표준 입력 필드를 부드러운 애니메이션과 TailwindCSS 스타일을 적용한 대화형 태그 입력으로 변환하는 가벼운 jQuery 플러그인입니다. - 라이센스MIT- 사용 방법1. 필요한 jQuery 라이브러리와 TailwindCSS를 문서에 로드합니다. 프로덕션 환경에서는 CDN 대신 TailwindCSS CLI 도구를 사용하여 TailwindCSS를 올바르게 설치하는 것이 좋습니다. CDN 버전은 사용자 지정 및 제거 기능이 없습니다.2. 문서에 TailwindCSS 태그 입력 시스템 파일을 로드합니다. 3. 문서 내 모든 표준 입력 필드에 tag-input 클래스를 추가합니다. 쉼표로 구분된 값으로 미리 채워 넣을 수도 있습니다.4. 문서가 준비되면 Ta..

- 소개작은 화면에서 넘쳐나는 탭을 토글 가능한 드롭다운 목록으로 축소하여 Bootstrap 탭 구성 요소를 완벽하게 반응형이고 모바일 친화적으로 만들어 주는 또 다른 jQuery 플러그인입니다 .- 라이센스MIT- 사용 방법1. jQuery와 Bootstrap이 모두 로드된 웹페이지에 핵심 JavaScript 파일을 가져옵니다 .2. 다음과 같이 탭과 탭 창을 만듭니다. 3. 탐색 탭에서 함수를 호출하면 플러그인이 나머지 작업을 처리합니다.- 작동 화면

AI 아바타, 음성 및 다양한 비디오를 편집 생성할수 있는 무료 AI 비디오 생성 플랫폼 Vidnoz AI 입니다.주요 핵심기능으로는AI 아바타를 선택하여 음성을 입히는 기능, 다양한 템플릿을 활요한 영상 편집 기능텍스트를 비디오로 , 이미지를 비디오로 편집하는 기능 등 AI 비디오 생성에 최적화된 기능을 제공합니다.플랜 사용료는 무료 부터 비즈니스까지 다양합니다.무료는 하루 3분이내 영상 제작 등이 제한적으로 가능하며, 플랜이 업그레이드 될수록 더욱 다양한 기능 및아바타, 템플릿 등을 이용할 수 있습니다.