배경 이미지 애니메이션 효과 입니다.
메뉴 등에 사용하면 괜찮을 것 같네요.
이미지에 따라서 다양한 효과를 낼 수 있겠네요. 문제는 창의력 -_-;;;
튜토리얼 : http://snook.ca/archives/javascript/jquery-bg-image-animations/
미리보기 : http://snook.ca/technical/jquery-bg/
소속 : 밀짚모자 해적단
새 창으로
선택한 기호
탭 슬라이드 메뉴
jQuery 탭 슬라이드 메뉴 입니다. 탭 클릭시 컨텐츠가 슬라이드 되어 나옵니다. 여러모로 유용하게 사용할 수 있을 것 같군요 ^-^ 출처 : http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial 데...
Floating 레이어 (스크롤에 따라다니는.. 주로 퀵메뉴에 사용)
주료 퀵메뉴에 많이 사용하죠. Floating 레이어 입니다. 일단 jQuery 코드는 아래와 같습니다. $(document).ready(function(){ var currentPosition = parseInt($(".floating").css("top")); $(window).scroll(function() { var positi...
select box (combo box)에 디자인(css) 입히기 [2]
개인적으로 셀렉트박스나 체크박스, 라디오 버튼 등 폼관련 엘리먼트들은 기본을 유지하는게 좋다고 생각합니다만, 때때로 클라이언트나 디자이너의 강압에 못이겨 어쩔 수 없이 디자인이나 css를 입혀야 할 경우가 발생합니다. 일단...
이미지 및 div 등등 페이드 인/아웃 (fade in/fade out)
Jquery Fade In.Fade Out이미지나 div 등을 페이드 인/아웃 효과를 줄 수 있습니다. 갤러리 리스트에 적용하면 좀 답답할 것 같고, 최신글 같은 곳에 사용하면 좋을 것 같군요. 과도한 사용은 사이트를 전체적으로 너무 어둡...
Sliding Jquery Menu
Sliding Jquery Menu간결한 효과가 마음에 듭니다. 말 그대로 슬라이딩이네요 ^-^ 바로가기 메뉴나 메인메뉴에 사용할 수 있을 것 같네요. 다운로드 : http://www.hv-designs.co.uk/tutorials/sliding_menu/sample.zip 미리보기 : http...
input text에 포커스 이동시 value 삭제 함수
CLEAR INPUT ON FOCUS FUNCTION input 필드에 포커스 이동시 value값을 지웠다가 나타냈다가 하는 함수 입니다. 로그인 폼이나 검색 폼 등등 여러곳에서 사용할 수 있겠지요. $(document).ready(function() { //attach ...
Sexy Drop Down Menu w/ jQuery & CSS
Sexy Drop Down Menu음... 메뉴 이름이 참 좋네요. 섹시 -_-; 드랍메뉴가 존재할 경우 화살표 아이콘을 클릭해야 메뉴가 나오는 형식입니다. 전 이 형식이 불편해서 그냥 메뉴에 마우스 오버하면 바로 드랍되게 바꿔서 사용하...
this를 사용한 초간단 롤오버 이미지
this를 사용해서 정말 간단하게 롤오버 이미지를 만들수가 있네요. - jQuery $(function() { $("#menu img").hover(function() { $(this).attr("src", $(this).attr("src").split(".").join("-hover.")); }, function() { $(this).attr("src", ...
컨텐츠+이미지 슬라이드쇼 2가지
컨텐츠+이미지 슬라이드쇼 2가지를 소개합니다.1. jQuery Slideshow Explained 바로가기 : http://www.devirtuoso.com/2009/08/jquery-slideshow-explained/ 데모보기 : http://www.devirtuoso.com/Examples/Slide-Show/ 2. Making a Slide...
슬라이딩 하는 박스와 캡션
Sliding Boxes and Captions with jQuery아주 간단하면서 멋진 슬라이딩 애니메이션 효과를 낼 수 있네요. ^-^ jQuery 코드도 간단하기 때문에 다양한 곳에 응용이 가능할 것 같습니다. 데모보기 : https://buildinternet.s3...
modal window를 만들어 봅시다.
일반적으로 플러그인으로 나와 있는 라이트박스를 많이 사용합니다. 플러그인을 가져다 붙이기에는 좀 거시기할 때, 간단하게 사용할 수 있는 심플한 modal window 코드를 소개합니다. - HTML <p><a class='activate_modal' name='...
정말 심플한 이미지 뷰어 [5]
Simple Image Viewer정말 심플한 이미지 뷰어 입니다. 디자인이야 자유롭게 변경해서 사용하면 될 것 같구요. 슬라이드업 효과때문에 그런지 갤러리보다는 제품이미지 등에 어울릴 것 같군요. Step 1: Create the Mark-up <div ...
pngFix.js (IE5.5~6에서 PNG이미지를 투명처리)
IE5.5~6에서는 PNG이미지의 투명처리를 못하죠. 크로스브라우징 목록에 IE6이 포함되어 있으며, 디자인상 png이미지의 사용이 가장 효율적일 때. 사이트 개발시 jQuery를 사용하고 있다면 pngFix.js로 간단히 해결할 수 있습니다....
배경 이미지 애니메이션 효과 - 메뉴등에 쓰면 좋을 듯
배경 이미지 애니메이션 효과 입니다. 메뉴 등에 사용하면 괜찮을 것 같네요. 이미지에 따라서 다양한 효과를 낼 수 있겠네요. 문제는 창의력 -_-;;; 튜토리얼 : http://snook.ca/archives/javascript/jquery-bg-image-animations/ 미리보기...
라이트 박스(lightbox) - ColorBox
여러 jQuery 라이트 박스 중 다양한 효과와 디자인 스타일을 제공하고 있는 ColorBox 입니다. 꾸준히 업데이트 되고 있기 때문에 버그도 거의 없습니다. 다운로드 및 데모, 설명 : http://colorpowered.com/colorbox/
.toggle() 이벤트 정리
.toggle() .toggle() 은 어떤 경우에 사용하면 좋을까? 여러 경우가 있겠지만, 레이어의 디스플레이 제어에 가장 많이 사용하지 않을까 생각됩니다. 1. 디스플레이 제어 - jQuery $("a.toggleLink").click(function () { $(".layerBox"...
심플한 롤오버 이미지
Easy Image Rollover Script With jQuery jQuery Code $(document).ready( function() { PEPS.rollover.init(); }); PEPS = {}; PEPS.rollover = { init: function() { this.preload(); $(".ro").hover( function () {...
마우스 오버시 썸네일 이미지 줌효과와 제목 보여주기 [2]
jQuery Thumbnail with Zooming Image and Fading Caption Tutorial 마우스 오버시 썸네일 이미지 줌효과와 제목을 페이딩 합니다. 깔끔하게 갤러리 리스트나 최신글 썸네일 리스트에 사용하면 좋을 것 같군요. 다운로드 : h...
베이직한 세로 Drodown Menu
베이직한 세로 Drodown Menu 입니다. 코드도 간단해서 사용하기 편합니다. jQuery와 일반 javascript 두가지 모두 들어 있네요. jQuery를 사용하지 않으실 경우엔 javascript로 사용하시면~ ^-^ 미리보기 : http://designreviver.c...
드래그 쿠키 레이어 팝업
드래그 쿠키 레이어 팝업 <script type="text/javascript" src="http://vozzang.net/vzscript/js/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://vozzang.net/vzscript/js/jquery/ui/jquery-ui-1.7.2.custom.drag.js"></sc...
로그인 유지
보짱
