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] 2중 객체(중첩된 객체) 접근

2중 객체(중첩된 객체) 실무에서 객체(Object) 안에 객체를 만들고 반복문을 돌려야 하는 일이 생겼다. 아래 예시 코드를 보자. let 팝업 = { 첫번째: { tab_name: ' 1 ', tab_bg: '#2D3E52', link: '', end_date: '2021-02-28' }, 두번째: { tab_name: ' 2 ', tab_bg: '#F1A5CC', link: 'www.naver.com', end_date: '2020-01-01' }, 세번째: { tab_name: ' 3 ', tab_bg: '#0060AC', link: '', end_date: '2020-08-31' }, 네번째: { tab_name: ' 4 ', tab_bg: '#FF540F', link: 'www.daum.net..

JavaScript/기초

[JavaScript] Class 클래스 (1)

기존 프로토타입 상속 문법 function Hello (name) { this.name = name; } Hello.prototype.sayHello = function () { console.log(this.name + "님 안녕하세요."); } const h1 = new Hello('lpla'); const h2 = new Hello('coffee'); h1.sayHello(); h2.sayHello(); // 결과 // lpla님 안녕하세요. // coffee님 안녕하세요. ES6 클래스 상속 문법 class Hello { constructor(name) { this.name = name; } sayHello() { console.log(this.name + "님 안녕하세요."); } } const..

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. 기능설명 애니메이션 효과를 사..