Lpla 개발 블로그

JavaScript/실전

[JavaScript] Swiper 구버전 Demo, API 확인하기

최근 Swiper가 7 버전으로 업그레이드됐다. 그래서 현재 공식 사이트에 접속하면 최신 버전의 demo와 api 자료를 확인할 수 있다. Swiper는 다른 슬라이더 라이브러리에 비해서 피드백도 빠르고 업데이트도 빠른 점이 좋다. (너무 빨라서 문제다.) 문제는 예전에 작업한 사이트의 Swiper를 수정하고자 할 때 참고할 수 있는 페이지가 없다는 점이다. 이미 공식 api 페이지나 demo 페이지는 7 버전을 기준으로 업데이트되었고 구버전은 확인할 수 없다. 대부분은 최신 api를 참고하여 작업해도 문제 되지 않겠지만 위험성을 언제나 갖고 있는 것이다. 아쉽게도 Swiper 측은 신버전이 나오면 구버전은 더 이상 지원하지 않는다고 한다. Github를 보면 Swiper 5 버전의 API가 있는데 어째..

JavaScript/실전

[GSAP] 타이핑 효과

GSAP의 TextPlugin으로 타이핑 효과를 만들 수 있다. See the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 이 플러그인을 이용하면 간단하게 타이핑 효과를 만들 수 있지만 한글은 'ㅌㅏㅇㅣㅍㅣㅇ' 으로 입력되지 않고 '타이핑' 처럼 자음모음이 합쳐져 입력 되는데 이런 작은 디테일에서 아쉬움이 있다. sdfsdfSee the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 다행히 구글에 검색해보면 한글 타이핑을 할 수 있도록 누군가 친절하게 만들어 놓은 스크립트가 있다. See the Pen 타이핑 by lpla (@lpla) on CodePen. 하지만 이 스크립트는 스크롤 이벤트 없이 페이지가 로드되..

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] 조건문 응용

이 글은 벨로퍼트와 함께하는 모던 자바스크립트의 내용을 공부하고 정리한 글입니다. 05. 조건문 더 스마트하게 쓰기 · GitBook 05. 조건문 더 스마트하게 쓰기 이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다. 특정 값이 여러 값중 하나인지 확인해야 할 때 만약, 여러분이 특정 값이 여러 값 중 learnjs.vlpt.us 1. 특정 값이 참인지 확인하는 상황 function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } isAnimal('개'); // true isAnimal('노트북'); // false 특정 값이 동물인지 확인하는 함수 isA..

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] forEach, map, fill

1. forEach forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. forEach는 중간에 멈출 수 없다. for문 const array1 = [2, 4, 6, 8, 10]; const array2 = []; for (let i = 0; i { array2.push(element * 2); }) console.log(array2); // [4, 8, 12, 16, 20] 2. map map 메서드는 주어진 함수를..

JavaScript/실전

[JavaScript] resize 한 번만 실행

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

JavaScript/기초

[JavaScript/jQuery] 요소 추가, 삭제, 이동

반응형에 따라 요소의 위치를 바꾸려고 한다. css만으로 해결할 수 있다면 좋겠지만 단순하지 않은 레이아웃에서 css로 해결하기 어려운 경우가 있다. 이 때 자바스크립트, 특히 제이쿼리의 도움으로 요소를 재배치할 수 있다. HTML 1번 2번 3번 CSS .box_wrapper { margin-top: 100px; font-size: 40px; } .box { width: 300px; height: 300px; margin: 0 auto; display: flex; justify-content: center; align-items: center; color: #FFF; } .box1 { background: #dc6851; } .box2 { background: #dcae51; } .box3 { back..

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