Lpla 개발 블로그

JavaScript/실전

[GSAP] 애니메이션 사용법 (중급 - ScrollTrigger)

지난 시간에 GSAP로 애니메이션 효과를 만드는 법을 공부했다. 하지만 어떤 애니메이션 효과를 만들지 만큼 중요한 것이 언제 효과를 보여줄 것인가이다. 내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다. 설치 공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드한다. Docs Documentation for GreenSock Animation Platform (GSAP) greensock.com gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life..

JavaScript/실전

[GSAP] 애니메이션 사용법 (기초)

GSAP? GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장한다. 하지만 초보자들에게 그 간단한 사용법 조차도 어렵고 헷갈리는 것이 사실이다. 공식 사이트에서 배워보려 해도 방대한 문서 양에 어디서부터 시작해야 할지 막막하다. GSAP를 배우려는 목적은 멋진 애니메이션 효과를 구현하고 싶기 때..

JavaScript/실전

Swiper 예제 - Swiper 2개 연동

웹사이트를 만들다보면 Swiper 2개를 연동해야 하는 상황이 발생할 수 있다. 여기서 말하는 연동이란, A 슬라이더를 여러 방법으로 동작할 때, B 스와이퍼도 움직이는 것을 말한다. 마찬가지로 B 슬라이더를 움직이더라도 A 슬라이더가 함께 움직이는 것도 포함한다. 최종 결과물 기본 구조 HTML CSS .swiper-container { width: 600px; text-align: center; } .swiper-container img { width: 100%; } JavaScript var MainSwiper = new Swiper('.main_swiper .swiper-container'); var SubSwiper = new Swiper('.sub_swiper .swiper-container'..

JavaScript/실전

Swiper 예제 - 새로고침할 때마다 순서가 바뀌는 슬라이드

Swiper를 예시 라이브러리로 사용했지만 자바스크립트를 사용하는 기술이므로 다른 어떤 슬라이드도 가능하다. 사전 지식 지난 시간에 여러 가지 방법으로 랜덤 이미지를 구현하는 방법을 알아봤다. [JavaScript] 랜덤 이미지 보여주기 자바스크립트로 랜덤 이미지를 보여주는 방법에 대해 알아보겠다. 0. 기본값 세팅 HTML CSS html, body { width: 100%; height: 100%; margin: 0; } .container { position: relative; width: 100%; height: 100.. lpla.tistory.com 랜덤 슬라이드도 비슷한 맥락이기 때문에 배운 걸 바탕으로 어렵지 않게 구현할 수 있다. 다만 앞선 랜덤 이미지와 랜덤 슬라이드는 결정적인 차이가 ..

JavaScript/실전

[JavaScript] 랜덤 이미지 보여주기

자바스크립트로 랜덤 이미지를 보여주는 방법에 대해 알아보겠다. 0. 기본값 세팅 HTML CSS html, body { width: 100%; height: 100%; margin: 0; } .container { position: relative; width: 100%; height: 100%; } .img_box { width: 100%; height: 100%; position: relative; left: 50%; transform: translateX(-50%); background-repeat: no-repeat; background-size: cover; } 먼저 HTML에는 container와 img_box 클래스로 된 요소 2개를 만들고 하단에 제이쿼리를 불러온다. 그리고 CSS는 각자 ..

JavaScript/실전

[JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 2

지난 포스트 : [JavaScript] 무작위 숫자 5개를 뽑아 오름차순으로 정렬 1 지난 번에 무작위 숫자 5개를 뽑아 오름차순으로 정렬하는 방법에 대해 알아보았다. var 추출 = []; for (i = 1; i

JavaScript/실전

IE11 에서 블러(Blur) 처리하기 blurify.js

일반적으로 css filter 기능으로 요소에 블러 효과를 구현하는 것은 쉽다. HTML CSS img { -webkit-filter: blur(5px); filter: blur(5px); } 결과 : 크롬 / 익스플로러 11 하지만 익스플로러에서는 이렇게나 간편하고 유용한 필터 기능을 지원하지 않는다. 우리나라의 익스플로러 점유율이 2019년 10퍼센트에서 2020년 5퍼센트로 떨어졌다고는 하지만 회사와 클라이언트 입장에서 익스플로러를 완전히 배제할 수 없는 상황이다. 개인적으로 3년이 지나면 그땐 정말 익스플로러는 고려하지 않아도 될 것 같다. 다행히 익스플로러에서 블러 기능을 구현할 수 있는 자바스크립트 라이브러리가 있다. 바로 blurify 이다. dabanlee/blurify blurify.js..

JavaScript/실전

스크롤 애니메이션 라이브러리 AOS.js

1. 소개 AOS.js는 스크롤의 움직임에 따라 요소에 애니메이션(트랜지션) 효과를 손쉽게 구현할 수 있는 자바스크립트 라이브러리다. AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS.js의 장점은 굉장히 가볍다는 데 있다. 파일은 aos.css와 aos.js 2개로 동작하며 각각의 파일을 보면 코드도 간단하게 구성되어 있다. 간단하면서도 기본적인 애니메이션 효과를 모두 갖추고 있기 때문에 아주 훌륭한 라이브러리라고 할 수 있다. 2. 사용법 HTML에 아래 코드를 추가한다. 실행하려면 자바스크립트에 아래 코드를 추가한다. AOS.init(); 3. 기능설명 애니메이션 효과를 사..

JavaScript/실전

[JavaScript] 반응형 이미지 좌표값 구하기(jQuery RWD Image Maps)

이미지맵으로 하나의 이미지에 위치마다 여러 개의 링크를 걸거나 여러 개의 함수를 실행할 수 있다. 하지만 반응형의 경우 좌표가 매번 달라지기 때문에 일반적인 방법으로는 사용이 어렵고 rwdImageMaps 자바스크립트 라이브러리를 통해 정상적으로 이미지맵을 사용할 수 있다. Responsive Image Maps jQuery Plugin Responsive Image Maps jQuery Plugin Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize. Download the plugin from..

JavaScript/실전

[JavaScript] Slick.js 반응형 rows 이슈

대다수가 그렇듯 나도 캐러셀(Carousel) 라이브러리 중에 스와이퍼(Swiper.js)와 슬릭(Slick.js)을 자주 사용한다. 그런데 얼마 전 Slick을 사용하면서 아래와 같은 이슈를 겪었다. 먼저 Slick으로 한 화면에 5개의 슬라이더가 보이도록 만들었다. 그리고 반응형 작업을 위해 breakpoint 로 1280px 이하는 슬라이더가 3개만 보이도록, 그리고 768px 이하는 슬라이더가 가로 2, 세로 2 즉 2x2 = 4개가 보이도록 만들었다. 여기까지는 의도대로 잘 작동하고 있다. 하지만 768px 에서 다시 브라우저 크기를 늘리게 되면? 위 그림처럼 2줄에서 1줄로 바뀌지도 않고 좌우여백도 제대로 작동하지 않는 이슈가 생겼다. 전체 코드는 다음과 같다. 이 이슈는 rows 값을 건드릴..