본문 바로가기
반응형

All137

[script] slick 슬라이드 visual 영역(arrow, dots) slick 슬라이드를 이용한 visual 영역 이미지 scale 축소되는 애니메이션효과. slick 슬라이드 next prev 버튼 - 옵션 arrows page 버튼 - 옵션 dots slick script 효과는 코드펜에서 찾아서 적용해봤습니다! $(document).ready(function(){ var $slick_carousel = $(".slide_wrap"); $slick_carousel.on('init', function(event, slick) { $(".slide_li").eq(0).addClass("active"); }); $slick_carousel.on('afterChange', function(event, slick, currentSlide){ $(".slide_li").remo.. 2020. 5. 9.
[script] 리스트 영역 클릭했을 때 넓어지는 효과 해당 영역 클릭 했을 때 영역 배경이 밝아지면서 width값 넓어지고, 하단 border, sub_txt 가 보여지는 효과. $(document).ready(function(){ $('.s1_slide > li').click(function(){ $(this).addClass('on'); $('.s1_slide > li').not(this).removeClass('on'); }); }); carina 티스토리 블로그 carina 클릭했을때 아래 아래 화살표 사라짐~~ carina border 왼 -> 오~~ carina 클릭했을때 가로 넓어지면서 배경색 opacity 조절해서 밝아짐~~ .s1_slide{width:100%; height:410px; box-sizing:border-box; } .s1_s.. 2020. 5. 7.
[gnb] gnb menu 스크립트 사용없이 마우스 오버 효과만으로 작동하는 sub_gnb menu 배경 효과. 메뉴에 마우스 올렸을 때 header부분 배경, gnb 글씨 색 변경 및 하단 sub_menu width:100% 배경이 생기고 상단 메뉴를 기준으로 하위메뉴가 정렬됨. GNB 메뉴1 서브메뉴1 서브메뉴2 메뉴2 서브메뉴3 서브메뉴4 서브메뉴5 메뉴3 서브메뉴6 서브메뉴7 서브메뉴8 서브메뉴9 서브메뉴10 메뉴4 서브메뉴11 서브메뉴12 메뉴5 .header{position:absolute; left:0; top:0; width:100%; height:100px; transition:all 0.5s; z-index:100;} .header:hover{background-color:#fff;} .header > h1{po.. 2020. 5. 6.
[script] 언어 선택 - 아래로 내려오는 리스트_toggle select 태그처럼 아래로 내려오게 하는 script 언어 선택 및 여러가지 리스트 스타일이 아래로 내려오는 fadeToggle 제이쿼리. 클릭했을때 배경 및 화살표 이미지가 바뀌면서 하위 리스트들이 보여짐. $(document).ready(function(){ $('.lang').click(function(){ $(this).toggleClass('on'); $(this).find('.sub_lang').fadeToggle(300); }); }); LANGUAGE KOR ENG JAP .lang{position:absolute; right:92px; top:30px; display:inline-block; width:140px; height:40px; border:1px solid #dfdfdf; b.. 2020. 5. 4.
[bxslider] bxslider를 이용한 슬라이드 $(document).ready(function(){ $('.sec3_list').bxSlider({ auto:true, pager: false, controls: true, autoControls: false, minSlides: 4, maxSlides: 4, moveSlides: 1, slideWidth: 285, slideMargin: 20, autoHover:true, prevText:"", nextText:"" }); }); 배너슬라이드 배너슬라이드 1 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 2 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 3 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 4 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 5 배너슬라이.. 2020. 5. 1.
[animation] 간단한 애니메이션 효과 .box{position:relative; width:260px; height:300px; background-color:orangered;/*background:url(이미지 주소) no-repeat;*/} .box:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); /*background:url(이미지 주소) no-repeat;*/ opacity:0; transition:0.5s all;} .box:after{content:"+"; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); .. 2020. 4. 30.
[script] gnb menu slideToggle $(document).ready(function(){ $(".gnb > li").hover(function(){ $(this).find(".sub_gnb").stop().slideToggle(); $("#header").stop().toggleClass('on'); }); }); menu1 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu2 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu3 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu4 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu5 sub_gnb1 sub_gnb2 sub_gnb3 sub_.. 2020. 4. 28.
[jquery] 이벤트 객체 - 포커스 이벤트 포커스 이벤트 focus() / blur() / focusin() / focusout() 이벤트 메서드 focus() 대상 요소로 포커스가 이동하면 이벤트를 발생. blur() 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생. focusin() 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생. focusout() 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생. focus / blur / focusin / focusout 기본형 1. focus() / blur() / focusin() / focusout() 이벤트 등록 $("이벤트 대상 선택").focus(function(){자바스크립트 코드;}); $("이벤트 대상 선택").on("focus.. 2020. 3. 31.
[jquery] 이벤트 객체와 종류 - scroll 이벤트 이벤트 객체 & 이벤트 종류 기본형 $("이벤트 대상 선택").mousemove(function(매개변수){ 매개변수(이벤트 객체).속성; }); 이벤트 객체의 속성 종류 구분 종류 설명 마우스 이벤트 clientX 마우스 포인터의 X좌푯값 반환 (스크롤 이동거리 무시) clientY 마우스 포인터의 Y좌푯값 반환 (스크롤 이동거리 무시) pageX 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌표값을 반환 pageY 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌표값을 반환 screenX 화면 모니터를 기준으로 마우스 포인터의 X 좌표값을 반환 screenY 화면 모니터를 기준으로 마우스 포인터의 Y 좌표값을 반환 layerX position을 적용한 요소를 기준으로 마우스 포.. 2020. 3. 29.
반응형

티스토리툴바