CSS 로 직접 애니메이션을 구현하다보면 미세조정이라든가 부드러운 효과를 내기위해서는더 많은 공부를 하거나 작업량이 대폭 늘것으로 예상됩니다.css 라이브러리로 지원되는 ANIMATE.CSS 라는 파일이 있습니다.깃허브에서 다운로드 받거나 첨부파일을 다운로드 하여 압축을 풀어 줍니다.해당 ANIMATE.CSS 에 대한 사용법에 대해서 설명하는 시간을 가져보도록 하겠습니다.우선 데모를 확인해주세요http://ety.kr/ex/css/css_animation_03.html위의 주소에 있는 효과를 내는것인데 직접 만든것보다 깔끔하고 효과…
FlexSlider2 슬라이드는 아주 쉽게 슬라이드를 구현할 수 있도록 해주는 라이브러리 입니다.html 파일과 js 파일을 예제를 쉽게 사용할 수 있습니다.좌측에 샘플 메뉴를 제공해주기 때문에 초보자도 쉽게 따라할 수 있습니다.
데모 버전에서는 아래처럼 3가지를 불러들이지만 ... <link rel="stylesheet" href="demoDist/demo.css"> <link rel="stylesheet" href="demoDist/prism.css"> <link rel="stylesheet" href="dist/css/checkboxes.css"&g…
기존 캡챠 코드와는 약간 다른 아이디어가 묻어 있는 캡챠코드 네요~드래그 해서 숫자의 배열을 맞춰야 글을 작성할 수 있습니다.해당 코드의 경우에는 1~6개 까지 이지만 숫자를 더 추가하거나 뺄 수도 있습니다.[기존코드] $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); $('ul').shuffle(); …
본 라이브러리는 자바스크립트 버전과 php 버전 두개로 나뉩니다.데모버튼을 클릭해서 보시면 테스트하실 수 있습니다.감사합니다.
sheepit 이라는 자바스크립트 라이브러리 입니다.동적 폼을 생성해 주는 간편한 라이브러리 이므로관리자 페이지나 폼양식이 많이 필요한곳에 사용하면 괜찮을듯 합니다. $(document).ready(function() { var sheepItForm = $('#sheepItForm').sheepIt({ separator: '', allowRemoveLast: true, …
셀렉트 박스 선택시 해당 선택값이 텍스트에나타나는 라이브러리 입니다.직접 코딩하지 않고 쉽게 만들 수 있는 라이브러리 입니다.
해당 자바스크립트 라이브러리는클론박스 입니다.input 박스에 텍스트를 입력하고 add 를 클릭하는경우에그대로 복사되서 input 박스가 한개더 생겨나게 됩니다.동적인 문서를 직접 처리하지 않아도해당 라이브러리로 쉽게 처리 가능할것 같습니다.감사합니다.
글작성시에 새로고침 하게 되면모든 글이 삭제 되게 됩니다.현재 자바스크립트 라이브러리는폼양식 입력시 autosave 기능으로 인하여페이지를 닫더라도 폼양식이 사라지지 않습니다.중요한 폼양식을 작성할경우에 필요한 라이브러리 입니다.감사합니다.
textarea 박스에 글자를 입력하면카운터 되서 해당 스트링 만큼의 숫자가 거꾸로 출력됩니다.해당 소스코드를 확인해주세요~
버튼전송시(submit) 폼양식을 여러 종류별로 체크 가능합니다.데모를 확인해 보시면 쉽게 이해 하실 수 있습니다.감사합니다.
깃허브 자료실로 이동하여 다운로드 받으시거나(위의 깃허브 자료실 링크를 클릭해주세요.)NPM 으로 설치하여 다운로드 받습니다.npm install blueimp-file-upload[사용법]<script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>$('#fileupload').fileupload();[데스크탑 브라우저 지원사항]Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera …
해당소스코드를 확인해보시면 될듯 합니다.별다른 옵션에 대한 설명은 없습니다. <script src="/js/jquery.min.js" type="text/javascript"></script><script src="/js/ajaxupload.js" type="text/javascript"></script>위의 두개의 파일을 연결합니다.ajaxupload.js 에 대한 파일도 함께 첨부 합니다. $(document).ready(function(){ var thum…
회원가입 양식이 애니메이션 슬라이딩으로 구현되어 있습니다.해당 사용법은 다운로드 하신 소스코드를 확인하시기 바랍니다.
이미지를 일일이 올려서 편집하고 ftp 로 업로드하고 보게되면시간도 많이 걸리고 불편하고, 이미지도 찾아야 하는 번거로움이 많습니다.이런경우 외부의 이미지를 원하는 사이즈에 맞게 가져다가 쓰는방법입니다.옵션을 잘 보시면 텍스트도 들어거고 색상조정도 가능합니다.지금 브라우저를 켜고 주소창에 http://placehold.it/320x300라고 입력해보세요 또는http://placehold.it/320x500이라고 입력해보세요. 바로바로 이미지가 크기대로 보여지는것을 확인할 수 있습니다.나머지는 링크타고 가셔서 해당사…
