티스토리

나의 코딩 기록

검색하기

블로그 홈

나의 코딩 기록

kimyang-sun.tistory.com/m

코딩을 기록하는 공간

구독자: 17

방명록 방문하기

주요 글 목록

자바스크립트 전광판 기능 - Marquee 효과 커스텀 (Vanilla JS Marquee) 자바스크립트 전광판 기능 - Marquee 효과 커스텀 (Vanilla JS Marquee) 예제입니다. 함수로 짜서 파라미터에 인자를 넣어서 사용할 수 있도록 만들었습니다. See the Pen 바닐라 자바스크립트 Marquee 효과 (Vanilla JS Marquee) by kimyangsun (@kimyangsun) on CodePen. // Marquee 커스텀 함수 : 파라미터는 (선택자, 속도, 방향전환 여부) function Marquee(selector, speed, reverse) { const parentSelector = document.querySelector(selector); // 클래스명을 인자로 받은 매개변수 const clone = parentSelector.innerHTM.. 공감수 0 댓글수 0 2023. 8. 8.
바닐라 자바스크립트 D-day 계산 (Vanilla JS D-day) 바닐라 자바스크립트 D-day 계산 (Vanilla JS D-day) 코드입니다. 자세한 코드는 하단의 코드펜 소스로 확인하시면 됩니다. :) See the Pen 바닐라 자바스크립트 D-day 계산 (Vanilla JS D-day) by kimyangsun (@kimyangsun) on CodePen. 공감수 0 댓글수 0 2023. 8. 8.
스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) ) 스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) ) 입니다.스크롤트리거는 정말 자주 쓰이는데 그때 부드러운 스크롤 효과와 함께 사용할 경우 locomotive-scroll.js 와 함께 사용하면 편합니다.하단에 스크롤트리거를 이용한 애니메이션 예제와 부드러운 스크롤 효과를 함께준 코드가 있습니다. :)https://codepen.io/kimyangsun/pen/eYQoMLx 스크롤트리거 예제 + 부드러운 스크롤 (ScrollTrigger Smooth Scroll (locomotive-scroll) )...codepen.io 자바스크립트 코드"use strict";gsap.registerPlugin(ScrollTrigger);w.. 공감수 0 댓글수 0 2023. 8. 8.
(자바스크립트) input type text 휴대전화 번호 양식, 날짜 양식에 맞게 입력되는 텍스트 입력창 기능 input type text 휴대전화 번호 양식, 날짜 양식에 맞게 작성하는 스크립트 입니다. 생각보다 필요한 상황이 종종 있어서 작성해둡니다. 정규표현식으로 숫자 외에 다른 문자, 글자들을 입력시 제거하는 코드를 넣었고, 각각에 올바른 위치에 - (하이픈, 대시)를 추가하는 코드, 마지막으로 입려값을 업데이트하는 코드를 넣었습니다. 자세한 코드는 아래 코드펜에서 확인 가능합니다. See the Pen input type text 휴대전화 번호 양식, 날짜 양식에 맞게 작성하는 스크립트 by kimyangsun (@kimyangsun) on CodePen. 공감수 0 댓글수 0 2023. 8. 7.
바닐라 자바스크립트 header gnb 탑메뉴 예제 3개 (PC & 모바일) 보통 웹사이트에서 자주 사용하는 3가지 타입의 상단 헤더 기능입니다. 저번에 제이쿼리를 이용해서 만든 코드를 업로드했는데, 상황에 따라 제이쿼리 없이 자바스크립트 만으로도 작업이 필요한 경우가 있는 경우도 많아 만들어 봤습니다. :) 예제 1 See the Pen 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) with Vanilla JS by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/WNaOyKJ 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다. 탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 .. 공감수 0 댓글수 0 2023. 5. 2.
자바스크립트 Input type File 파일명, 확장자만 나오게 커스텀 See the Pen 자바스크립트 Input type File 파일명, 확장자만 나오게 커스텀 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 Input type File 파일명, 확장자만 나오게 커스텀한 코드 예제입니다. 파일 업로드를 누르면 파일을 첨부하는 창이 뜨고 파일을 선택하고 업로드시 파일명과 확장자까지만 표시되도록 작업한 코드입니다. 일반적인 input type="file"은 현재 파일의 경로까지 쭉 보여지는데 때에 따라서 파일명과 확장자만 표시되도록 하고 싶을때 사용하면 될 것 같습니다. :) ▶HTML 파일업로드 ▶CSS input { -webkit-border-radius: 0; border-radius: 0; -webkit-appearance: no.. 공감수 0 댓글수 0 2023. 3. 29.
자바스크립트 제이쿼리 셀렉트 박스 드롭다운 기능 (Javascript Selectbox Dropdown) See the Pen 자바스크립트 셀렉트박스 드롭다운 기능 (Javascript Selectbox Dropdown) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 셀렉트 박스 드롭다운 기능 (Javascript Selectbox Dropdown) 퍼블리싱 소스입니다. 보통 셀렉트 박스를 css로만 커스텀하기에는 한계가 있습니다. 그래서 자바스크립트로 저런식으로 작업하는 경우가 많아요. 추가로 드롭다운 열리고 드롭다운 메뉴가 아닌 다른곳을 클릭했을때 드롭다운이 닫히는 기능도 넣어뒀습니다. 코드펜으로 살펴보시면 이해가 빠르게 되실거라 생각해요. :) // 드롭다운 (공통) let dropdownLabel = $('.dropdown .dropdown-label').. 공감수 0 댓글수 0 2023. 2. 16.
자바스크립트 제이쿼리 header gnb 탑메뉴 예제 3 (PC & 모바일) See the Pen 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/YzjJgLL 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) ... codepen.io 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) 코드펜 소스입니다. 저번에 두번째 예제까지 올리고 나서 생각해보니까 또 다른 자주 쓰이는 방식을 깜빡해서 예제 샘플을 하나 더 만들었습니다 :) 예제 1 처럼 2차 메뉴까지 보여주는데 이건 한번에 보여주는게 아닌 각각 해당하는 1차 메뉴에 대한 2차 메뉴만 보여주는 방식입니다. "use strict"; // 헤더.. 공감수 0 댓글수 1 2023. 2. 1.
자바스크립트 제이쿼리 header gnb 탑메뉴 예제 2 (PC & 모바일) See the Pen header gnb 탑메뉴 예제 2 (자체 커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/XWZdPbL 자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) ... codepen.io 자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) 코드펜 소스코드입니다. 이것도 탑메뉴 중에서 자주 쓰이는 형태중 하나입니다. 이건 3차메뉴까지 존재하는 경우인데 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다. 물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성) 이 형태는 3차메뉴까지 보여줘야 하기에 반응형 1240px 에서.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 제이쿼리 header gnb 탑메뉴 예제 1 (PC & 모바일) See the Pen header gnb 탑메뉴 예제 1 (자체 커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. https://codepen.io/kimyangsun/pen/BaYKPXm 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) ... codepen.io 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다. 탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다. 물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성) 모바일 메뉴도 작업해뒀기에 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 제이쿼리 video 태그 동영상 재생 정지 상호작용 버튼 기능 See the Pen video tag 동영상 재생 정지 상호작용 버튼 기능 (영상 여러개 적용 가능) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 video 태그 동영상 재생 정지 상호작용 버튼 기능 코드펜 예제 소스코드입니다. 실무에서 작업하면서 이 기능은 기록해두는게 좋을거 같아서 저장해둔 소스인데 블로그에 올립니다. :) // 메타버스 콘텐츠 비디오 재생, 정지 let videoBox = $('.video-box'); let video = videoBox.find('video'); $('.video-box .video-buttons .play-button').on('click', function(){ var targetVideoBox = $(this.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 제이쿼리 모바일 사이드 메뉴 예제 (jQuery Mobile Sidebar) See the Pen 모바일 사이드 바 예제 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 모바일 사이드 메뉴 예제 (jQuery Mobile Sidebar) 코드펜 소스코드 입니다. 제가 옛날에 퍼블리싱 공부를 시작할때 차근차근 만들어본 모바일 메뉴 기능인데 오랜만에 이 코드들을 보니까 예전에 공부할때 생각이 나면서, 예전 코드들을 보니까 고쳐줘야할 부분들이 막 보이고 그러는거 같아요 ㅋㅋㅋ 사이드 메뉴 안에는 3차메뉴까지 모두 열리도록 작업이 되어 있습니다. 또 예전에 공부할때 짠 코드라 그런가 주석으로 자세하게 설명을 적어가면서 작업한게 보이네요. 요새는 이렇게까지 자세하게 주석을 남기진 않는거같아요... 초심을 찾아야 할 거 같습니다.. :) /* 토.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 제이쿼리 beforeAfter 이미지 slide 기능 예제 자바스크립트 제이쿼리 beforeAfter 이미지 slide 기능 예제 코드펜 소스코드입니다. 작업시 이러한 기능을 사용하는 페이지가 종종 들어오는데 그럴때 사용하면 유용합니다. See the Pen 자바스크립트 제이쿼리 beforeAfter 이미지 slide 기능 예제 by kimyangsun (@kimyangsun) on CodePen. 공감수 0 댓글수 0 2023. 1. 28.
jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시) See the Pen jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시) by kimyangsun (@kimyangsun) on CodePen. jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시) 코드펜 소스코드입니다. input에 날짜를 표시하는 자바스크립트 제이쿼리 플러그인중에 가장 많이 쓰인다는 두가지를 각각 사용한 예제입니다. 각각 장단점이 있는거 같은데 기능은 비슷하니까 둘중 선택해서 사용하시면 좋을 거 같습니다. :) // 제이쿼리 datetimepicker $(function(){ $.datetimepicker.setLocale('kr'); $('.datetimepicker'.. 공감수 0 댓글수 2 2023. 1. 28.
자바스크립트 제이쿼리 아코디언 메뉴 기능 예제 (JavaScript & jQuery Accordion menu) See the Pen 아코디언 메뉴 자바스크립트 (커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 아코디언 메뉴 기능 예제 (JavaScript & jQuery Accordion menu) 코드펜 소스코드입니다. 여기서 특이한 점은 자바스크립트 코드를 보면 위에 있는 코드와 아래 주석해둔 코드가 있는데 내용은 똑같습니다. 차이점은 페이지 로드 후에 동적으로 아코디언 메뉴가 생성되는 경우에, 위에 있는 코드 대신 사용하는 코드입니다. (ex : 페이지 로드 후에 어떤 상호작용을 통해 데이터에서 새로운 아코디언 메뉴가 생성되는 경우 등..) // 아코디언 메뉴 (어떤 곳에서든 클래스명만 맞춰서 추가로 넣어주면 전부 적용됨 - 응용 편함) $(func.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 제이쿼리 탭 메뉴 기능 (JavaScript & jQuery Tab menu) See the Pen 탭 메뉴 자바스크립트 (커스텀 코드) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 탭 메뉴 기능 예제 (JavaScript & jQuery Tab menu) 코드펜 소스코드입니다. html 구조와 data-num을 맞춰주고 탭버튼 ul에 tab-js를 넣고 tab-item, tab-contents, tab-inner 등 클래스만 맞춰주면 여러개를 사용하거나 탭 안에 다시 탭을 넣어도 전부 작동합니다. 여기서 특이한 점은 자바스크립트 코드를 보면 위에 있는 코드와 아래 주석해둔 코드가 있는데 내용은 똑같습니다. 차이점은 페이지 로드 후에 동적으로 탭이 생성되는 경우에, 위에 있는 코드 대신 사용하는 코드입니다. (ex : 페이지 로드 후.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 제이쿼리 슬라이더 - 마우스 휠 스크롤 기능 (JavaScript & jQuery Slider - mouse wheel scroll) See the Pen 자바스크립트 제이쿼리 자체제작 마우스 휠 슬라이드 심화 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 슬라이더 - 마우스 휠 스크롤 기능 (JavaScript & jQuery Slider - mouse wheel scroll) 코드펜 예제입니다. 화면을 스크롤 하면 슬라이더 콘텐츠가 나오는데 콘텐츠 안에 마우스를 갖다 대고 마우스 휠 스크롤을 하면 하나씩 넘어가게 됩니다. 다 넘어가면 페이지 전체 스크롤이 다시 넘어가는 형태입니다. :) /* 전역변수 */ // 페이지들 var Page__$pages; // 페이지 개수 var Page__pagesCount; /* 초기화 함수들 */ // 페이지 관련 요소들을 초기화 한다. functio.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 제이쿼리 세로 슬라이더 예제 (JavaScript & jQuery Vertical Slider) See the Pen 세로 슬라이드 자체 제작 코드 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 제이쿼리 세로 슬라이더 예제 (JavaScript & jQuery Vertical Slider) 코드펜 소스코드입니다. $('.slider-box-1 > .side-btns > div').click(function() { var $this = $(this); var isUp = $this.index() == 0; var $slider = $this.closest('.slider-box-1'); if ( $slider.attr('data-slider-box-1-now-work') === 'Y' ) { return; } $slider.attr('data-slider-box-.. 공감수 0 댓글수 0 2023. 1. 28.
Swiper 슬라이드 자동재생 무한 롤링 (Swiper slider autoplay infinite rolling) See the Pen Swiper 슬라이드 자동 무한 롤링 (Swiper slide infinite rolling) by kimyangsun (@kimyangsun) on CodePen. Swiper 슬라이드 자동재생 무한 롤링 (Swiper slider autoplay infinite rolling) 코드펜 예제 소스코드입니다. 자동으로 넘어가는 컨베이어 효과인데 swiper 슬라이드에서 autoplay 를 설정해두고 css에서 transition-timing-function 값을 조정해줘서 계속해서 롤링되는 효과를 구현했습니다. swiper에 적용해준 css 코드 .swiper-container {position: relative; margin: 30px 20px; overflow: hidden;} .. 공감수 0 댓글수 0 2023. 1. 28.
Swiper 슬라이드 반응형 - 리사이즈시 화면 크기에 따라 적용 & 해제(swiper slider responsive resize) See the Pen Swiper 슬라이드 리사이즈시 화면 크기에 따라 적용 & 해제 (swiper slide responsive resize) by kimyangsun (@kimyangsun) on CodePen. Swiper 슬라이드 반응형 - 리사이즈시 화면 크기에 따라 적용 & 해제(swiper slider responsive resize) 코드펜 예제입니다. 현재 pc로 이 화면을 보시는 분들에게는 위에 코드펜 미리보기에 swiper 슬라이드가 적용되지 않는 상태일겁니다. 왜냐하면 화면 사이즈가 600 이하일때 swiper가 적용되도록 스크립트로 적용해둔 상태이기 때문이죠. 이제 위에 코드펜 미리보기에서 좌측 상단에 HTML, CSS, JS 같은 버튼을 눌러보세요. 그러면 화면에 절반에 코드가 .. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 Swiper 슬라이더 - Swiper Slider Thumbs Gallery centerSlides See the Pen Swiper 슬라이드 - Thumbs Gallery centerSlides 적용 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 Swiper 슬라이더 - Swiper Slider Thumbs Gallery centerSlides 코드펜 예제입니다. var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, loopedSlides: 3, }); var galleryThumbs = new Swiper('.gallery-thumbs', {.. 공감수 0 댓글수 0 2023. 1. 28.
자바스크립트 스크롤에 따라 메뉴 표시하기 (Javascript Scroll Menu Active) See the Pen [JavaScript] 스크롤에 따른 페이지 메뉴 활성화 (Scroll Menu Active) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 스크롤에 따라 메뉴 표시하기 (Javascript Scroll Menu Active) 코드펜 예제입니다.이 기능을 구현할때 halfHeight 라는 변수 (스크린 높이를 2로 나눠줌) 를 선언하여 화면 높이의 절반을 넘어갈때,해당하는 메뉴가 활성화 되도록 제작하였습니다. (해당 변수로 아래에서 계산할때 넣어줌) 그리고 화면이 리사이즈 될때 높이가 달라질 수 있기에 특정 변수들을 다시 지정해줌으로써 다시 계산되도록 하였습니다.나머지는 코드를 천천히 보시면 이해가 되실텐데 한가지 특징은 유사배열을 배열로 바꿔.. 공감수 0 댓글수 0 2023. 1. 27.
자바스크립트 스크롤 게이지 프로그레스바 (Scroll Gauge Progressbar) See the Pen 스크롤 게이지 표시 (Scroll Indicator gauge) by kimyangsun (@kimyangsun) on CodePen. 바닐라 자바스크립트 스크롤 게이지 프로그레스바 (Scroll Gauge Progressbar) 구현 예제입니다. 스크롤 정도에 따라서 화면 상단에 게이지바가 나타납니다. 현재 제 블로그에 적용되어있는 코드랑 같습니다. :) window.addEventListener('DOMContentLoaded', function(){ // 스크롤 이벤트 처리 window.addEventListener("scroll", function(event){ if(document.querySelector('.progressbar') != null)setProgress();.. 공감수 0 댓글수 0 2023. 1. 27.
[fullpage.js 2.9.7] 자바스크립트 원페이지 스크롤 예시, 애니메이션 (fullpage.js animation) See the Pen [fullpage.js 2.9.7] 원페이지 스크롤 예시 (2 버전은 무료, 3 버전부터 유료 라이센스) by kimyangsun (@kimyangsun) on CodePen. [fullpage.js 2.9.7] 자바스크립트 원페이지 스크롤 예시 (fullpage.js animation) 코드펜 소스 코드입니다. 원페이지 스크롤 기능 중에 제 개인적인 생각으로 가장 다양한 기능을 구현할 수 있는게 fullpage.js 같아요 사용할때 주의하실 점은 2 버전 까지는 무료이고 3 버전부터 유료 라이센스라고 하네요 ㅎ.ㅎ 위에 코드펜 링크에 콘솔로 여러가지 확인하면서 작업하기 편하도록 console.log를 미리 넣어두었습니다. 게시글에 첨부된 코드펜으로는 스크롤을 내릴때 페이지 스크롤도.. 공감수 0 댓글수 0 2023. 1. 27.
자바스크립트 스크롤리파이 애니메이션 예제 (Scrollify Animation) See the Pen 자바스크립트 스크롤리파이 애니메이션 예제 (Scrollify Animation) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 스크롤리파이 애니메이션 예제 (Scrollify Animation) 입니다. 코드펜 소스 코드로 자세히 보실 수 있으며 3페이지에서 4페이지로 넘어갈땐 핸드폰도 같이 움직이도록 구현된 예제입니다. 게시글 페이지에선 스크롤 내릴때 화면도 같이 내려가서 링크를 통해 새창으로 확인하시는게 더 좋을거 같아요. https://codepen.io/kimyangsun/pen/VwYOWry 자바스크립트 스크롤리파이 애니메이션 예제 (Scrollify Animation) ... codepen.io 원페이지 스크롤 기능을 pageable,.. 공감수 0 댓글수 0 2023. 1. 27.
자바스크립트 따라다니는 퀵메뉴 기능 [JavaScript & jQuery] See the Pen 자바스크립트 따라다니는 우측 메뉴 [JavaScript & jQuery] by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 따라다니는 우측 메뉴 [JavaScript & jQuery] 코드펜 소스코드 예제입니다. 이전에 올린 sticky와 약간 비슷한 느낌인데 그건 positon 을 fix로 해주다가 특정 영역 넘어가면 absolute로 바꿔주면서 top 값을 바꿔주는 형태로 고정시켰는데 이건 animate 를 이용해 애니메이션을 넣어주면서 따라다니는 효과를 줘야하기에 스크립트를 다르게 적용해주었습니다. 이거도 자바스크립트 코드 자체가 어려운 느낌은 아니어서 아래 코드를 보시면 이해하실 수 있을거에요 :) console.clear(); let box.. 공감수 0 댓글수 0 2023. 1. 26.
자바스크립트 Sticky 기능 구현 예제 [Javascript & jQuery] See the Pen Sticky 기능(자바스크립트) 자체 커스텀 코드 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 Sticky 기능 구현 예제 [Javascript & jQuery] 코드펜 소스코드 입니다.해당 기능을 구현할때 다른 쉬운 코드들이 있을수도 있겠지만 저 나름대로 최대한 간단하게 짜본 코드입니다.변수로 지정된 요소들과 if 문을 잘 살펴보시면 이해하기 편하실거에요 :)바닐라 자바스크립트 코드와 제이쿼리로 작업하시는 분들을 위해서 제이쿼리 코드도 같이 올립니다 ㅎ.ㅎ /* 바닐라 자바스크립트 */window.addEventListener('scroll', function() { const PADDING = 20; // 스티키 박스가 고정될 때 공백 .. 공감수 0 댓글수 0 2023. 1. 26.
[Javascript & jQuery] 스크롤이 요소 끝에 닿을 경우 계산 (가로, 세로) 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.. 공감수 0 댓글수 0 2023. 1. 26.
jQuery NiceScroll 스크롤바 커스텀 예제 (Scrollbar Custom) 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.. 공감수 0 댓글수 0 2023. 1. 26.
제이쿼리 커스텀 스크롤바 사용 예제 - jQuery Custom Scrollbar (mCustomScrollbar) See the Pen 제이쿼리 커스텀 스크롤바 사용 예제 - jQuery Custom Scrollbar (mCustomScrollbar) by kimyangsun (@kimyangsun) on CodePen. 제이쿼리 커스텀 스크롤바 사용 예제 - jQuery mCustomScrollbar (Custom Scrollbar) 코드펜 소스 코드입니다. 스크롤바를 커스텀하기 쉽도록 해주는 플러그인인데 스크롤바의 속도를 부드럽게 조정도 가능하도록 해줍니다. 비슷한 플러그인으로 jQuery NiceScroll 이 있는데 그건 다음 게시글에서 사용 예제를 올리도록 하겠습니다. :) 공감수 0 댓글수 0 2023. 1. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.