분류 전체보기 78

스크롤 이벤트와 마우스휠이벤트로 풀페이지 만들기

기본 마크업 clova Friends clova Friends mini MINIONS edition Doraemon edition 원하는 프렌즈를 선택해보세요 Clova Friends 원하는 명령어를 선택하고, 프렌즈 미니의 답볍을 들어보세요 ClovaFriends mini 원하는 명령어를 선택하고, 미니언즈의 답변을 들어보세요. MINIONS edition 원하는 명령어를 선택하고, 도라에몽의 답변을 들어보세요. Doraemon edition 0 구글에 jquery-mousewheel을 검색하고 github에서 jquery.mousewheel.js을 가져온다. https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js /*!..

mCustomScrollbar 예쁜 스크롤바 스크립트로 사용하기

http://manos.malihu.gr/jquery-custom-content-scroller/ jQuery custom content scroller – malihu | web design Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQue manos.malihu.gr 1.위 사이트로 접속해서 다운로..

swiper:사용자가 제작한 네비게이션을 클릭하면 이미지 바뀌게하기

나는 mouseenter를 사용했는데 click을 사용해도 좋다. 등기구 등주 경관조명 태양광 실내조명 개인적으로 스크립트 부분이 해석이 되지 않는데 swiper.on('slideChange', function () { var i = swiper.activeIndex; $('.nav ul li').removeClass('on'); // $('.nav ul li').eq(i).addClass('on'); // }); $('.nav ul li').mouseenter(function(){ var idx = $(this).index() // swiper.slideTo(idx,1000,false); // }); 이부분을 해석하는 것을 조금 더 공부해야 겠다.

0926 마지막 수업_클릭하면 애니메이션 실행하기

DOCTYPE html> Document *{box-sizing: border-box;} body{height:100vh; background: url('img/main_bg.jpg'); background-size: cover; overflow: hidden;} .section1{width: 740px; height:325px; position: relative; left: 50%; top:50%; transform: translate(-50%,-50%);} .section1 img{width: 100%; display:none;} .section1 p{position: absolute; background: #000;} p.top{width: 0; height: 1px; left:0; top:0; }..

제이쿼리 애니메이션: callback을 이용해서 움직이는 선 박스 만들기

DOCTYPE html> Document *{box-sizing: border-box;} body{height:100vh;} .section1{width: 740px; position: relative; left: 50%; top:50%; transform: translate(-50%,-50%);} .section1 img{width: 100%; opacity:0;} .section1 p{position: absolute; background: #000;} p.top{width: ; height: 1px; left:0; top:0; } p.right{width: 1px; height: ; right:0; top:0;} p.bottom{width: ; height: 1px; right:0; bottom: ..

반응형