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

원형, 방사형으로 마우스 클릭후 설정을 늘렸다줄였다 할 수 있는 소스로 일종의 수치값을 설정하여 보여주는 퍼포먼스를 가진 roundslider UI 를 지원합니다. 모바일용 터치, 마우스 스크롤, 키보드 액션도 지원되어 유용한 설정툴을 만들수 있습니다. 본 소스의 장점은 아래와 같습니다. 1) CSS를 통해 매우 쉽게 사용자 정의 가능 2) 모든 CSS3 애니메이션 지원 3) 범위 슬라이더 지원 4) 선형 스텝 증분 5) 터치 지원 6) 키보드 지원 7) 마우스 스크롤 지원 8) 오픈 소스 ( MIT 라이센스 하에 있음 ) 위와같은 다양한 타입의 설정이 가능합니다. 수치값을 text 로 설정도 할 수 있어 정확한 수치값을 기입하여 적용하는 UI 도 가능합니다. 다양한 항목에서 이용이 가능한 RoundSl..

* flexisel 소개 - 반응형 회전식 슬라이드 쇼 jquery plugin * License - MIT License * 이용방법 - 이용방법은 간단합니다 첨부된 압축파일을 다운받아 해제하여 필요한 jquery, js, css 파일을 작업해야될 페이지에 옮겨놓습니다 추가되는 코드는 jquery , js, css 파일 선언부와 슬라이드되어야될 영역별 코드 삽입 스크롤이 정상적으로 작동될 수 있도록 jquery window load 이벤트를 연결하여 flexisel 스크립트를 삽입할 수 있도록 합니다 flexisel 가 실행되고 설정할 수 있는 옵션은 무한스크롤, 자동스크롤, 간격설정, 이동속도, 보여져야될 이미지 개수 등이 있으며 좀 더 자세한 옵션내용의 확인은 첨부된 파일 README.md 문서를 ..

jquery 와 css3을 이용한 슬라이드 배너 입니다. 데모 미리보기를 누르시면 바로 확인이 가능하며 다이나믹한 효과로 눈을 사로잡는 매력적인 소스입니다. 파일은 css, images, js, html 로 나누어져있으니 마음껏 응용해보시기 바랍니다.

매끄러운 슬라이드를 종류별로 확인할 수 있습니다. 또한 사용소스도 간단해 초보자도 쉽게 다룰수 있습니다. 예제를 쭉 본후 하단의 다운로드 나우 버튼을 클릭해 다운받아 응용해보세요! 더 많은 예제가 있지만 4가지만 캡쳐해드립니다. 화살표 클릭시 하나씩 이동합니다. 실행소스 $('.single-item').slick(); 한번 클릭시 3개씩 이동합니다. 실행소스 $('.multiple-items').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 3 }); 한번 클릭시 4개씩 이동합니다. 실행소스 $('.responsive').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slide..

* Jquery Slideshow Feature List 소개 - Jquery 로 제작된 Slideshow 이며 슬라이드 탭에 대한 설정과 마우스가 영역으로 이동되었을때 애니메이션에 대한 작동여부, 슬라이드탭에 대한 전환시간에 대한 설정이 가능합니다 Jquery 1.3 버전이상 이용할 수 있습니다 * 설치 및 사용방법 - 첨부된 압축파일을 원하는 웹서버에 공간에 다운로드하여 압축을 해제하고 jquery 파일과 슬라이드에 필요한 js를 아래와 같이 선언합니다 탭메뉴의 동작을 할수있게 슬라이드 함수를 및 탭 아이디값과 탭이동시 보여줘야될 영역에 대한 id 값을 선업합니다 탭메뉴와 슬라이드 영역에 대한 id값 선언과 내용을 작성하여 완성합니다

jquery를 이용해서 제작된 다양한 효과를 가진 슬라이드 입니다. 첨부파일을 다운로드 받아서 압축을 해제한후 examples/index.html examples/multiple.html examples/numbers.html examples/thumbs.html 위 파일들을 웹브라우저로 열어보면 슬라이드 효과를 확인할수 있습니다. 다양한 애니메이션 효과를 선택할수 있네요. 한페이지에 여러개의 슬라이드를 이용하는 예제입니다. 슬라이드의 네비게이션을 숫자를 쓰거나, 작은사진을 이용하는 예제입니다. 출처는 https://skitter-slider.net/ 입니다.

네비게이션 버튼을 클릭하면 좌우측의 슬라이드가 점점 쌓입니다. 사이트에서 소스다운로드가 가능합니다. 익스 10이상 크롬에서 정상 작동합니다. 아래와 같은 기본 옵션을 조절이 가능합니다. // default transition speed speed : 700, // default transition easing easing : 'ease-in-out', // render both piles piles : true

이미지를 이용한 기본적인 반응형 슬라이드를 구현할 수 있지만 vimeo 나 wistia 에 등록된 동영상도 슬라이드로 구현이 가능하며 여러가지 디자인을 제공합니다. flexslider.woothemes.com 에서 샘플을 확인할 수 있으며 다운로드도 가능합니다.

패널형 슬라이드 배너로 랜딩페이지 또는 이벤트 페이지 제작에 유용할것 같으며 반응형으로 만들어져 있습니다. PC 모바일 각 각의 패널 타이틀을 누르게되면 해당 패널에대한 상세 내용을 확인할 수 있습니다. 우측의 카테고리 메뉴같이 생긴 버튼을 누르시면 텍스트 형태의 메뉴도 확인할 수 있습니다. 링크페이지에서 자료를 다운로드 받으실수 있으며 view demo를 클릭하시면 상세히 확인하실 수 있습니다. 파일을 다운받아보시면 html파일과 리셋 css, 디자인css , 관련 js로 구성되어 있으며 파일 편집을 통하여 다양하게 이용하실 수 있습니다.

Jquery 를 이용해서 작성된 이미지 슬라이드 스크립트입니다. 시간이 지남에 따라서 이미지 상단 우측에 시계방향으로 다음 이미지로 변경되기 까지의 카운트다운 표시가 됩니다. 마우스를 오버하면 위 그림 처럼 이전 이미지, 다음 이미지를 선택할 수 있는 화살표가 표시되고, 화살표를 클릭하면 우측상단의 카운트다운을 표시하던 부분이 일시정지 하는 모양으로 바뀌고 이미지가 바뀌지 않네요. 이미지 슬라이드를 위해서 작성된 HTML 소스코드와, Javascript 소스코드는 단순하긴 합니다만, 그만큼 슬라이드가 동작하는 부분에 대해서는 다양하게 제어할수 있도록 구현된 건 아닌듯 하네요. 출처는 http://www.htmldrive.net/items/show/667/jQuery-Countdown-Image-Slide..