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

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

로고를 이용한 이미지 슬라이드 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..

jR3DCarousel은 다양한 3D 효과가 있는 이미지 배열을 순환하는간단한 방법을 제공하는 jQuery 반응형 캐러셀 플러그인입니다.아래와 같은 기능이 있습니다.다운로드 받은 파일의 압축을 해제한 뒤index.html 파일의 소스에서,이미지의 경로를 존재하는 이미지의 경로로 조절을 해야 확인이 가능합니다.이미지의 경로를 조절하는 것은 HTML 태그를 조금 아시는 분이라면 별로 어렵진 않겠네요.위 소스에서 이미지의 경로를 조절하시면 됩니다.좌우에 표시되는 화살표를 눌러보면,이미지가 변경되는 효과를 보실수 있습니다.이미지 슬라이더가 작동하는게주사위가 돌아가는 것과 비슷하게 움직이네요사용방법은 아래와 같습니다.

GSAP을 이용한 이미지 슬라이드입니다.스크롤하거나 버튼을 클릭하여 순서를 변경할 수 있고 무한으로 슬라이드됩니다.사이트를 구성할 때 다양한 방식으로 사용하기 좋습니다.  HTML 구조 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Prev Next  CSS 소스* { box-sizing: border-box;}body { background: #111; min-height: 100vh; padding: 0; margin: 0;}.gallery { position: absolute; width: 100%; height: 100vh; overflow: hidden;} .cards { position: absolute; width: 14rem; height: ..

TerseBanner 는 jquery 슬라이드 배너입니다 * TerseBanner 소개 TerseBanner는 jQuery carousel 플러그인입니다. 대부분의 carousel 플러그인과 비교하여 terseBanner는 대부분의 요구 사항을 충족하기 위해 가장 일반적으로 사용되고 쉽습니다 터치 스크린 이벤트 지원 * 설치방법 첨부된 압축파일을 해제하여 원하는 웹루트 디렉터리에 업로드 합니다 슬라이드를 적용할 html 문서 상단에 css 를 불러옵니다 슬라이드 처리할 배너이미지를 아래와 같이 구성합니다 하단에 압축파일에 들어있는 js 파일들을 불러옵니다 그리고 하단에 슬라이드 이미지 영역을 감싸고 있는 div class 인 banner-index 를 지정하여 스크립트를 실행합니다 웹브라우저 실행시 결과..