웹솔루션개발 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..

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 를 지정하여 스크립트를 실행합니다 웹브라우저 실행시 결과..