나의 코딩 기록

코딩을 기록하는 공간

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

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

2023. 1. 28.

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

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 같은 버튼을 눌러보세요. 그러면 화면에 절반에 코드가 ..

2023. 1. 28.

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

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', {..

2023. 1. 28.

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

See the Pen [JavaScript] 스크롤에 따른 페이지 메뉴 활성화 (Scroll Menu Active) by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 스크롤에 따라 메뉴 표시하기 (Javascript Scroll Menu Active) 코드펜 예제입니다.이 기능을 구현할때 halfHeight 라는 변수 (스크린 높이를 2로 나눠줌) 를 선언하여 화면 높이의 절반을 넘어갈때,해당하는 메뉴가 활성화 되도록 제작하였습니다. (해당 변수로 아래에서 계산할때 넣어줌) 그리고 화면이 리사이즈 될때 높이가 달라질 수 있기에 특정 변수들을 다시 지정해줌으로써 다시 계산되도록 하였습니다.나머지는 코드를 천천히 보시면 이해가 되실텐데 한가지 특징은 유사배열을 배열로 바꿔..

2023. 1. 27.

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

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();..

2023. 1. 27.

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

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를 미리 넣어두었습니다. 게시글에 첨부된 코드펜으로는 스크롤을 내릴때 페이지 스크롤도..

2023. 1. 27.

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

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

2023. 1. 27.

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

See the Pen 자바스크립트 따라다니는 우측 메뉴 [JavaScript & jQuery] by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 따라다니는 우측 메뉴 [JavaScript & jQuery] 코드펜 소스코드 예제입니다. 이전에 올린 sticky와 약간 비슷한 느낌인데 그건 positon 을 fix로 해주다가 특정 영역 넘어가면 absolute로 바꿔주면서 top 값을 바꿔주는 형태로 고정시켰는데 이건 animate 를 이용해 애니메이션을 넣어주면서 따라다니는 효과를 줘야하기에 스크립트를 다르게 적용해주었습니다. 이거도 자바스크립트 코드 자체가 어려운 느낌은 아니어서 아래 코드를 보시면 이해하실 수 있을거에요 :) console.clear(); let box..

2023. 1. 26.

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

See the Pen Sticky 기능(자바스크립트) 자체 커스텀 코드 by kimyangsun (@kimyangsun) on CodePen. 자바스크립트 Sticky 기능 구현 예제 [Javascript & jQuery] 코드펜 소스코드 입니다. 해당 기능을 구현할때 다른 쉬운 코드들이 있을수도 있겠지만 저 나름대로 최대한 간단하게 짜본 코드입니다. 변수로 지정된 요소들과 if 문을 잘 살펴보시면 이해하기 편하실거에요 :) $(window).on('scroll', function(){ const PADDING = 20; // 스티키 박스가 고정될 때 위아래 간격 let scrollTop = $(this).scrollTop(); //console.log('윈도우의 scrollTop : ' + scroll..

2023. 1. 26.