Lpla 개발 블로그

JavaScript/실전

[JavaScript] sketch.js로 마우스를 따라 다니는 파티클 효과 구현하기

sketch.js로 마우스를 따라 다니는 파티클 효과를 구현할 수 있다. 공식 사이트는 참고하면 좋고, 코드를 바로 사용하려면 아래 codepen에 있는 코드를 그대로 사용하면 된다. sketch.js 데모 사이트 sketch.js Parallax Mountains Excellent parallax effect from Jack Rugile, using the sketch.js 2d canvas soulwire.github.io 파티클 효과 데모 사이트 sketch.js » Basic Example soulwire.github.io See the Pen sketch.js Demo by lpla (@lpla) on CodePen. 실제 웹사이트에 적용할 때 sketch.js 스크립트를 추가하는 것은 필수다..

JavaScript/실전

[GSAP] 숫자 카운트 (ScrollTrigger)

GSAP로 숫자 카운트 효과를 만들 수 있다. 1. 해당 요소에 스크롤시 숫자 카운트 See the Pen [GSAP] count - onUpdate by lpla (@lpla) on CodePen. 2. 해당 요소에 스크롤시 숫자 카운트 & 숫자 초기화 See the Pen [GSAP] count - onUpdate & toggleActions by lpla (@lpla) on CodePen. 3. 해당 요소에 스크롤시 숫자 카운트 & 스크롤에 따른 숫자 변화 See the Pen [GSAP] count - onUpdate & scrub by lpla (@lpla) on CodePen. ------- 21.08.28 추가 ------- 4. 소수 자리 표현 See the Pen [GSAP] count ..

JavaScript/실전

[JavaScript] 절대 좌표, 상대 좌표 구하기

HTML CSS html, body { margin: 0; padding: 0; } .box { width: 500px; height: 500px; position: absolute; } .box1 { background-color: bisque; top: 1000px; left: 50%; transform: translateX(-50%); } .box2 { background-color: brown; top: 3000px; left: 50%; transform: translateX(-50%); } box1의 top은 페이지(문서) 기준으로 1000px이다. 하지만 내가 보고 있는 화면을 기준(viewport)으로 좌표를 측정한다면 0px이 될 수도 있고 -1000px이 될 수도 있다. 1. 상대 좌표 ..

JavaScript/실전

[JavaScript] resize 한 번만 실행

다음 코드를 살펴보자. 이전 시간에 다룬 코드를 그대로 가져온 것이다. [JavaScript/jQuery] 요소 추가, 삭제, 이동 반응형에 따라 요소의 위치를 바꾸려고 한다. css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다. 이 때 자바스크립트, 특히 제이쿼리의 도움 lpla.tistory.com 브라우저의 크기를 조절할 때 pcBox() 혹은 mobileBox() 함수가 실행되는 responsiveWidth() 함수이다. 그 결과 아래와 같은 기능을 수행한다. 하지만 브라우저의 크기가 1px이라도 변화가 있다면 즉시 resize 이벤트를 호출하게 되어 브라우저에 과부화를 일으킬 소지가 있다. 이는 콘솔로그를 찍어보면 더 극명하게 드러난다. 이렇게..

JavaScript/실전

[JavaScript] Swiper 예제 - 3D 입체 효과(coverflow)

