이 글은 아주 오래된 글의 업그레이드 버전입니다. 아래의 글에서 제이쿼리와 CSS를 이용해 버튼을 클릭하면 좌우로 애니메이션 되는 기능을 설명했는데 제이쿼리에 사용된 toggle function이 1.8 버전에서 폐기예정 선언이 있으면서 1.9 버전에서 완전 폐기됐습니다. 따라서 최근 버전의 제이쿼리를 사용하면 작동하지 않습니다. https://martian36.com/523 CSS가 발전하면서 CSS3의 애니메이션 기능을 이용하면 더욱 다양하고 간단하게 이용할 수 있습니다. 자바스크립트의 사용도를 줄이고 CSS의 사용도를 늘리는 추세이므로 적합하다고 할 수 있습니다. 예제는 위 파일에 있습니다. 상하좌우 4면에 버튼이 배치돼있습니다. 기능은 이전 버전과 똑같습니다. 좌측에 있는 버튼을 클릭하면 우측으로..
바로가기 위 버튼을 클릭하면 위 그림이 나오는 사이트로 이동합니다. 노란색의 Download the Source 링크를 클릭해 압축 파일을 다운로드 합니다. 압축해제하고 폴더로 들어가면 위와 같이 나옵니다. html 파일을 클릭하면 눈내리는 효과가 나옵니다. 티스토리에 설치를 위해 필요한 파일은 하나입니다. js 폴더에 들어가 snowfall.jquery.js 파일을 티스토리에 업로드 합니다. 관리자 화면의 HTML 편집 화면에서 태그 바로 이전에 위와 같이 코드를 추가하고 저장하면 완료입니다. 눈송이의 최저 크기는 1, 최대 크기는 8입니다. 눈송이 수를 늘리려면 250이라는 숫자를 조정합니다. 2016년 12월 22일 현재 제 블로그에 나타나는 눈내리는 효과입니다.
웹 개발 시 유용한 사이트를 소개합니다. http://tympanus.net/codrops/ 웹 개발자라면 웹디자인 소스를 찾다가 한번쯤은 들렀을 정도고 아주 유명한 사이트입니다. 새로운 글들이 올라와 데모를 확인하면 아주 놀라울 정도로 참신합니다. 메뉴에서 Tutorial은 웹 개발 시 필요한 소스와 함께 깊이 있는 강좌가 있습니다. 개별 글에서 데모를 확인할 수 있습니다. Playground 메뉴에서는 최신의 기술을 사용한 강좌가 있습니다. Blueprints에서는 실험적인 강좌와 소스가 있습니다. 중요한 것이 Collective 메뉴의 콘텐츠인데 이곳에는 여러 사이트에서 새로 올라온 글 중 신선한 내용을 목록형태로 보여주고 해당사이트로 이동할 수 있습니다. 이 사이트를 통하면 이와 비슷한 사이트를 ..
일반적으로 웹페이지 내부의 일정한 장소로 이동하는 기능은 HTML의 name 속성을 사용합니다. 아래의 코드에서 a태그의 링크를 클릭하면 href 속성값에 해당하는 #C4가 있는 Chapter 4로 이동하죠. 이동하는 곳의 a 태그에는 name 속성이 사용됐습니다. href 속성은 클릭하는 곳에 name 속성은 이동하는 곳에 넣고 값을 일치시켜주면 됩니다. href의 값에서 #는 현재 페이지를 의미합니다. Chapter 4 바로가기 Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter ex..
제이쿼리는 자바스크립트 라이브러리입니다. 라이브러리란 이미 만들어진 많은 기능이 있는 함수들이 모인 도서관(Library)을 말합니다. 자바스크립트는 배우기가 어려워서 일반인들은 접근하기가 힘들지만 제이쿼리는 누구든지 배울 수 있도록 쉽게 돼있습니다. 어려운 자바스크립트를 이용해서 어떤 기능을 하는 플러그인을 만들자면 수많은 코드가 필요하지만 일반적으로 많이 사용하는 기능을 미리 정의해 놓고 라이브러리에 저장해서 불러오기만 하면 되는 것이 제이쿼리입니다. 이러한 자바스크립트 라이브러리는 제이쿼리만 있는 것이 아니라 Prototype, script.aculo.us, Ext Core, jsPHP, MooTools, jQuery, Ext JS, DHTMLX, Dojo Toolkit 등 종류가 많습니다. 그중에..
제이쿼리를 이용한 떠다니는 아이콘이나 배너는 글을 읽으면서 스크롤하다보면 계속 움직이기 때문에 글을 읽는데 방해가 되므로 광고나 소셜네트워크 아이콘 등 블로그 관리자의 필요에 의한 것은 가급적 달지 않으려고 하지만 방문자의 편의를 위한 아이콘이나 배너는 달아볼만 한 것 같습니다. 방문자의 편의를 위한 것이라면 메뉴바나 글의 위치를 이동할 수 있는 아이콘이 있을 수 있습니다. 물론 관리자의 취향에 따라서 글읽는데 방해가 되지 않는다 생각되면 소셜네트워크 아이콘이나 광고 배너를 설치하는데 사용할 수도 있습니다. 이번글에서는 간단한 제이쿼리 플러그인을 이용해서 웹페이지를 스크롤함에 따라서 아이콘이나 배너가 애니메이션 되는 효과를 만드는 방법을 알아봅니다. 제 블로그의 화면 좌측 끝에 배치되어 있는 뷰온버튼은 ..
제이쿼리 이미지 슬라이더 배너를 자동으로 만들어주는 무료프로그램을 소개합니다. 개인용으로 무료이고 이미지 하단에 제작자의 로고가 첨부되지만 상당히 좋은 프로그램입니다. 12개의 템플릿과 12개의 슬라이더 배너를 선택할 수 있으며 CSS를 조정하면 이미지도 자유롭게 원하는 크기로 설정할 수 있습니다. 이만한 프로그램이 개인용으로나마 무료라는게 믿어지지 않을 정도로 상당히 좋습니다. 제 블로그에 오랫만에 배너를 바꾸려고 작업했는데 제이쿼리가 많이 설치돼서 그런지 버벅거리더군요. 특히 인터넷 익스플로러에서는 상당히 버벅거립니다. 그래서 제거했습니다. 이곳 을 클릭하면 해당 사이트로 이동합니다. 12종류의 데모를 확인해보시고 하단에 Free Download버튼을 클릭합니다. 윈도우버전과 맥버전이 가능하며 유료인..
Your browser does not support iframes. 제이쿼리 플러그인을 이용한 모자이크 애니메이션 배너입니다. 우측에 어도비 터치앱 배너을 만들어서 사이드바에 넣었는데 4대 브라우저에서는 잘 나오지만 IE에서만 그냥 이미지로만 나옵니다. 어떤 부분이 잘못됐는지는 나중에 알게 되면 첨부해드리고 우선 상당히 좋은 효과이기 때문에 소개합니다. 위배너는 유료 플러그인에 비해 좀 못하지만 이런 모자이크형태의 배너는 거의가 유료입니다. 이곳 을 클릭하면 원본 사이트로 이동합니다. 소스를 다운 받으면 제이쿼리 파일과 CSS파일만 있어서 시험해보기가 어렵죠. 그래서 html파일과 이미지를 별도로 다운 받아 편집해서 압축파일로 저장했습니다. 수정하면서 구글의 제이쿼리 라이브러리를 삽입했습니다. coin..
Your browser does not support iframes. 위 이미지에서 마우스를 큰 이미지에 대면 사각형 안쪽이 돋보기처럼 확대되어 보입니다. 그리고 사각형 외부는 흐릿하게 되는 제이쿼리 플러그인을 이용한 이미지 확대효과입니다. 원본 사이트를 참고하시려면 이곳 을 클릭하면 이동합니다. 다음의 압축파일은 index파일을 수정하고 이미지를 다운 받아 설치한 것으로 인덱스파일을 클릭하면 기본 웹브라우저에서 바로 볼 수 있고 자바스크립트 파라미터는 이미지로 만들었으니 참고하세요. 설치방법은 아주 간단합니다. 스타일 시트 링크 파일은 경로를 바꿔서 자신의 사이트에 맞춥니다. 구글의 제이쿼리 라이브러리를 사용하면 별도의 제이쿼리 라이브러리를 설치하지 않아도 되고 속도도 빠릅니다. 클라우드줌 제이쿼리 플..
제이쿼리 소스를 아주 많이 개발하고 있는 사이트를 소개합니다. 무료로 사용할 수 있고 내용도 좋아서 제이쿼리를 이용한 웹페이지 개발하는데 많은 참고가 됩니다. 이곳 을 클릭하면 해당 사이트로 연결됩니다. 제이쿼리 튜토리얼과 웹디자인에 관한 많은 정보가 있으며 개발된 소스의 데모를 확인하고 다운받아 사용할 수가 있습니다. 이번 글에서는 이 사이트에서 만든 슬라이스 박스 플러그인을 이용해서 3D 이미지 갤러리나 배너를 만드는 방법을 알아봅니다. 현재 CSS3의 3D Transform을 지원하는 Webkit 플랫폼의 브라우저인 구글 크롬과 애플 사파리만 3D로 애니메이션 되고 다른 브라우저는 단순한 이미지 슬라이드만 가능합니다. 조만간 CSS3를 다 지원하는 버전이 나오게 되면 훌륭한 제이쿼리 소스로 각광을 ..
스타일리시한 내비게이션 메뉴바를 개인용 무료로 사용할 수 있는 사이트를 소개합니다. 블로거에게는 무료입니다. 이곳 을 클릭하면 해당 사이트로 이동합니다. 썸네일 이미지를 클릭하면 다음 화면으로 이동합니다. 데모 화면을 볼 수 있으며 우측에서 색상아이콘을 선택하고 Free Download 버튼을 클릭하면 압축파일로 다운로드 됩니다. 용량도 작아서 웹사이트에 별로 무리가 가지 않습니다. CSS3도 지원하여 그림자효과도 만들어지지만 인터넷익스플로러에서는 구현이 안되는군요. 모두 클릭해서 시험해보니 디자인이 아주 좋습니다. 최근에 생긴 사이트로 생각되는군요. 상업용으로 사용하려면 위에 보이듯이 돈을 지불하면 여러개의 스타일을 한번에 받을 수 있고 색상도 다양하게 포함됩니다. 개인용버전은 애매한 소스코드라고 되어..
슬라이딩 도어 테크닉은 이미지의 크기가 변하면 슬라이딩 도어에 해당하는 이미지의 크기도 변하게 하는 기법입니다. 메뉴바에 사용되는 슬라이딩도어 테크닉 은 CSS로 만들 수 있는데 배너에 사용되는 이미지는 제이쿼리로 가능합니다. 이곳 을 클릭하고 원작자의 사이트에서 See the Demo 버튼을 클릭하면 미리 볼 수 있고 Download 버튼을 클릭하여 파일을 다운 받을 수 있습니다. 제 블로그의 우측에 Best 9에 적용해 봤습니다. 다운로드 파일 원본파일을 압축을 풀면 9개의 이미지와 하나의 배경이미지가 있고 index파일이 있습니다. js폴더에는 제이쿼리 라이브러리 파일과 easing파일이 있습니다. index파일에는 제이쿼리 코드와 css코드가 있는데 블로그 사용을 위해 두가지 코드를 별도의 파일로..
제이쿼리같은 자바스크립트 라이브러리가 나오기전까지 웹디자이너나 개발자들에게 플래시를 이용하지 않고 웹페이지를 재로딩없이 애니메이션이나 인터액티브 기능을 추가하는 것은 불가능했습니다. 자바스크립트가 메이저 웹브라우저에서 지원이 안됐기때문이죠. 자바스트립트 라이브러리가 없으면 브라우저와 자바스크립트간에 호환성 해결을 위해 자바스크립트의 해박한 지식이 필요했습니다. 제이쿼리는 다양한 브라우저와 호환성이 좋은 라이브러리를 제공하고 있으며 배우는 시간도 상대적으로 짧으며 자바스크립트 프로그래밍하는데 수많은 반복적인 작업을 더욱 빠르게 처리할 수 있는 함수를 제공하고 있습니다. 애플의 아이폰이 플래시를 지원하지 않고 제이쿼리 같은 자바스크립트를 이용해서 애니메이션을 실행하면서 제이쿼리가 더욱 각광을 받고 있는 가운..
제이쿼리는 타인이 만든 것을 손쉽게 설치할 수 있어서 사용하기 아주 편리합니다. 웹 애니미에션 프로그램으로 플래시가 많이 쓰였는데 애플 아이폰에서 플래시를 제외시키고 제이쿼리로 대체하면서 제이쿼리에 대한 관심이 높아졌습니다. 플러그인을 만들려면 제이쿼리와 자바스크립트에 대한 지식이 많아야하겠지만 어떤 프로그램을 사용하기 위해서 그 프로그램을 다 알아야 사용할 수 있는 것은 아니듯이 남이 만든 간단한 제이쿼리 플러그인을 설치할 줄만 안다면 제이쿼리를 사용할 줄 아는 것이 됩니다. 개발자들은 수없이 많고 무료로 공개되는 것이 많으며 상품성있는 좋은 플러그인은 저가에 판매되기도 합니다. 플래시는 남이 만든 것을 수정해서 사용하려면 플래시를 잘 알아야 가능하지만 제이쿼리는 플러그인 이라는 말 그대로 끼워넣기만 ..
수정한 데모보기 링크 이곳 을 클릭하면 이미 만들어 놓은 제이쿼리 배너를 수정하여 사용할 수 있도록 공개해 놓았고 DEMO를 클릭하면 어떤 내용인지 알 수가 있습니다. 다운로드를 클릭하면 다음의 압축파일을 다운 받을 수 있습니다. 이 배너에는 이미지 회전, 슬라이드인 아웃, 줌인 아웃 등 여러가지 애니메이션이 되므로 원하는대로 응용할 수 있습니다. function부분의 내용입니다. 주석을 달아놓았으니 참고하세요. $('#ca_banner1').banner({ steps : [ [ //1 step: [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}], //1번째 div, 2번 이미지 줌아웃회전, 3번 이미지 줌인회전 [{"to" : "1"}, {}], ..
이전글 에서 하나의 버튼으로 두가지 기능을 하는 토글효과를 이용한 슬라이딩 메뉴를 알아보았는데 이것은 html요소를 위 아래로만 감추거나 나타나게 하고 좌우로 슬라이딩효과를 주려면 제이쿼리의 animate 기능을 이용합니다. 화면 밖에 감추었다가 버튼을 클릭하면 화면 안으로 나타나게 하는 슬라이딩 애니메이션 효과를 알아봅니다. 업그레이드 버전은 아래의 링크에 있습니다. https://martian36.tistory.com/1559 이글이 도움이 되셨다면 추천↑ 부탁드립니다. Toggle 에디터에 코드를 입력하고 웹브라우저에 실행하면 아래 데모링크처럼 잘 되는데 블로그에서는 열리고 닫는 두개의 이미지가 나타나지 않아서 하나의 이미지를 사용했습니다. 데모링크 링크 오른쪽에 배치할 경우의 파일은 아래를 사용하..
