바보상자의 코딩박스

기본 마크업 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 /*!..

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.위 사이트로 접속해서 다운로..

기초 다지기 마크업 오른쪽으로 넘어가는 스크롤 만들기

홀짝 13 3 14 7 22 38 17 15 11 10 22 31 32 41 10 85 17 82 70 5 53 7 4 29 짝수 홀수

00: 00: 00

나는 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); // }); 이부분을 해석하는 것을 조금 더 공부해야 겠다.

https://swiperjs.com/ Swiper Demos swiperjs.com 1. 위 주소로 들어가 가장 최신의 파일을 다운로드 하고 swiper.js / swiper.min / swiper.css / swiper.min.css를 가져왔다. 2. Default Setup > source code에서 스타일을 복사해왔다. Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10

https://swiperjs.com Swiper - Most Modern Mobile Touch Slider Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 다운로드 받은 후 데모를 활용하여 작업합니다.

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; }..

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: ..