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

보더의 색상이 그라디언트로 색상으로 되어 있습니다.마우스오버시 애니메이션 효과가 있습니다.아래 소스에서 포지션으로 버튼의 테두리에 여백을 만들어서 뒤에 그라디언트 배경색이보이게 하는 방식으로 제작 되었습니다.해당 사이트 또는 첨부된 파일을 다운로드 하시면배경 그라디언트 소스외에 애니메이션 소스도 확인할 수 있습니다.

물결 애니메이션이 적용되어 있습니다.css 파일에서 손쉽게 색상, 투명도, 속도 등을 변경하여 사용할 수 있습니다.해당 사이트에 방문하거나 첨부파일을 다운로드 받으시면 html과 css 코드를 확인할 수 있습니다.

css 로 제작된 배경 애니메이션 입니다.역동적인 페이지 배경을 제작할때 유용해 보입니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML Bubbles CSShtml, body { font-family: 'Dongle', sans-serif; margin: 0; padding: 0;} .text-container { z-index: 100; width: 100vw; height: 100vh; display: flex; position: absolute; top: 0; left: 0; justify-content: center; align-item..

다음은 HTML과 CSS, JavaScript를 활용하여 눈이 내리는 애니메이션을 구현하는 코드에 대한 설명입니다.이 애니메이션은 눈송이가 하늘에서 떨어지는 모습을 표현하며, 눈송이가 바닥에 닿으면 쌓이는 독특한 효과를 제공합니다.겨울의 분위기를 연출하는 데 적합하며, 웹사이트의 배경 또는 이벤트 페이지 디자인에 활용할 수 있습니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTML CSSbody { margin: 0; padding: 0; background-image: linear-gradient(to bottom, #00111a, #00334d, #005580); background: url("https://hagall-media.de/cp/forest3.jpg") repeat-x; backgr..

마우스를 따라 다니는 블랙홀 디자인 입니다.간단한 배경 애니메이션이 필요하실 때 사용 해도 좋을거 같습니다.자세한 내용은 데모에서 확인할 수 있습니다.html

신경 흐름을 나타내는 백그라운드 효과 입니다.마우스 커서에 의해 흐름에 외곡을 줄 수 있습니다.HTML, CSS, JS를 사용하였습니다.자세한 내용은 데모사이트 주소에서 확인하실 수 있습니다.HTML                        Neural Noise                                    GLSL shader based on https://x.com/zozuar/" target="_blank" rel="noopener">@zozuar https://x.com/zozuar/status/1625182758745128981/" target="_blank" rel="noopener">artwork                                    https://..

화면에 꽉 차는 동영상 배경입니다.화면에 맞게 남은 부분은 짤려서 보여집니다.동영상 배경 소스입니다. 동영상 배경 위 텍스트를 정중앙에 배치하고 화면에 비례해서 폰트크기가 변경되는 소스입니다.

사각형 패턴 애니메이션 배경 소스 입니다.수직 이동과 회전하는 에니메이션 css 입니다.css 수정으로 디자인 변경을 쉽게 할 수 있습니다.

서서히 색상이 변하는 백그라운드 애니메이션입니다.간단한 소스로 구현이 가능합니다.  HTML 구조 CSS 소스*, *::before, *::after {  box-sizing: border-box;} html, body {  height: 100%;} body {  display: grid;  align-items: center;  justify-items: center;  margin: 0;  background-color: #000;} div {  width: 300px;  height: 300px;  border-radius: 50%;  box-shadow:    0 0 20px #fff,    -20px 0 80px #f0f,    20px 0 80px #0ff,    inset 0 0 50px ..

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 jquery.youtube-background.js 파일을 호출합니다. 2. 배경 요소를 만들고 배경으로 사용할 Youtube, Vimeo, HTML5 비디오 영상 주소를 data-vbg 옵션에 넣습니다. 3. 그리고 youtube_background 플러그인을 호출하면 끝입니다. 4. 각종 옵션을 제공합니다. (옵션 코드는 사이트를 참고하세요.) * 모바일에서 비활성화 여부 (기본값 false) * 재생 및 음소거 버튼 표시 여부 (기본값 false) * 영상 로드 전 배경 로드 여부 (기본값 true) * 페이지 로드 시 비디오 자동 재생 여부 (기본값 true) * 페이지 로드시 비디오 음소거 여부 (기본값 true) * 비디오 반복 ..