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

커서에 반응하는 유리 디자인 입니다.웹 프로젝트에 세련되고 미래적인 분위기를 넣을 때 좋을 것 같습니다.자세한 내용은 데모를 참고하시기 바랍니다.HTML Glass 0.50 Chromatic 0.60 Breath 1.00 Animate Cell Scroll: change Cell • Drag: pan • Double-click: toggle wireframe Image Video Image URL id="imgUrl" type="te..

카드가 빛나는 광선을 통과하며 코드로 변하는 애니메이션입니다다양한 카드 디자인으로 변경하여 사이트에 시각적 효과를 줄 수 있습니다.자세한 내용은 데모를 참고해 주시기 바랍니다.HTML ⏸️ Pause 🔄 Reset ↔️ Direction Speed: 120 px/s Inspired by https://evervault.com/" target="_blank" rel="noopener">@evervault.com CSS@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&di..

자바스크립트로 만든 시각 효과(VFX) 기반의 페이지에서 웹폰트를 사용한 글자를 동적으로 변화시키고,레이마칭 기술로 화려한 3D 시각 효과를 표현한 디자인입니다.HTML 구조Typehere.please.CSS 소스@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap'); html, body { height: 100%; margin: 0; }body { background: black; background-image: linear-gradient( 340deg, hsl(220deg 50% 30%) 0%, hsl(200deg 30% 40%) 20%, hs..

서버 오류 페이지(500 error) 콘셉트의 타이포 애니메이션 효과입니다포트폴리오 등 소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 $  Found 1 feature ---------------------------------------------- Feature: Bottles # ./features/bottles.feature   Scenario: A bottle falls from the wall     ✓ Given 100 green bottles are standing     ✓ when 1 green bottl..

긴 글에 더보기 로 줄여주고, 더 보고 싶다면 해당 링크를 클릭하여글 내용 전부를 펼쳐주고, 하단에 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 소스를 확인할 수 있습니다.