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

로고를 이용한 이미지 슬라이드 Carousel입니다.로고를 변경하여 다양하게 응용 가능한 슬라이드 효과입니다.HTML 구조          CSS 소스body {  background: black;  margin: 0;  min-height: 100vh;  display: flex;  align-items: center;  justify-content: center;  flex-direction: column;} @keyframes moveBg {  from { background-position: 0 50%; }  to { background-position:  -1134px 50%; }} .carousel {  --blur: 6px;  --contrast: 105%;  --speed: 13s;  he..

GSAP를 이용한 이미지 슬라이드입니다.활용도가 높아 다양한 사이트에서 사용 가능합니다.HTML 구조 arrow drop CodePen cart caret LikeNuShus man & woman   ...  CSS 소스 *,*::after,*::before { box-sizing: border-box;} html { background: #fff;} body { --color-text: #000; --color-bg: #fff; --color-link: #000; --color-link-hover: #858585; --color-nav-bg: #fff; --color-nav-hover: #858585; --color-cart-bg: #000; --co..

CSS로만 작동하는 애니메이션 버튼입니다.버튼 하단 라인에 네온의 무지개색 라인으로 애니메이션이 작동하며마우스 오버시 색변화가 빠르게 진행됩니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.

나열된 이미지에 물결 애니메이션 효과가 추가된 디자인입니다.마우스 클릭시 해당 이미지가 확대되고 마우스 아웃되면 원래대로 돌아오게 됩니다.

카드에 마우스 오버시 sns 링크와 정보 영역이 젤리효과 에니메이션과 함께 출력됩니다.svg 를 이용하여 곡선을 만듭니다.css 로 에니메이션 효과를 구현합니다.cubic-bezier 을 이용하여 곡선을 제어합니다.

진행바의 끝 부분이 빛나는 효과가 있습니다.배경이 어두운 영역에 사용하기에 좋습니다.css 로 제작되어 커스터마이징이 용이합니다. css 로 구현되어 있습니다.로딩시 진행바가 이동하는 에니메이션이 존재합니다.

HTML 구조  CSS 소스//Vars :root {  --rad: .7rem;  --dur: .3s;  --color-dark: #2f2f2f;  --color-light: #fff;  --color-brand: #57bd84;  --font-fam: 'Lato', sans-serif;  --height: 5rem;  --btn-width: 6rem;  --bez: cubic-bezier(0, 0, 0.43, 1.49);} // Setupbody {background: var(--color-dark); display: flex; align-items: center; justify-content: center; min-height: 100vh }html { box-sizing: border-box; he..

HTML 구조                    class="absolute h-10 w-full bg-white rounded-lg shadow ease-out transition-transform transition-medium"        :style="{ transform: `translateY(calc(100% * ${selected}))` }"      >                                    type="button"            @click="select(0)"            :aria-selected="selected === 0"            class="py-2 px-3 w-full flex items-center focus:outline-n..

스크롤을 하면 버튼 이미지가 젤리처럼 움직이게 되는 디자인 입니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.HTML                                                                                                                                                                                                                                               CSS  * {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: bord..

클릭시 에니메이션 효과와 함께 탭메뉴가 변경됩니다.라디오 버튼을 이용한 탭메뉴 소스입니다.라디오 버튼과 has() 선택자를 이용한 에니메이션 탭 효과입니다.첨부된 파일을 다운로드 하거나 데모 사이트에서 전체 소스를 확인 할 수 있습니다.