Swiper의 effect: 'coverflow'를 사용하여 3D 입체 슬라이드를 만들 수 있다. HTML CSS .swiper-slide { width: 20%; margin-right: 10px; height: 200px; } .swiper-slide.slide01 { background-color: #BE5EC2; } .swiper-slide.slide02 { background-color: #F862A7; } .swiper-slide.slide03 { background-color: #FF7B87; } .swiper-slide.slide04 { background-color: #FFA26A; } .swiper-slide.slide05 { background-color: #FFCE5E; } .swi..

JavaScript/실전

[JavaScript] 계산기

이 글은 유튜브 ZeroCho ES2021 자바스크립트 강좌에 나온 내용을 기초로 작성했지만 다른 부분이 존재합니다. 1. HTML 마크업, CSS 추가 자바스크립트로 단순한 사칙연산 계산기를 만들어보겠다. 실제 계산기는 신경 써야 할 게 훨씬 많고 복잡하기 때문에 여기서는 다루지 않는다. 먼저 HTML과 CSS는 아래 내용을 그대로 복사한다. 7 8 9 + 4 5 6 - 1 2 3 / C 0 = X * { box-sizing: border-box; } #result { width: 180px; height: 50px; margin: 5px; text-align: right; } #operator { width: 50px; height: 50px; margin: 5px; text-align: center..

JavaScript/실전

[JavaScript] Swiper 예제 - 마우스오버시 일시정지

Swiper에서 autoplay 파라미터를 사용하여 자동재생 기능을 활성화할 수 있다. const swiper = new Swiper('.swiper-container', { autoplay: true, }); autoplay: true로 3초 마다 자동재생되는 슬라이드를 만들 수 있지만 그다지 추천하는 방법은 아니고 delay와 disableOnInteraction: false 로 세부 옵션을 추가하는 것이 좋다. const swiper = new Swiper('.swiper-container', { autoplay: { delay: 2000, disableOnInteraction: false, }, }); delay는 자동 재생 시간으로 유명하니 넘어가고 disableOnInteraction은 기본값..

JavaScript/실전

[GSAP] 예제 - Pin과 timeline으로 요소 등장

GSAP ScrollTrigger의 Pin과 timeline을 사용하여 효과를 구현하고자 한다. 어떤 지점에 도달하면 스크롤 하더라도 배경은 유지된 채, 수평 방향에서 요소가 등장하는 효과다. 배경을 유지하는 것은 pin, 요소가 등장하는 것은 timeline으로 구현할 수 있다. 최종 결과물 1. 준비 head에 GSAP와 ScrollTrigger를 추가하고 하단에 자바스크립트 외부 파일을 추가했다. 2. HTML, CSS section1 section2 1 2 3 section3 section4 body에 section 요소 4개를 추가했다. 여기서 화면이 고정될 요소는 section2다. 즉 pin을 section2에 부여할 것이다. 그리고 pin이 유지되는 동안 서서히 나타나게 될 요소들은 box..

JavaScript/실전

[JavaScript] Datepicker 사용법(설치, 한글, 스킨)

1. 준비 jQuery는 Datepicker라는 날짜 선택창을 지원한다. Datepicker를 사용하기 위해서는 jQuery와 jQuery-UI까지 설치해야 한다. 공식 사이트에서 다운 받아 설치하거나 CDN으로 설치할 수 있다. Download Builder | jQuery UI Download Builder jqueryui.com jqueryui - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery Java..

JavaScript/실전

[JavaScript] 슬라이더 + 탭 형식 멀티 팝업

업무 중에 팝업 관련 업무도 생각보다 많다. 일반적으로 팝업창 하나에 이미지 한 개가 들어가지만 사이트에 게시되는 팝업 개수가 늘어나면 지저분함은 물론, 일일이 닫는 것도 불편하기 때문에 이럴 경우엔 멀티 팝업을 사용한다. 기존에 만든 멀티 팝업이 몇 개 있지만 이번에 블로그 포스팅용으로 새롭게 만들어보겠다. 1. 미리보기 2. 슬라이더 라이브러리 내가 가장 애용하는 슬라이더 라이브러리는 Swiper다. 하지만 이번에는 Slider Pro를 준비해봤다. 내가 좋아하고 잘하는 라이브러리만 고집하기보다 다른 라이브러리도 경험해보면서 실력을 늘리기 위함이다. 따라서 반드시 Slider Pro일 필요는 없지만 여기선 Slider Pro를 사용하겠다. Slider Pro는 제이쿼리 기반 라이브러리이기 때문에 제이..