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

마우스를 올리면 디자인이 변경되는 깔끔하고 심플한 느낌의 버튼 효과입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Hover Swipe CSS 소스* { margin: 0; padding: 0; border-sizing: border-box;} html, body { width: 100%; height: 100%; border: none; outline: none;} body { display: flex; align-items: center; justify-content: center; background-color: #d2f7d3;} #cursor { position: fixed; z-index: 100; left: 0; top: 0; ..

마우스 효과가 들어간 네비게이션 커서 이펙트입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Home Our Story Studio Contact CSS 소스@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,750,700,800,900&display=swap'); body { margin: 0; padding: 0; cursor: none; font-family: 'Poppins', sans-serif;} .nav-wrapper { width: 100%; height: 100vh; background..

* Javascript Smoke Effect - Smoke.js는 웹용 Smoke Effect를 만드는 자바 스크립트 라이브러리입니다. * 사용방법 - 첨부된 압축파일을 다운로드하여 적용할 웹경로에 압축해제하여 업로드 합니다 그후 적용된 html 문서에 smoke.js 를 불러옵니다 이후 아래와 같은 형태의 스크립트 사용이 가능해집니다 스크립트 사용의 짧은 예) 복사가 가능한 예) 그외 API 정보는 아래와 같습니다 context — 연기를 그릴 캔버스의 컨텍스트 [r, g, b] — (선택 사항) 연기에 적용 할 색상 party.start() - 애니매이션 시작 party.stop() - 애니매이션 중지 party.addSmoke(x,y,numberofparticles) x,y — 캔버스에서 연기가 ..

css만을 이용한 효과로 텍스트에 마우스를 올리면 텍스트 왼쪽에서부터 배경이 채워지고 마우스 아웃시 텍스트 왼쪽에서부터 배경이 사라집니다.

텍스트 및 이미지등에서 로딩이 될 경우 블록되는 효과로 밑줄긋기 효과처럼 보이는 Block Reveal Effects 로 on-scroll 시에도 순차적으로 적용되는 예제등을 확인할 수 있습니다. 사이트가 최초 로딩되면 텍스트 및 이미지가 페이지상에 노출되기까지 어느정도 시간이 소요됩니다. (아주 짧은 시간이지만 웹사이트 특성상 출력까지의 로딩되는 시간이 필요합니다.) 로딩되는 효과를 좀더 다이나믹하게 연출하여 지루하지 않는 UI 를 가실 수 있습니다. 다양한 예제가 소개되어있고 위 예제처럼 블럭요소가 지나가는 방향도 설정이 가능합니다. https://github.com/codrops/BlockRevealers/ 위 링크를 통해 다운로드가 가능하며, 소스상에서 보시면 js/anime.min.js js/s..