모바일쪽에서 손 이동에 따라서 움직이는 대표적인 슬라이더 입니다.해당 데모 주소http://idangero.us/swiper/demos/
[첫번째 샘플소스]<!doctype html><html><head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.…
sheepit 이라는 자바스크립트 라이브러리 입니다.동적 폼을 생성해 주는 간편한 라이브러리 이므로관리자 페이지나 폼양식이 많이 필요한곳에 사용하면 괜찮을듯 합니다. $(document).ready(function() { var sheepItForm = $('#sheepItForm').sheepIt({ separator: '', allowRemoveLast: true, …
이미 완성된 홈페이지내에 애니메이션 효과를 낼 수 있습니다.jquery 형식으로 제작되거나 css 형식으로 그대로 제공 됩니다.몇가지 사용방법이 있습니다.[CDN 주소]<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"></head>[JQUERY 방식]$('#yourElement').addClass('animated bounceOutLeft');…
MIT 라이선스 입니다.BOOTFALT 라는 각종 홈페이지에서 사용될 요소들을 담고 있습니다.부트스트랩 3.X 이며 CSS FRAMEWORK 입니다.
메뉴클릭시 해당 페이지로 애니메이션 효과를 내며 이동하는 네비게이션 입니다.1.링크네비게이션을 사용하기 위해서 링크를 합니다.<!-- this goes inside the header tag--><link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css"><!-- all these references goes before the closing body tag-->…
FlexSlider2 슬라이드는 아주 쉽게 슬라이드를 구현할 수 있도록 해주는 라이브러리 입니다.html 파일과 js 파일을 예제를 쉽게 사용할 수 있습니다.좌측에 샘플 메뉴를 제공해주기 때문에 초보자도 쉽게 따라할 수 있습니다.
기존 캡챠 코드와는 약간 다른 아이디어가 묻어 있는 캡챠코드 네요~드래그 해서 숫자의 배열을 맞춰야 글을 작성할 수 있습니다.해당 코드의 경우에는 1~6개 까지 이지만 숫자를 더 추가하거나 뺄 수도 있습니다.[기존코드] $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); $('ul').shuffle(); …
bootstrap-select-1.12.4 버전 입니다.셀렉트 박스 스샷을 보시면 아시겠지만 셀렉트 시에 보다 가독성이 좋으며 퀄리가 보장되는 셀렉트 박스 형태로 제작되었습니다.MIT 라이센스로 배포되는 자료이며웹사이트 제작시에 사용하면 좋은 셀렉트박스 라이브러리 입니다.
CSS 로 직접 애니메이션을 구현하다보면 미세조정이라든가 부드러운 효과를 내기위해서는더 많은 공부를 하거나 작업량이 대폭 늘것으로 예상됩니다.css 라이브러리로 지원되는 ANIMATE.CSS 라는 파일이 있습니다.깃허브에서 다운로드 받거나 첨부파일을 다운로드 하여 압축을 풀어 줍니다.해당 ANIMATE.CSS 에 대한 사용법에 대해서 설명하는 시간을 가져보도록 하겠습니다.우선 데모를 확인해주세요http://ety.kr/ex/css/css_animation_03.html위의 주소에 있는 효과를 내는것인데 직접 만든것보다 깔끔하고 효과…
데모 버전에서는 아래처럼 3가지를 불러들이지만 ... <link rel="stylesheet" href="demoDist/demo.css"> <link rel="stylesheet" href="demoDist/prism.css"> <link rel="stylesheet" href="dist/css/checkboxes.css"&g…