나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen 스크롤이 요소 끝에 닿을 경우 계산 (가로, 세로) by kimyangsun (@kimyangsun) on CodePen. 스크롤이 요소 끝에 닿을 경우 계산 (가로, 세로) 코드펜 소스코드 예제입니다. 각각 박스별로 콘솔로 상태값을 확인할 수 있도록 console.log를 찍어뒀으니 콘솔창을 보며 확인하시면 됩니다. :) let container = $('.container'); let HorizontaContainer = $('.container-hr'); container.on('scroll', function(){ let scrollTop = $(this).scrollTop(); let innerHeight = $(this).innerHeight(); let totalHeig..

2023. 1. 26.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen jQuery NiceScroll 예제 커스텀 by kimyangsun (@kimyangsun) on CodePen. jQuery NiceScroll 스크롤바 커스텀 예제 (Scrollbar Custom) 코드펜 소스 코드입니다. 이전에 올린 jQuery mCustomScrollbar 플러그인이랑 비슷한 기능의 jQuery NiceScroll 인데 저는 nicescroll이 더 쓰기 편하더라구요. 커스텀 기능들도 더 많은거 같습니다. 아래는 nicescroll 깃허브 페이지인데, 여기서 사용 기능들을 확인할 수 있습니다. :) https://github.com/inuyaksa/jquery.nicescroll GitHub - inuyaksa/jquery.nicescroll: nicesc..

2023. 1. 26.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen 제이쿼리 커스텀 스크롤바 사용 예제 - jQuery Custom Scrollbar (mCustomScrollbar) by kimyangsun (@kimyangsun) on CodePen. 제이쿼리 커스텀 스크롤바 사용 예제 - jQuery mCustomScrollbar (Custom Scrollbar) 코드펜 소스 코드입니다. 스크롤바를 커스텀하기 쉽도록 해주는 플러그인인데 스크롤바의 속도를 부드럽게 조정도 가능하도록 해줍니다. 비슷한 플러그인으로 jQuery NiceScroll 이 있는데 그건 다음 게시글에서 사용 예제를 올리도록 하겠습니다. :)

2023. 1. 26.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen Slick 슬라이드 필터 (Slick slider filter) by kimyangsun (@kimyangsun) on CodePen. Slick 슬라이드 카테고리 필터 기능 (Slick slide category filter) 코드펜 예제입니다. html 에서 data-filter 값을 넣어주고 자바스크립트에서 그걸 이용해서 slick filter를 적용해줍니다. 스크립트 코드를 보면 바로 이해 가능하실거에요 ㅎ.ㅎ 아래는 js 코드 한번 더 첨부합니다. $(function() { $(".slider").slick({ slidesToShow: 4, slidesToScroll: 1, arrows: true, }); $(".filter li").on('click', function()..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen slick 슬라이드 / centerMode 예제 v2 by kimyangsun (@kimyangsun) on CodePen. 예전에 ovio 사이트를 만들어보면서 slick slide centerMode 관련해서 남겨둔 코드를 발견해서 올립니다 ㅎㅎ

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen Slick 슬라이드 페이지 버튼을 해당 이미지 사진으로 (slick customPaging images) by kimyangsun (@kimyangsun) on CodePen. Slick 슬라이드 페이지 버튼을 해당 이미지 사진으로 적용한 코드펜 예제입니다. (slick customPaging images) customPaging 을 통해 커스텀 하였습니다. 아래는 js 코드입니다 :) $('.slider').slick({ dots:true, prevArrow: '', nextArrow: '', customPaging: function(slick, index) { var targetImage = slick.$slides.eq(index).find('img').attr('src'); ..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen slisk 슬라이드 세로 네비게이션 (Slick Slider Vertical asNavFor) by kimyangsun (@kimyangsun) on CodePen. slisk 슬라이드 세로 네비게이션 (Slick Slider Vertical asNavFor) 코드펜 예제 코드입니다. 아래는 js 코드입니다. $('.slider-main').slick({ slidesToShow: 1, arrows: false, asNavFor: '.slider-nav', vertical: true, autoplay: true, verticalSwiping: true, centerMode: true }); $('.slider-nav').slick({ slidesToShow: 4, asNavFor: '..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen Slick Slide 슬라이드 페이지 표시 by kimyangsun (@kimyangsun) on CodePen. Slick Slide 슬라이드 페이지가 표시되는 기능커스텀 코드펜 코드입니다.아래는 js 코드입니다. :)/* 슬라이드가 넘어간 후에 페이지 카운팅 */// $(function(){// // 슬라이드// let slide = $('.slide');// let currentSlide;// let slidesCount;// let currentCount = $('.slide-count .current');// let totalCount = $('.slide-count .total');// let updateSlideCoun..

2023. 1. 25.

코딩 기록/코딩 소스 [HTML & CSS & JS]

See the Pen slick 예제2 - slick slider go to slide example by kimyangsun (@kimyangsun) on CodePen. slick 슬라이드 예제 (asNavFor & slickGoTo) 코드펜 커스텀 코드입니다. 슬라이드를 연결하는 asNavFor, 해당 슬라이드로 이동하는 slickGoTo 를 연결해놓은 소스입니다. 코드펜을 눌러 상세하게 볼 수 있습니다. :)

2023. 1. 25.