Yarn

package Manager

웹퍼블리싱은 기본적으로 HTML, CSS, Javascript 언어를 사용하여 프로젝트를 진행합니다.

그리고 시간적 생산성과, 편리성, 필요성, 크로스 브라우징 등을 위해

jQuery, jQueryUi, bxSlide, Swiper, Bootstrap,  fontawesome, animate.css 등의 다양한 라이브러리를 사용하는데

이것을 디펜던시스(dependencies)라고 합니다.

이 라이브러리를 설치하고 사용하기 위해서는 각 각의 제공하는 사이트를 접속하여

파일을 다운로드하거나, CDN으로 연결하여 사용해야 합니다.

그렇기에 최신 버전의 라이브러리가 나오거나, 최신 버전의 새로운 CDN 경로를 알기 위해서는

매 번 해당 라이브러리 사이트에 방문해야 합니다.

이것은 상당히 번거롭고, 귀찮은 일 입니다.

위의 시간적 소모와 번거로움을 해결하기 위한 것이  Yarn  - Package Manager 입니다.

Package Manager를 사용하면 해당 사이트에 방문하지 않고, 최신 버전의 디펜던시스를 손쉽게 다운로드할 수 있습니다.

지금부터 npm - Package Manager 와 Yarn - Package Manager의 차이점과 설치 및 사용방법에 대하여 알아보겠습니다.

Npm vs Yarn

¹npm 또는 ²yarn은 자바스크립트 node.js 환경 기반의 Package Manager(패키지 매니저) 입니다.

Package(패키지)란?

전 세계의 개발자들이 제작한 다양한 자바스크립트 코드를 npm 온라인 데이터베이스에 업로드하여 게시하며 공유하는데 이것을 프로그램 Package(패키지)라고 하며,  

이러한 다양한 프로그램 패키지들은 누구나 사용 가능하며,  ¹npm 또는 ²yarn과 같은 Package Manager(패키지 매니저)를 통하여 다운로드가 가능합니다.

웹퍼블리셔로 ¹npm 과 ²yarn 을  모두 사용해본 후 개인적으로 느끼는 눈에 보이는 차이점은 다음과 같습니다.

¹npm 은 노드 패키지 매니저(Node Package Manager)의 줄임말로 node.js 설치할 때 자동으로 설치되는 기본 Package Manager(패키지 매니저) 입니다.  

npm은 필수 단계를 순차적으로 수행하기 때문에 한 개의 패키지 다운로드 완료해야 다음 패키지를 다운로드 할 수 있습니다.

²yarn 은 2016년 페이스북에서 발표한 Package Manager(패키지 매니저)로, npm의 부족한 부분들을 개선하기 위해 개발되었습니다.

yarn은  npm과 달리 동시에 여러 개의 패키지들을 다운로드할 수 있기 때문에 처음에 한 번 세팅을 해두면 시간적인 측면에서 편리하게 사용할 수 있습니다. 

또한 npm 보다 보안성이 더 좋다고 하는데 웹퍼블리싱 하면서 특별하게 느낄 수는 없었습니다.

Yarn 설치방법

yarn은 npm을 통해 설치해야 합니다.

위에서 언급한 바와 같이 node.js 를 설치하면 npm 패키지 매니저는 기본적으로 자동 설치됩니다.

Ⅰ.  node  설치하기

node.js 를 설치할 수 있는 경로는 아래와 같습니다.

node.js 파일은 아래 다운로드 경로로 사이트 진입하여 좌측의 안정적, 신뢰도 높음 버전을 다운로드 받아서 설치합니다. 

node.js 다운로드 : https://nodejs.org/ko/

※ node.js 설치 여부 확인방법 :  cmd(윈도키+R키) 창을 실행  → node --version 입력 후 Enter 키 실행 

Ⅱ. Yarn 설치하기

Yarn Install 방법은 Yarn 공식 사이트에서도 확인이 가능합니다.

yarn 공식 사이트 : https://classic.yarnpkg.com/lang/en/

• ✔  cmd(윈도키+R키) 창을 실행시켜 아래와 같이 입력합니다.
•      옵션 -g 는 global 뜻하기 때문에 yarn이 설치된 컴퓨터 어디서든 사용 가능하다는 뜻을 의미합니다.

npm install -g yarn

※ yarn 설치 여부 확인방법 :  cmd(윈도키+R키) 창을 실행  → yarn --version 입력 후 Enter 키 실행

Yarn 사용방법(사용 가이드)

yarn을 사용하여 jquery, bxslide, swiper, bootstrap 등 다양한 라이브러리 디펜던시스를 각 각의 사이트에 방문하여 매 번 다운로드하지 않고, 

처음에 Yarn 설정을 Setting 해 놓으면, Install 시 라이브러리 최신 버전을 한 번에 모두 다운로드 받을 수 있습니다.

개인적으로 추천하는 방법은 프로젝트 폴더에 yarn을 사용할 폴더를 생성하는 것보다는

따로 yarn 폴더를 생성하여 필요한 최신 라이브러리를 다운로드하여 프로젝트 폴더로 이동하는 방법이 좋을 것 같습니다.

이유는 yarn을 Install 할 때 여러 개의 파일이 생성되는데, 웹퍼블리싱에는 필요하지 않은 파일이기 때문입니다.

Ⅰ.  Yarn을 사용하기 위한 준비과정

라이브러리 디펜던시스를 다운로드 받아야 할 yarn을 실행할 폴더를 생성합니다.

• ✔  cmd(윈도키+R키) 창을 실행시켜 아래와 같이 입력합니다.
•      아래와 같이 입력하면,  빈 폴더에  node-modules 폴더가 생성되면서 yarn을 사용할 수 있는 환경이 Setting 됩니다.

yarn

※ Yarn Setting 순서 :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행

Ⅱ. Yarn의 package.json 생성하기

yarn을 사용할  수 있는 환경이 Setting 된 후,  package.json을 생성해야 합니다.

yarn을 사용하여 라이브러리 디펜던시스를 자동으로 다운로드 받기 위해서는 package.json 파일과 연결을 해야 하기 때문입니다.

• ✔  cmd(윈도키+R키) 창이 실행된 상태에서 아래와 같이 입력합니다.

     아래와 같이 입력하면,  폴더에  package.json 파일이 생성되면서 라이브러리 디펜던시스와 연결할 수 있게 됩니다.

yarn init

※ Yarn package 생성 순서 :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행 → yarn init 입력 후 Enter 키 실행

Ⅲ. Library(라이브러리) 디펜던시스를 package.json 에 연결 설정하기

명령어를 사용하여 yarn의 Package.json 에 사용하고자 하는 라이브러리를 모두 연결할 수 있습니다.

• ✔  cmd(윈도키+R키) 창이 실행된 상태에서 아래와 같이 입력합니다.

     아래와 같이 입력하여 사용하고자 하는 라이브러리를 모두 연결할 수 있습니다.

yarn add [package] //최신버전 다운로드 방법
yarn add [package@version] //버전설정하여 다운로드 방법

※ Yarn 라이브러리 연결 순서 :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행 

→ yarn init 입력 후 Enter 키 실행 → yarn add [package] 입력 후 Enter 키 실행

Ⅳ. 연결된 Library(라이브러리) 다운로드

yarn의 Package.json 에 연결된 라이브러리를 명령어를 통해 모두 한 번에 다운로드 받을 수 있습니다.

설정된 package.json 파일이 있다면, 명령어를 통하여 라이브러리를 항상 최신 버전으로 다운로드 가능합니다.

• ✔  cmd(윈도키+R키) 창이 실행된 상태에서 아래와 같이 입력합니다.

     아래와 같이 명령어를 입력하면 node_modules 폴더에 최신 라이브러리 디펜던시스가 다운로드 되어있는 것을 확인할 수 있습니다. 

     마지막으로 다운로드 완료된 라이브러리를 복사 후 프로젝트 폴더로 복사하여 사용하시면 됩니다.

yarn install

※ Yarn 라이브러리 다운로드 과정 순서(최종)  :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행 

→ yarn init 입력 후 Enter 키 실행 → yarn add [package] 입력 후 Enter 키 실행 → yarn install 입력 후 Enter 키 실행

글 작성자 SNS(인스타그램)

댓글이나 메일로 글을 보시는 분들과 소통하고 있지만, 더 많은 소통을 위하여 인스타그램을 공유합니다.

많은 퍼블리셔 분들과 DM 또는 일상생활을 공유하고 싶습니다. 

작성자 인스타그램 : https://www.instagram.com/kwangsung_kim/

마치며...

yarn - package manager 에 대하여 간단하게 설명하고 하였으나,

node와 npm을 잘 모르시는 퍼블리셔분들도 있을 것 같아서 최선을 다하여 패키지 매니저의 전반적인 것을  포스팅하고자 하였습니다.

또한 yarn을 어떻게 사용하는 것이 편리할까(활용법)에 대하여 개인적인 의견으로 도움을 드리고자 하였습니다. 

일단 마무리하며 정리해드리고자 하는 내용은 아래와 같습니다.

이번엔 yarn에 대하여 포스팅하였으나 npm - package manager 도 좋은 패키지 매니저입니다.

yarn이 npm의 개선된 버전으로 나왔다고는 하지만 단점도 존재합니다.

디스크 용량을 좀 더 많이 사용하게 됩니다. 

또한 npm도 계속 개선된 버전이 나오고 있기에 yarn과 속도는 별반 차이가 없다고 생각합니다.

결론적으로 npm과 yarn 둘 중 어떤 것이 최고라고 말씀드리지는 않겠습니다. 

둘 중 개인의 취향에 따라 선택하여 사용하시면 될 것 같습니다.

감사합니다.

ScrollMagic

Let's start showing off some magic

지금까지 ScrollMgic 라이브러리의 사용 방법부터 메서드, 기초 실무예제까지 총 4편의 포스팅을 하였습니다.

이번 포스팅은 ScrollMagic 라이브러리의 마지막으로, 메인 또는 프로모션 사이트에서 스크롤 애니메이션에서 사용할 법한,

조금은 더 화려하고 동적인 예제를 만들어 보여드리고자 합니다.

이전 포스팅 내용들을 확실하게 학습하셨다면, 코드를 분석하시는데 어려울 내용은 없습니다.

그렇기에 특별하게 코드 문법 설명은 없이 작성한 예제 2가지를 보여드릴 것이며, 이렇게도 응용이 가능하구나?

라고 생각하고 편하게 보시면 될 것 같습니다.

ScrollMgic 라이브러리를 웹퍼블리싱 실무에서 재미있게 사용하시길 바랍니다.

ScrollMagic 실무 응용 예제(응용)

이전 포스팅 내용을 바탕으로 실무에서 쓸만한 동적인 스크롤매직 예제 2가지를 보여드리겠습니다.

그렇기에 따로 문법 및 코드설명은 진행하지 않겠습니다.

실무 응용 예제 - Ⅰ

아래 예제는 script.js 파일 내용중 "TweenMax.to('#box', 1, {top:'+=400', width:100, height:100});" 에서 top:'+=400' 값만 잘 이해하시면 됩니다.

상대값을 나타내기 위해서 '+=' 또는 '-='을 문법을 사용합니다.

쉽게 말해서 top:'400' 으로 코드를 작성했다면 상단에서 아래로 400px 지점에 애니메이션 되며 #box 요소가 위치하겠지만, top:'+=400'으로  코드를 작성할 경우

#box 요소의 크기 높이값에 400px을 더한 값이 상단에서 아래로 위치하여 애니메이션이 발생합니다.

  ScrollMagic - '실무 응용 예제 - Ⅰ' 예제 실습 파일  

실무 응용 예제 - Ⅱ

아래 예제는 script.js 파일 GSAP 내용중 "from($innerS2, 1, {autoAlpha: 0}, '-=0.3');" 에서 '-=0.3' 문법적 의미가 무엇인지 알고 넘어가시면 됩니다.

이전 GSAP에서 포스팅한 내용이 아니기에, 이부분은 다루고 넘어가겠습니다.

 '-=0.3' 위치의 문법 코드는 작성하지 않을 경우 기본값은 '0' 이며, 

해당 위치에 값을 넣어줄 경우 애니메이션이 빠르게 시작되거나 늦게 시작되도록 설정할 수 있습니다.

 '-=0.3' 넣어준 값은 기본값인 '0' 보다 0.3초 빨리 실행하거나, 이전 애니메이션이 끝나기 0.3초전에 겹쳐서 실행하도록 설정하는 것입니다.

  ScrollMagic - '실무 응용 예제 - Ⅱ' 예제 실습 파일  

마치며...

이번 포스팅은 ScrollMagic 라이브러리 포스팅의 마지막 편으로 무겁지 않게 마무리 했습니다.

화려한(?) 동적 스크롤 애니메이션 응용예제를 2개 간단하게 작성하였고, 가볍게 보시고 따라해 해보시면 될 것 같습니다.

올해도  이제 보름밖에 남지 않았습니다.

제가 올해 초 목표했던 ScrollMagic 라이브러리까지 포스팅하게 되어 일단 기분이 너무 좋습니다.

다들 올 한해 목표했던 학습목표까지 이루셨는지 한번쯤 돌아보시고,

조금 부족하셨다 싶으시면  '맑은커뮤니케이션 '블로그를 통해서 그 목표에 조금이라도 더 가까이 도달하시길 바랍니다.

모두 힘내시고 웹퍼블리싱 공부 및 프로젝트에서 목표했던 바를 이루시길 바랍니다.

감사합니다.

ScrollMagic

Let's start showing off some magic

이전 포스팅이 ScrollMgic 라이브러리의 '메서드와 옵션' 에 대한 내용이 주요 내용이었다면,

이번에는 ScrollMgic 라이브러리의 메서드 전역(global) 설정 방법과 실무에서 쓸만한 예제를 몇 가지 만들어 보여 드리고자 합니다.

이전 편에서  ScrollMgic 라이브러리의 '메서드와 옵션'을 잘 이해하고 이번 포스팅을 보신다고 생각하여,

설명드렸던 메서드와 옵션의 관련 내용은 중복하여 작성하지 않겠습니다.

ScrollMagic - Controller 옵션

ScrollMagic 애니메이션을 실행하기 위한 Controller 메서드 옵션은 두 가지가 있습니다.

그것들을 알아보고 ScrollMagic 실무 적용할 만한 예제들을 알아보도록 하겠습니다.

globalSceneOptions

실무 웹퍼블리싱에서는 한 개의 프로젝트에서 ScrollMagic 애니메이션을 만들 때, 한 개를 구현하는 것이 아니라

2개 혹은 여러 개를 구현하게 될 상황이 자주 발생할 것이며 이에 따라 Scene을 여러 개 생성해야 합니다.

그렇다면 동일한 Scene 옵션을 반복해서 작성하지 않고, 스크롤 애니메이션 공통 요소는 한 번만 선언해서 사용하는 전역 설정 방법이 없을까요?

당연히 있지만 모르고 사용하지 않는 상황이 발생할 것입니다.

ScrollMagic 메서드 옵션 전역(global) 설정 문법은 간단합니다.

전역(global) 설정 옵션 문법 :  globalSceneOptions: Scene 옵션(duration, reverse, triggerHook, offset) 

var controller = new ScrollMagic.Controller({
	globalSceneOptions: {
		triggerHook: 'onLeave',
		duration: "100%"
	}
});

container

HTML에서 Body 영역에서 스크롤 시 trigger가 발생하는 것이 아닌, 지정한 container 영역 내부에서 스크롤 애니메이션이 동작하도록 만들 수 있습니다.

특정 영역 내부 스크롤 애니메이션 설정 옵션 문법 :  container: "컨테이너 명(ID 또는 Class)" 

var controller = new ScrollMagic.Controller({
	container: '#container'	//body 스크롤이 아닌, 컨테이너 내부 스크롤 컨트롤	
});

  ScrollMagic - 'Container Scroll' 예제 실습 파일  

ScrollMagic Examples Site

ScrollMagic 공식 사이트에서는 예제를 제공하고 있습니다.

본격적인 ScrollMagic 섹션 와이프(Section Wipe)와 실무 응용 예제 글 작성에 앞서서 공식 예제 사이트를 공유해 드리고자 합니다.

이유는 ScrollMagic 공식 사이트의 예제까지 모두 섭렵하신다면,

ScrollMagic 라이브러리를 더욱 완벽하게 이해하고 사용하실 수 있으리라고 생각되기 때문입니다.

• ✔ ScrollMagic Examples : http://scrollmagic.io/examples/index.html

Section Wipe

보여드릴 하위 예제는 모두 섹션 와이프(Section Wipe) 종류입니다.

섹션 와이프는 스크롤 시 다음 섹션이 나타나 화면에 고정되는 동작이며, 예제는 모두 다르게 보이지만 구현 원리는 모두 비슷합니다.

• 1. CSS로 Section DIV의 width: 100%, height: 100% 값을 설정하여 화면을 꽉 차게 만들어 줍니다.
• 2. Section Div의 Scene들의 triggerHook은 공통 옵션으로써 controller에서 global option으로 설정해 줍니다.
• 3. 각각의 Section Div가 스크롤 시 시작되는 부분에 닿았을 때 trigger 되어야 하기 때문에 TriggerHook의 값은 'onLeave' 또는 '0' 으로 작성합니다. 
• 4. Section Div가 스크롤될 때마다 triggerHook에 닿으면 setPin 메서드를 사용하여 고정시켜 줍니다.

Section Wipe(기본형)

  ScrollMagic - 'Section Wipe(기본형)' 예제 실습 파일  

Section Wipe(응용형)

  ScrollMagic - 'Section Wipe(응용형)' 예제 실습 파일  

Section Wipe(슬라이더)

  ScrollMagic - 'Section Wipe(슬라이더)' 예제 실습 파일  

ScrollMagic 실무 응용 예제

실무에서 자주 사용되는 스크롤 애니메이션을 몇 가지 소개하고자 합니다.

예제 위주로 되어있으며 이전 포스팅 내용들을 잘 학습하셨다면, 쉽게 이해하고 사용하실 수 있을 것입니다.

Fade-In, Fade-Out(기본형)

  ScrollMagic - 'Fade-In, Fade-Out(기본형)' 예제 실습 파일  

Fade-In, Fade-Out(응용형)

  ScrollMagic - 'Fade-In, Fade-Out(응용형)' 예제 실습 파일  

마치며...

최초 ScrollMagic 라이브러리 포스팅은 메서드와 옵션까지만 작성하려다가 마음을 고쳐먹고 실무에 쓸만한 예제까지 만들기로 하였습니다.

예제를 여러 개 만들어서 보여드리면 ScrollMagic 라이브러리의 매력을 한 명이라도 더 알지 않을까 하는 마음에서 입니다.

저의 노력이 헛되지 않았으면 좋겠습니다 :D

다음 편은 ScrollMagic 라이브러리의 최종 편으로서,이번 포스팅은 서브페이지 디자인에 ScrollMagic 라이브러리의 실무 적용 방법이라고 할 수 있다면,

다음 포스팅은 지금까지 모든 내용을 총집합 한 내용으로 메인에서도 쓸만한 퍼포먼스가 높은 예제로 보여드리고 마무리하겠습니다. 

감사합니다.

ScrollMagic

Let's start showing off some magic

이번 포스팅은 ScrollMgic 라이브러리 '설치방법과 동작 원리'에 이어서 이전 포스팅에 설명드리고 간단하게 보여드렸던,

예제를 바탕으로 문법 작성 방법을 순서대로 상세하게 설명드리고,

Scene 옵션에 대해 하나씩 파 해쳐 보도록 하겠습니다.

이전 포스팅에서도 말씀드렸지만 GSAP(TweenMax)로 애니메이션 오브젝트를 구현하기 때문에

GSAP(TweenMax)를 잘 모르실 경우 현재 블로그 포스팅 글 참조 부탁드립니다.

GSAP(TweenMax)는 현재 맑은커뮤니케이션 블로그에 포스팅되어 있기 때문에 따로 진행하지 않겠습니다.

ScrollMagic 기본 문법 작성방법

기본 문법은 전 편에 설명드렸던 동작원리를 순서대로 작성하시면 쉽습니다.

전 편의 예제 파일을 기본으로 동작원리 순서대로 문법을 세분화하여 공부해 보겠습니다.

기본 문법 코드 작성방법   

Ⅰ. ScrollMagic 애니메이션을 실행하기 위한 Controller를 생성합니다.

       new 키워드를 이용하여 새로운 인스턴스를 생성합니다.

var controller = new ScrollMagic.Controller();

Ⅱ. 스크롤 될때 필요한 애니메이션 오브젝트를 생성합니다.

       GSAP(TweenMax) 라이브러리를 사용하여 애니메이션 코드를 작성합니다.

var tween = TweenMax.to('#animate', 0.5, {
	backgroundColor: "#6431ff",
	scale: 2.5,
	rotation: 360,
	x: 600,
	y: 500
});

Ⅲ. ScrollMagic 상세 옵션 설정을 위한 Scene 오브젝트를 생성합니다.

var scene = new ScrollMagic.Scene();

Ⅳ. Scene 오브젝트에 어떠한 객체에서 동작해야 할 상세 스크롤(애니메이션 등)을 위한 옵션 설정을 합니다.

       첫째, 어떠한 객체(ex - .trigger 또는 #trigger)에서 Scene 이 발생할지 트리거를 설정해 주어야 합니다. 

       쉽게 말해서, 어떠한 객체에 스크롤이 닿으면 애니메이션이 발생할지 지정해 주는것 입니다. 

       트리거 설정(Scene 메서드 옵션) :  triggerElement: 'class 또는 ID' 

       둘째, GSAP(TweenMax) 애니메이션 오브젝트(Ⅱ)를 Scene 오브젝트(Ⅲ)에 추가 설정합니다.

       쉽게 말해서, 어떠한 객체에 스크롤이 닿으면 발생할 만들어둔 애니메이션 GSAP 오브젝트(Ⅱ)를 넣어 줍니다. 

       애니메이션 실행 설정 메서드 :  setTween( ) 

       셋째, 마지막으로 Scene 오브젝트에 ScrollMagic Controller(Ⅰ)를 추가하여 실행 설정 하는것 입니다.

       여기까지 오타없이 진행하셨다면, 스크롤에 따라서 애니메이션이 동작합니다. 

       Controller 실행 설정 메서드 :  addTo( ) 

       넷째, 디버깅을 위해서 인디케이터를 추가합니다.

       디버깅 후에는 삭제 합니다.

       디버깅 실행 설정 메서드 :  addIndicators( ) 

기본 문법 최종코드 및  결과물  

html + css + js + result 최종 결과물 코드 뷰 입니다.

ScrollMagic Scene 옵션 및 메서드

위에 기본 문법을 설명하면서 가장 기본 옵션 이라고 할 수 있는 'triggerElement(scene 메서드 옵션)', 'setTween', 'addTo' 메서드에 대하여 알아보았습니다.

그 외 Scene 옵션 및 메서드에 대하여 설명과 예제를 통해서 공부해 보겠습니다.

duration( scene  옵션 )

트리거의 애니메이션 시작지점부터 종료지점까지 재생시간을 나타내는 scene 메서드의 옵션 입니다.

단위는 숫자이며, 예를들어 'duration: 100' 이라고 코드를 작성하면 트리거 시작지점에서 종료지점은 y축으로 100px 스크롤 되는동안 애니메이션이 실행됩니다. 

트리거의 애니메이션 재생시간이 'duration: 100%' 일 경우 화면 높이에 따라 유동적으로 재생시간이 변화합니다.

재생시간 설정 옵션 문법 :  duration: 재생시간 

  ScrollMagic - 'duration' 예제 실습 파일  

reverse( scene  옵션 )

트리거의 애니메이션 시작지점부터 종료지점까지 키값을 한번만 실행시키는 scene 메서드의 옵션 입니다.

기본값은 true로 애니메이션의 키값은 스크롤 될때마다 실행되지만, 트리거의 키 값 애니메이션을 한번만 보여주고 싶을 경우에는 값을 false로 설정하면 됩니다.

트리거의 키값을 한번만 실행시키기 위한 옵션 문법 :  reverse: true 또는 false 

  ScrollMagic - 'reverse' 예제 실습 파일  

triggerHook( scene  옵션 )

스크롤 시 트리거 팁이 뷰포트에 대해 상대적으로 어느 시점에 애니메이션을 보여줄지 설정하는 scene 메서드의 옵션 입니다.

기본값은 onCenter(0.5)이며, 0 ~ 1 사이의 숫자 또는 문자열로 작성할 수 있습니다.

• ✔ 'onEnter' → 1
• ✔ 'onCenter' → 0.5
• ✔ 'onLeave' → 0

트리거 팁이 어느 시점에 보여야 하는지 설정을 위한 옵션 문법 :  triggerHook: 숫자 또는 문자열 

  ScrollMagic - 'triggerHook' 예제 실습 파일  

offset( scene  옵션 )

트리거의 애니메이션 시작 지점 트리거를 빠르거나 늦게 동작 시키는 scene 메서드의 옵션 입니다.

기본값은 0 이며, 양수값을 작성하면 시작 지점 트리거의 스크롤 애니메이션을 늦게 동작하며, 음수값을 작성하면 시작 지점 트리거의 스크롤 애니메이션이 빨리 시작됩니다.

예제는 아래 setPin 메서드 설명 후 offset 옵션과 같이 사용하여 보여드리겠습니다.

트리거의 시작 지점을 변경 시키는 옵션 문법 :  offset: 양수 또는 음수 

setPin   

트리거의 애니메이션 시작지점부터 종료지점까지 요소를 고정시키는 메서드입니다.

재생시간 동안  애니메이션 요소가 fixed 고정 상태가 되며, 애니메이션 재생 지점을 벗어나면  fixed 해제 상태가 되어 스크롤 됩니다. 

요소를 고정시키는 메서드 문법 :  setPin('고정 시키고자 하는 요소의 class 또는 ID') 

  ScrollMagic - 'offset, setPin' 예제 실습 파일  

setClassToggle   

트리거의 애니메이션 시작지점부터 종료지점까지 어떠한 대상에 클래스를 넣었다 뺏다(토글)하는 메서드입니다.

애니메이션 재생시간 동안 클래스가 토글되며,  jQuery의 toggleClass와 같다고 생각하시면 됩니다.

대상의 클래스를 토글하는 메서드 :  setClassToggle('클래스 넣어줄 대상', ' 넣어줄 클래스 이름') 

  ScrollMagic - 'setClassToggle' 예제 실습 파일  

마치며...

ScrollMagic Scene 옵션 및 그 외 메서드에 대하여 모두 알아보았습니다.

이번 포스팅 내용을 잘 이해하셨다면, 웹퍼블리싱 프로젝트에서 왠만한 스크롤 애니메이션은 구현 가능하다고 생각됩니다.

ScrollMagic은 생각보다 외울것도 없고 어렵지도 않습니다.

애니메이션을 위해서 GSAP(TweenMax) 라이브러리와 커스텀 문제만 잘 이해하시면 됩니다.

다음 포스팅은 ScrollerMagic의 controller에서 전역함수처럼 global 설정하는 방법과 응용예제 몇가지를 공부해 보도록 하겠습니다.

감사합니다.

ScrollMagic

Let's start showing off some magic

웹퍼블리싱 프로젝트를 하다 보면 고객사의 요청에 의해 스크롤에 따른 애니메이션(동적인 화면)을 구현해야 할 경우가 있습니다.

완성도 높고 화려한 메인 페이지를 만들기 위해서 스크롤 애니메이션을 요청하는 경우도 있습니다.

저의 경우를 말씀드리자면,

서브페이지의 스크롤 애니메이션 또는 간단한 스크롤 애니메이션은 AOS 라이브러리를 사용하고,

메인 페이지의 완성도 높고 복잡한 스크롤 애니메이션을 구현해야 할 경우

ScrollMagic과 GSAP(TweenMax)를 이용해서 웹퍼블리싱 합니다.

AOS 라이브러리 사용법은 블로그에 포스팅 되어 있습니다.  

이번 포스팅은 ScrollMagic의 설치 방법과 동작 원리, 

다음 편에는 ScrollMagic 옵션에 대하여 2편으로 나누어 다루어 보겠습니다.

참고로 ScrollMagic을 공부하시려면, GSAP(TweenMax) 라이브러리를 먼저 아셔야 합니다.

블로그에 작성되어 있으며, 어렵지 않으니 걱정하지 마시고 GSAP(TweenMax) 글을 보고 선행학습 부탁드립니다.

ScrollMagic 설치 방법

ScrollMagic 공식 사이트에서 제공하는 라이브러리 사용 방법은 CDN, Bower, NPM, Download 4가지입니다.

포스팅은 CDN 방법으로 진행할 예정이며, 각자 편한 방법으로 라이브러리 초기 설정을 하시면 됩니다.

• ✔ ScrollMagic 라이브러리 초기 설정 방법 : http://scrollmagic.io/

CDN 사용 방법

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

위에 debug.addIndicators.min.js 파일은 스크롤매직을 구현한 화면에 인디케이터를 표시하여,

스크롤매직 라이브러리 웹퍼블리싱 마크업을 좀 더 편안하게 할 수 있도록 도와줍니다.

ScrollMagic 동작 원리 문법

ScrollMagic 동작 원리를 이해할 수 있다면, 문법 작성 또한 어렵지 않을 것입니다.

코드를 설명하기 전에, 동작원리를 쉽게 풀어서 설명하자면 다음과 같습니다.

• 1. ScrollMagic 애니메이션을 실행하기 위한 Controller 를 생성합니다.
• 2. GSAP(TweenMax) 애니메이션 오브젝트를 생성합니다.
• 3. ScrollMagic 상세 옵션 설정을 위한 Scene 오브젝트를 생성합니다.
• 4. GSAP(TweenMax) 애니메이션 오브젝트(2번)를 Scene 오브젝트(3번)에 추가 설정합니다.
• 5. Controller(1번)을  Scene 오브젝트(3번)에 추가 설정합니다.

ScrollMagic 동작 원리 맛보기 예제

다음 포스팅에 ScrollMagic 본격적인 옵션 설명과 예제를 다루기에 앞서서, 위에서 설명한 동작 원리로 간단하게 만든 ScrollMagic 예제는 아래와 같습니다.

ScrollMagic Script

$(function(){
	var controller = new ScrollMagic.Controller();	// 1. ScrollMagic 컨트롤러 생성

	var tween = TweenMax.to('#animate', 0.5, {	//2. animation object 생성
		backgroundColor: "#6431ff",
		scale: 2.5,
		rotation: 360,
		x: 600,
		y: 500
	});

	var scene = new ScrollMagic.Scene({	//3. Scene object 생성
		triggerElement: '#trigger1',	//스크롤 애니메이션 시작 지점 설정
		duration: '100%',	//애니메이션 재생 시간 '100%'지정하면 화면 높이에 따라 유동적으로 end위치가 정해짐
	})
	.setTween(tween)	//4. 2번을 3번에 추가
	.addTo(controller)	//5. 1번(controller)을 3번에 추가
	.addIndicators();
});

ScrollMagic Result + HTML + CSS + ScrollMagic Script 

  ScrollMagic - '기본 동작 원리' 예제 실습 파일  

마치며...

ScrollMagic 포스팅 계획은 올해 초반부터 계획하고 있었는데, 연말에 시작하게 되었습니다.

요즘 웹사이트 웹퍼블리싱 하다보면 스크롤 애니메이션은 자주 구현해야 하는 트렌드가 되었다고 생각됩니다.

그래서 더욱더 빨리 포스팅하고 싶었지만 늦었지만... 그래도 시작이 반이다??

AOS 라이브러리도 좋지만 위에 만들어서 보여드린 ScrollMagic의 간단한 동작 원리만 보셔도,

AOS 라이브러리에서는 구현할 수 없는 스크롤 애니메이션이라는 것을 확인하실 수 있습니다.

ScrolllMagic과 AOS 라이브러리를 상황에 맞게 사용하신다면, 웹퍼블리셔로서 커다란 본인만의 무기를 가지게 되는 것이라 생각됩니다.

다음 편 포스팅은 ScrollMagic의 옵션에 대하여 상세한 설명과 예제를 통해서 진행하도록 하겠습니다.

감사합니다.

Swiper

The Most Modern Mobile Touch Slider

웹퍼블리싱 프로젝트에서 슬라이더는 거의 빠지지 않고 들어가는 기능입니다.

Swiper 기본 라이브러리 옵션만 사용해서 구현 가능한 슬라이더를 만들 수 있는 프로젝트라면 괜찮지만, 

고객사의 요청으로 Swiper 기본 라이브러리 옵션으로 만들수 없는 슬라이더를 구현해야 하는 경우도 종종 발생합니다.

그럴 경우 매우 난감합니다.

예를 들어 한 개의 Swiper 슬라이더에 두 개의 Pagination(페이징)을 연동해서 제어해야 할 때가 있습니다.

이를 해결하기 위한 Swiper API 에 방법에 대하여 포스팅하겠습니다.

Pagination 정의

게시물의 양이 많을 경우 스크롤이 길어지고 서버로부터 읽어와야 하는 데이터의 양도 많아지게 됩니다.

따라서 페이지 로딩에 소요되는 시간이 늘어나게 되고, 페이지도 한눈에 보기 힘들어지게 됩니다.

이럴 경우 한 페이지에 사용자들이 보기 적당할 정도의 목록에 페이징을 적용하여 데이터를 보여주는 것을 페이징(pagination)이라 정의할 수 있습니다. 

Swiper API : Pagination

Swiper API의 Pagination은 목록 요소의 개수를 나타내 주는 UI 라고 말할 수 있습니다.

가장 일반적인 Swiper Pagination은 Swiper 요소의 하단의 숫자들입니다.

Swiper 라이브러리는, 공식적으로 한 개의 Swiper에서 Pagination은 오직 한 개의 옵션을 제공하며, 사용 가능합니다.

그렇기에 고객사의 요청에 의해 2개 이상의 Pagination Type 옵션을 사용해야 할 경우 pagination 기본 옵션만으로 구현이 불가능하며,

Swiper API 중에서 controller 를 활용하여 이 문제를 해결할 수 있습니다.

문제 해결 방안에 제시에 앞서  Swiper Pagination 명세서는 아래와 같습니다.

• ✔ Swiper API : paginaiton 명세서 : https://swiperjs.com/swiper-api#pagination

Pagination Type

Swiper Paginaiton은 총 네 가지의 종류입니다.

bullets, progressbar, fraction, custom 으로 구분할 수 있습니다.

위의 네 가지 Type 중에서 '두 가지 Pagination UI 기능을, 한 개의 Swiper 슬라이더에 적용하는 방법' 에 대하여 확인해 보겠습니다.

예제는 progressbar와 bullets에 숫자 custom을 적용을 예시로 포스팅하겠습니다.

각설하고 먼저 Pagination Type 네 가지에 대해 알아보겠습니다. 

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		type : 'bullets'
	}
});

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_progress",   //페이징 태그 클래스 설정 
		type : 'progressbar'
	}
});

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_fraction",   //페이징 태그 클래스 설정 
		type : 'fraction'
	}
});

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		type : 'bullets',
		// Bullet Numbering 설정
		renderBullet: function (index, className) {
			return '<span class="' + className + '">' + (index + 1) + "</span>";
		},
	}
});

해결 방법

위에 Swiper Type에 대하여 알아보았습니다.

그렇다면 'Swiper Type 두 종류를, 한 개의 Swiper에 사용할 수 있는 방법'에 대해 설명드리겠습니다.

한 개의 Swiper에 progressbar와 cumtom 페이징을 사용한다고 가정할 때, progess와 cumstom 중 하나를 한 개의 Swiper 슬라이더에서 실행하고,

나머지 하나는 다른 페이징 형태로 실행합니다.

그리고 Swiper API 중에서 controller로 메인 Swiper가 다른 형태의 Swiper 페이징 형태를 제어하도록 합니다.

이해를 돕기 위해, 스크립트 작성 코드 및 예제 다운로드 파일을 아래와 같이 제공합니다.

var galleryTop = new Swiper('.gallery-top', {
	spaceBetween: 10,   //슬라이드 간격
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		clickable: true,    //버튼 클릭 여부
		type : 'bullets',   //페이징 타입 설정(종류: bullets, fraction, progressbar)   
		// Bullet Numbering 설정
		renderBullet: function (index, className) {
			return '<span class="' + className + '">' + (index + 1) + "</span>";
		},
	},
});

//progress Bar
var pagingSwiper = new Swiper(".gallery-top", {
	pagination: {
		el: ".pagination_progress",
		type: "progressbar",
	},
});

//Main Swiper로 progress Bar 제어
galleryTop.controller.control = pagingSwiper;

  Swiper - '페이징(pagination) 2개 연동 제어' 예제 실습 파일  

마치며..

웹퍼블리싱 프로젝트를 하다 보면 고객사 또는 디자이너의 요청으로, Swiper 기본 옵션으로 구현하기 힘든 경우가 종종 발생합니다.

이럴 경우 당황하지 마시고, Swiper API를 응용하고 병행하여 사용한다면 대부분 요청사항은 해결할 수 있는 문제들입니다.

이번 포스팅 주제인  '한 개의  Swiper에 두 개의 페이징(pagination) 연결 제어' 또한 결국은 Swiper API controller 이용하여 문제 해결방법을 찾아냈습니다.

사실 cotroller는 이전에도 한 번 포스팅했었고,이번 포스팅 내용은 Swiper API를 응용에 대해 보여드리고 싶었습니다.

이 글을 보시는 웹퍼블리셔 분들도 Swiper API 대하여 다시 한번 고민하는 시간을 가졌으면 합니다.

감사합니다.

Swiper

The Most Modern Mobile Touch Slider

웹퍼블리싱 프로젝트를 하다보면 슬라이더는 자주 사용하는 기능 중 하나입니다.

자바스크립트로 직접 코딩해서 만들수도 있겠지만, 고객사의 잦은 기능 변경 및 반응형에 대한 대응들을 생각한다면,

제한된 시간에 웹퍼블리싱 해야하기에 라이브러리(플러그인)를 사용하는 것이 작업에 효율적입니다.

많은 라이브러리들이 있지만 제가 사용하는 Swiper Slider 기능에 대해서 포스팅 하겠습니다.

Swiper는 다양한 사용자 옵션을 제공하고 있기에 사용하기 편리한 무료 라이브러리(플러그인) 입니다.

웹사이트, 모바일 네이티브, 하이브리드 앱 모두 호환하여 사용 가능합니다. 

Swiper의 기본설치 방법과 옵션에 대해서는 '반응형 슬라이더 Swiper (사용 방법/예제) 웹퍼블리싱' 참조 부탁드립니다.

프로젝트를 하다보면 2개의 슬라이더를 연동해서 제어해야 할 때가 있습니다.

이번에는 이를 해결하기 위한 Swiper API 에 대하여 알아 보겠습니다.

그 외에 이번 포스팅은 Swiper 라이브러리(플러그인)에서 많이 사용하는 기능에 대해서 종합적으로 정리하였습니다.

Swiper API - Controller

웹퍼블리싱 프로젝트를 하다보면 슬라이더 2개를 서로 연동하여 동작될수 있도록 구현해야 할 경우가 발생합니다.

여기서 말하는 연동이란?

A라는 Main 슬라이더가 있고 B라는 Thumbnail 슬라이더가 있다고 가정할 때, 

A라는 슬라이더를  동작할 경우 B라는 슬라이더도 동일하게 슬라이딩되고,

B라는 슬라이더를 동작하더라도 A라는 슬라이더가 동일하게 슬라이딩 되는, A와 B가 서로 연동되어 제어 가능한 상태를 말합니다.

이럴경우 Swiper API 중에서 Controller 모듈을 사용하면 문제를 해결할 수 있습니다.

지금부터 사용방법에 대해 쉽게 설명 드리겠습니다.

Use Swiper from CDN

Swiper 라이브러리(플러그인)를 사용하기 위한 설치방법은 여러가지가 있습니다.

이전에 포스팅한 Swiper Installation 중에서 CDN을 이용한 방법을 설명하지 않아서 CDN으로 Swiper Library를 사용하여 설명하겠습니다.

• ✔ Swiper CDN 사용방법 : https://swiperjs.com/get-started#use-swiper-from-cdn

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

Swiper API 사용 방법

Swiper 슬라이더를 2개로 연동 및 제어하기 위한 HTML 구조, JavaScript, Swiper 메서드 옵션에 대해 종합적으로 상세하게 설명하여 진행하겠습니다.

그리고 이 글의 작성 이유인 Swiper API 중 controller 파라미터 사용법에 대해서 다루어 보겠습니다.

HTML 

서로 연동되어 슬라이드 되어야 할 Main Swiper 와 Thumbnail Swiper를 마크업하여 만들고,

Swiper JS와 Swiper CSS 라이브러리를 CDN으로 연결합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta charset="utf-8">
	<title>Swiper - Swiper 2개 연동과 제어(Controller)</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
</head>
<body>
<div class="swiper-container gallery-top">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
	</div>
	<div class="swiper-pagination"></div>
</div>
<div class="wrap_thumb_layout">
	<div class="swiper-container gallery-thumbs">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
		</div>
	</div>
	<!-- Add Arrows -->
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
</div>
</body>
</html>

JavaScript

Swiper 슬라이더를 동작시키기 위해서는 JavaScript에서 Swiper를 초기화하고 필요한 기능에 대해서는 Swiper 메서드 옵션을 사용해야 합니다.

여기까지 작업을 완료하면  Main Swiper 와 Thumbnail Swiper 연동되지 않고 각각 동작하는 것을 확인할 수 있습니다.

사용해야 할 Swiper  옵션설명 및 사용방법은 아래와 같습니다.

• ✔ spaceBetween : 슬라이드 간격 설정 
• ✔ pagination : 페이징 사용자 설정(type : bullets, fraction, progressbar)
• ✔ loop : 슬라이드 반복 여부 설정
• ✔ loopedSlides : loop 값이 true 일 경우 파라미터 duplicate 개수 설정
• ✔ navigation : 네비게이션 사용자 설정(이전, 다음 버튼 설정)
• ✔ slidesPerView : 한번에 보여지는 슬라이드 개수 설정
• ✔ centeredSlides : 슬라이드 중앙 배치 여부 설정 
• ✔ touchRatio : 드래그 비율 설정(기본값: 1, 값을 0으로 변경할 경우 드래그 불가능)
• ✔ slideToClickedSlide : 슬라이드가 여러개 나열되어 있을 경우, 클릭시 해당 슬라이드 위치로 이동 여부 설정 

<script>
	var swiperTopNum = $('.gallery-top').find('.swiper-slide');
	var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');

	var galleryTop = new Swiper('.gallery-top', {
    	spaceBetween: 10,	//슬라이드 간격
        pagination: {	//페이징 사용자 설정
        	el: ".swiper-pagination",	//페이징 태그 클래스 설정 
			clickable: true,	//버튼 클릭 여부
			type : 'bullets',	//페이징 타입 설정(종류: bullets, fraction, progressbar)
			// Bullet Numbering 설정
        	renderBullet: function (index, className) {
        		return '<span class="' + className + '">' + (index + 1) + "</span>";
        	},
		},
		loop: true,	//슬라이드 반복
		loopedSlides: swiperTopNum.length	//loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
    });

    var galleryThumbs = new Swiper('.gallery-thumbs', {
    	spaceBetween: 0,	//슬라이드 간격
    	navigation: {	//네비게이션 사용자 설정
    		nextEl: '.swiper-button-next',	//다음 버튼 클래스 설정
        	prevEl: '.swiper-button-prev',	//이전 버튼 클래스 설정
    	},
    	centeredSlides: true,	//슬라이드 중앙 배치
    	slidesPerView: 'auto',	//한번에 보여지는 슬라이드 개수(auto 가능)
    	touchRatio: 0.2,	//드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
    	slideToClickedSlide: true,	//슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
		loop: true,	//슬라이드 반복
		loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
    });
</script>

Swiper API - controller

각각 동작하는 Main Swiper 와 Thumbnail Swiper를 서로 연동하여 제어하려면, 어떻게 해야 할까요?

Main Swiper는 Thumbnail Swiper에 연결하고, Thumbnail Swiper는 Main Swiper에 연결하고 제어해야 합니다.

이를 위해서 Swiper의 controller 모듈의 control의 파라미터 옵션을 사용한다면 Main Swiper 와 Thumbnail Swiper를 연결하여 제어할 수 있습니다.

사용방법은 및 Swiper API controller 명세서는 아래와 같습니다.

• ✔ Swiper API : controller 명세서 : https://swiperjs.com/swiper-api#controller

galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;

JavaScript  + Swiper API

JavaScript와 Swiper API의 controller를 결합한 스크립트 전체 코드는 아래와 같습니다.

	var swiperTopNum = $('.gallery-top').find('.swiper-slide');
	var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');

	var galleryTop = new Swiper('.gallery-top', {
    	spaceBetween: 10,	//슬라이드 간격
        pagination: {	//페이징 사용자 설정
        	el: ".swiper-pagination",	//페이징 태그 클래스 설정 
			clickable: true,	//버튼 클릭 여부
			type : 'bullets',	//페이징 타입 설정(종류: bullets, fraction, progressbar)
			// Bullet Numbering 설정
        	renderBullet: function (index, className) {
        		return '<span class="' + className + '">' + (index + 1) + "</span>";
        	},
		},
		loop: true,	//슬라이드 반복
		loopedSlides: swiperTopNum.length	//loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
    });

    var galleryThumbs = new Swiper('.gallery-thumbs', {
    	spaceBetween: 0,	//슬라이드 간격
    	navigation: {	//네비게이션 사용자 설정
    		nextEl: '.swiper-button-next',	//다음 버튼 클래스 설정
        	prevEl: '.swiper-button-prev',	//이전 버튼 클래스 설정
    	},
    	centeredSlides: true,	//슬라이드 중앙 배치
    	slidesPerView: 'auto',	//한번에 보여지는 슬라이드 개수(auto 가능)
    	touchRatio: 0.2,	//드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
    	slideToClickedSlide: true,	//슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
		loop: true,	//슬라이드 반복
		loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
    });

	//Main Swiper와 Thumbnail Swiper가 연동제어 서로를 제어
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

Swiper 구현 화면 및 예제 다운로드

위에 'Swiper 슬라이더를 2개로 연동 및 제어하기' 설명에 대한 실제 구현한 화면과 포스팅한 예제를 만들어 다운로드 받아서 공부하실 수 있도록 하였습니다.

다운로드 예제는 구현된 화면은 같으나 Swiper 옵션인 loopedslides 적용한 방법과 적용하지 않은 방법 2개로 만들었습니다.

swiper.css 에서 .gallery-thumbs 클래스 내용중 overflow: hidden; 속성을 주석처리 하고 보시면,

Swiper 옵션인 loopedslide  에 대해서 위에서 설명드렸지만 적용된 여부의 차이점을 확인하실 수 있으리라 생각됩니다.  

  Swiper - '슬라이더 2개 연동 제어' 예제 실습 파일  

마치며..

웹퍼블리싱 프로젝트를 하다보면 꼭 빠지지 않는 요소가 슬라이더라고 생각 됩니다.

때문에 경력이 있는 웹퍼블리셔들은 주로 사용하는 슬라이더 라이브러리가 1~2개 쯤은 있다고 생각됩니다.

슬라이더 라이브러리는 아주 많이 존재합니다.

저도 몇 년 동안 프로젝트를 하면서 항상 슬라이드 구현은 빠지지 않았기에 여러가지 라이브러리를 사용하면서 저에게 맞는 라이브러리를 찾게 되었고,

Swiper Slider 를 현재는 주로 사용하고 있습니다.

매번 프로젝트 마다 사용하는 슬라이더이기에 쉽게 구현할수 있다고 생각하면 쉽지만, 상황에 따라 고객사의 요구사항이 복잡한 경우도 종종 발생합니다.

이럴경우 기본 라이브러 옵션만 가지고는 구현이 불가능하기 때문에 슬라이더 라이브러리에서 제공하는 API와 파라미터가 중요합니다.

Swiper 라이브러리(플러그인)는 이런부분 또한 디테일하게 제공하고 있기에 완성도가 높은 라이브러리라고 생각이 됩니다.

이번에 포스팅한 내용은 프로젝트에서 종종 발생하는 라이브러리의 기본옵션만 가지고 구현할 수 없는 내용에 대하여 다루었습니다.

이 글을 통해서 후배 웹퍼블리셔 분들께서 프로젝트에 투입되어 당황하지 않고, 문제를 조금더 쉽게 해결할 수 있도록 도움이 되었으면 합니다.

AOS

Animate On Scroll Library

프로젝트에서 퍼블리싱 작업 중 세로로 긴 콘텐츠의 메인 또는 서브페이지를 코딩하다 보면,

고객사의 요청에 의해 스크롤되었을 때 콘텐츠 요소의 애니메이션 효과를 퍼블리싱해야 할 경우가 있습니다.

그럴 경우  AOS 또는 ScrollMagic 라이브러리를 사용하면 쉽게 스크롤 애니메이션 효과를 구현할 수 있습니다.

두 가지 모두 사용하기 쉽고, 좋은 스크롤  애니메이션 라이브러리입니다.

저는 이 두 가지 라이브러리를 프로젝트 상황에 따라 사용합니다.

ScrollMagic 라이브러리의 경우 GSAP TweenMax를 알아야 사용하기 편리합니다.

또한 자바스크립트와  jQuery를 알아야 합니다.

애니메이션 효과나 제어를 직접 해야 하기 때문에 시간 소요가 더 많이 됩니다.

그렇기에 AOS 라이브러리보다 애니메이션(속도, 시작 위치, 곡선 등)을 자유롭게 구현할 수 있습니다.

그러나 프로젝트의 시간이 촉박할 경우, ScrollMagic 라이브러리로 퍼블리싱하다 보면 야근이 눈에 훤하죠?

그럴 경우 AOS 라이브러리를 사용하면 쉽게 스크롤 애니메이션을 코딩할 수 있습니다.

AOS 라이브러리는 자바스크립트를 몰라도 쉽게 사용할 수 있습니다.

 또한 많은 효과를 제공하기 때문에 ScrollMagic 라이브러리에 뒤떨어지지 않습니다.

'시간 투자 대비 가성비는 모든 스크롤 애니메이션 라이브러리 중 최고'라고 생각됩니다.

제가 왜 두 가지 라이브러리를 상황에 따라 골라서 사용하는지 AOS와 ScrollMagic 라이브러리의 차이를 아시겠죠?

그럼 지금부터 이번 포스팅의 주제인 AOS 라이브러리에 대해 알아보겠습니다. 

Installation

기본적으로 <head> 태그 안에 aos.js와 aos.css 라이브러리 파일을 불러옵니다.

jQuery 라이브러리도 필요합니다.

aos.js, jQuery.js는 CDN으로 불러오겠습니다.

<head>
	<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
</head>

그다음 <header>, <body>, 스크립트 영역 중 한 곳에 AOS 라이브러리를 사용하기 위한 초기화 스크립트를 작성합니다.

여기까지가 AOS 라이브러리를 사용하기 위한 준비과정입니다.

<script> 
	AOS.init();
	/* 주석부분과 같이 AOS API - Global Setting 가능
	AOS.init({
		offset: 120,
		delay: 0,
		duration: 400,
		easing: 'ease',
		once: false,
		mirror: false,
		anchorPlacement: 'top-bottom'
	});    
	*/
</script>

 사용방법(How to use AOS?)

기본 완성된 기본 사용방법은 아래와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>AOS Animation</title> 
        <!-- AOS 라이브러리 불러오기-->
        <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
    </head>
    <body>
        <!-- AOS 스크립트 초기화 -->
        <script> 
            AOS.init(); 
        </script>
        <!-- //AOS 스크립트 초기화 -->
        <div aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500">
            <!-- 애니메이션 객체 요소 -->
            <!-- //애니메이션 객체 요소 -->
        </div>
    </body>
</html>

※ AOS 라이브러리 애니메이션은 블록 태그(Block Tag)에만 적용 가능합니다. 인라인 태그(Inline Tag)에는 효과가 적용되지 않습니다.

data-aos 옵션 속성

AOS 라이브러리 코드 사용방법을 알았으니, 이제 API 옵션에 대해 알아보겠습니다. 

옵션 속성이 무엇인지 정확히 알아야 제대로 사용할 수 있기 때문입니다.

옵션 속성도 정확히 모른 상태에서 사용방법만 안다는 것은 무의미하겠죠?

※ delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 설정 변경이 가능합니다.

data-aos : Attribute Value

data-aos-easing : Attribute Value

• ✔ linear
• ✔ ease
• ✔ ease-in
• ✔ ease-out
• ✔ ease-in-out
• ✔ ease-in-back
• ✔ ease-out-back
• ✔ ease-in-out-back
• ✔ ease-in-sine
• ✔ ease-out-sine
• ✔ ease-in-out-sine
• ✔ ease-in-quad
• ✔ ease-out-quad
• ✔ ease-in-out-quad
• ✔ ease-in-cubic
• ✔ ease-out-cubic
• ✔ ease-in-quart
• ✔ ease-out-quart
• ✔ ease-in-out-quart

data-aos-anchor-placement : Attribute Value

• ✔ top-bottom
• ✔ top-center
• ✔ top-top
• ✔ center-bottom
• ✔ center-center
• ✔ center-top
• ✔ bottom-center
• ✔ bottom-top

AOS  라이브러리 예제 및 다운로드

AOS Library  공식 사이트 :  https://michalsnik.github.io/aos/

AOS Library  Github : https://github.com/michalsnik/aos

마치며...

여러 가지 스크롤 애니메이션 라이브러리가 있지만, 저는 AOS 라이브러리가 가장 사용하기 쉽다고 생각합니다.

자바스크립트를 잘 몰라도 쉽게 사용할 수 있기에 사용자의 범위도 신입부터 경력자까지 범용성 또한 좋다고 생각합니다.

시간이 촉박한 프로젝트에서 스크롤 애니메이션 퍼블리싱을 구현해야 할 경우, 작업시간이 부족해서 헤매지 마시고 AOS Library로 멋있고 동적인 사이트를 쉽게 만들어 보시기 바랍니다.

맑은커뮤니케이션 저희 퍼블리셔 직원분들도 파이팅!!

감사합니다.

TweenMax 곡선ㆍ라운드 애니메이션

프로젝트 퍼블리싱을 하다 보면, 디자이너 작업자들이 문의를 합니다.

혹시 곡선 형태의 애니메이션 처리 작업이 가능한가요?

퍼블리셔 : 음....

퍼블리셔 : 가능하지만 스크립트로 처리해야하고 0.0.1초 단위로 '가로 1px, 세로 1px씩 변할 때마다 엘리먼트의 좌표를 바꿔줘야 하고너무 복잡....블라 블라

ㆍ

ㆍ

ㆍ

디자이너 : 쉽게 말해주세요.

퍼블리셔 : 프로젝트 시간도 부족하고 해서 하기 힘들 것 같습니다.

디자이너 : 네ㅜㅜ

대부분의 곡선 애니메이션 구현을 요청하면 대부분의 퍼블리셔들은 이렇게 대답을 할 것 같습니다.

하지만 GSAP의 곡선을 처리하는 bezier 속성을 알게 된다면, 간편하게 곡선 애니메이션(라운드 움직임)의 효과를 만들 수 있습니다.

자바스크립트나 jQuery로는 구현할 수 없는 신세계??

그럼 바로 bezier curve에 대해서 알아보겠습니다.

이것을 알게되는 순간 퍼블리셔로써 큰 무기를 가지게 되는 것입니다.

bezier : Array

Target 객체를 정해진 좌표까지 이동을 직선으로 하는 것이 아닌 부드러운 곡선으로 이동합니다.

코드 작성 기본 규칙

☆ GSAP 라이브러리로는 bezier curve 곡선을 사용할 수 없습니다. 

bezier 속성을 사용하기 위해서는 GSAP의 TweenMax 라이브러리를 사용해야 합니다.

저는 프로젝트 작업 시 GSAP 라이브러리보다는 TweenMax 라이브러리를 통합으로 사용합니다. 

왜냐하면TweenMax 라이브러리에서는 GSAP 라이브러리가 가지고 있는 기능들을 모두 사용 가능합니다.

TweenMax library CDN : https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js

☆ bezier 코드는 CSS의 position 속성이 없다면 사용 불가능합니다. 그러나 애니메이션 키값을 'top', 'left'가 아닌 'x', 'y' 키값으로 좌표값을 작성하여 트윈 한다면 CSS position 속성 없이 애니메이션이 가능합니다.

☆ bezier 속성 안에 ease, repeat, yoyo 등의 gsap 속성을 사용할 수 있습니다. ease, repeat, yoyo 속성은 기초 1~3편 포스팅에서 작성했습니다. 기억나지 않으시면 다시 한번 보시길 추천드립니다.  

bezier 속성인 curviness, autoRotate, type 속성을 이용한 bezier 곡선

curviness : 커브의 강도를 나타냅니다. 키값이 크면 클수록 역동적으로 애니메이션 됩니다.

autoRotate : true를 키값으로 주면  진행방향이 '곡선의 움직임 방향'으로 엘리먼트가 틀어져 애니메이션이 발생하며, false를 키값으로 주면 진행방향과 상관없이 target 모습 그대로 틀어짐 없이 애니메이션 됩니다.

type : 기본값은 "thru"이며 "soft", "quadratic", "cubic" 4가지입니다. 첨부해드리는 예제를 통해서 보시면 차이를 알 수 있습니다.

좌표 키값과,  기본 GSAP 속성을 사용한 bezier 곡선

  TweenMax - bezier base 예제 실습 파일  

curviness, autoRotate 속성 값을 적용한 bezier 곡선

  TweenMax - bezier curviness, autoRotate 예제 실습 파일  

type 속성 값을 적용한 bezier 곡선

  TweenMax - bezier type 예제 실습 파일  

bezier 마치며...

GSAP bezier 곡선 움직임(애니메이션)에 대하여 모두 알아보았습니다.

코드 작성이 자바스크립트나, jQuery 작성이 직관적이고 쉽게 곡선 애니메이션을 만들 수 있다는 것을 보셨죠?

이것을 끝으로 GSAPㆍTweenMax 라이브러리 포스팅을 마무리하고자 합니다.

GSAP 설치방법부터 기초, 심화과정의 세분화 과정을 통해 여러 편에 걸쳐 포스팅하였습니다.

GSAP 라이브러리 포스팅을 시작할 때 정리해야 할 내용들이 많아서 걱정이 많이 됐는데, 완전히 끝나고 나니 시원 섭섭하네요!

GSAPㆍTweenMax 라이브러리 포스팅 전편이 퍼블리싱하는데 길잡이가 되길 바라며, 마무리하겠습니다.

감사합니다.

GSAP Callback (트윈 제어 - 콜백 함수)

callback은 이벤트에 전달해주는 콜백 함수입니다.

GSAP는 함수를 호출하고 파라미터를 넘기는 과정을 편하게 제어할 수 있습니다.

GSAP 콜백 함수는 onInit, onStart, onComplete, onUpdate, onRepeat, onReverseComplete 가 있습니다.

이번 포스팅에서는 위 콜백 함수에 대해 알아보고자 하며, 예제는 자주 사용하는 콜백 함수 위주로 작성할 것이며,

사용빈도가 낮은 콜백 함수는 간단하게 설명 위주로 포스팅하고자 합니다.

onInit

애니메이션(Tween)이 시작되기 바로 전에 함수를 호출합니다.

onStart와 별 차이가 없지만, 당연히 onStart 보다 빨리 호출됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onInit</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onInit: motionOnit
            });

            function motionOnit() {
                alert('GSAP Tween 콜백함수 시작 전'); //Tween이 시작되기 바로 전에 호출
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

  GSAP - onInit 예제 실습 파일  

onStart

애니메이션(Tween)이 시작할 때 함수를 호출합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onStart</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionStart
            });

            function motionStart() {
                alert('GSAP Tween 콜백함수 시작'); //Tween이 시작
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>

  GSAP - onStart 예제 실습 파일  

onComplete

애니메이션(Tween)이 종료되었을 때 함수를 호출합니다.

퍼블리셔가 프로젝트 퍼블리싱 작업 시 GSAP 콜백 함수 중 가장 사용빈도가 높습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onComplete: motionOncomplete
            });

            function motionOncomplete() {
                alert('GSAP Tween 콜백함수 종료');
                gsap.to('.tweenbox', 3, {
                    marginLeft: 0,
                    backgroundColor: 'lightcoral',
                    border: '2px solid crimson',
                    borderRadius: 0
                }); 
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

  GSAP - onComplete 예제 실습 파일  

Event(함수) + Params

애니메이션(Tween) 중 호출하고자 하는 함수 뒤에 Params 파라미터를 붙여 줄 수 있습니다.

코드 문법 규칙 

Ⅰ. 배열의 형태로 값을 넘겨주어야 합니다.

Ⅱ.  자기 자신의 값을 넘겨줄 때에는 "{self}"라고 값을 주어야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            var outText = document.querySelector(".motion-message");
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionMessage,
                onStartParams: ['GSAP Tween 콜백함수 시작 메시지','START'],
                onComplete: motionMessage,
                onCompleteParams: ['GSAP Tween 콜백함수 종료 메시지', 'END']
            });

            function motionMessage(message1, message2) {
                outText.innerHTML += message1 + '-' + message2 + '<br>';
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
        .motion-message{margin:30px 10px}
    </style>
</head>
<body>
    <div class="tweenbox"></div>
    <div class="motion-message"></div>
</body>
</html>

  GSAP - params 예제 실습 파일  

onUpdate

애니메이션(Tween)이 계속 진행되는 동안 호출합니다.

해당 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다. 

onRepeat

애니메이션(Tween)이 반복될 때마다 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다. 

onReverseComplete

애니메이션(Tween)이 반전(Reverse) 된 후 모션이 완료되었을 때 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백함수 설명으로 대신합니다. 

GSAP Callback(콜백 함수) 마치며...

포스팅했던 GSAP 기초 1~기초 3까지 내용을 모두 학습하셨다면, 웹퍼블싱 하면서 동적인 화면 구현의 프로젝트는 충분히 수행 가능하리라 생각됩니다.

하지만 퍼블리셔로서 발전하고 싶은 욕구를 만족시키기 위해 콜백 함수까지 알고 있다면 더욱 좋다고 생각합니다.

가끔 프로젝트 작업 시 GSAP(트윈 맥스)를 사용하다 콜백 함수를 사용해야 할 경우도 있습니다.  

다음 포스팅은 GSAP(TweenMax) 심화 마지막 편으로 곡선 방향의 애니메이션을 하는 방법을 알아보겠습니다.

감사합니다.

GSAP Variables (트윈 제어 - Style Controlling )

이전 '기초 2 포스팅' 에서는 GSAP는 움직임을 제어할 수 이벤트 컨트롤링에 대해 알아보았습니다.

이번 포스팅 주제는 스타일 컨트롤하는 방법에 대해서 다루어 보겠습니다.

CSS를 잘 다루는 퍼블리셔라면 이번 주제의 내용을 쉽게 이해하실 수 있으리라 생각됩니다.

또한 Easing 컨트롤에 대해 같이 알아보겠습니다.

CSS Style 트윈 기본 문법

기본적인 문법은 CSS 작성방법과 동일하며, CSS 코드를 모두 사용 가능합니다.

그러나 background-color, margin-top, background-image와 같이 css에 '-' 가 포함되어 있는 문법을 사용해 트윈 스타일을 변경하고자 할 경우에는 카멜 표기법을 사용합니다.

카멜 표기법 사용방법은 '-' 뒤에 영문을 대문자로 작성합니다.

예를 들어 backgroundColor, marginTop, backgroundImage로 작성합니다.

gsap.to('.tweenbox', 3, {width:300, height:300, backgroundColor:'#ccc'});

  GSAP - CSS Style Control 예제 실습 파일  

GSAP 제공하는 Style 트윈 기본 문법

CSS Style과 동일하게 gsap에 내장된 Style 변경 방법입니다.

장점은 CSS Style 보다 코드가 좀 간편합니다.

CSS만 사용해도 무리가 없으나, 더 알고 있다고 나쁜 건 없겠죠?

GSAP에서 제공하는 Style과 CSS Style의 문법 차이를 아래와 같이 간단하게 정리해 보겠습니다.

  GSAP Style Control 작성 문법  

gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });

  GSAP - GSAP Style Control 예제 실습 파일  

GSAP Easing

GSAP는 Jquery처럼 easing 함수를 제공합니다.

easing의 function은 애니메이션이 진행됨에 따라 지정한 값의 속도 변화 움직임을 컨트롤하는 설정 값입니다.

그렇기 때문에 움직임을 표현할 때 없어서는 안 될 중요한 요소입니다.

GSAP에서 기본 easeing 값은 Power1.easeOut 입니다.

  CDN - Easing 라이브러리 적용방법  

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN GSAP, Easing -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/EasePack.min.js"></script>
</head>
<body>

</body>
</html>

  Easing  코드 적용방법  

TweenMax.staggerFrom('.tweenbox', 1, {
	ease: Back.easeOut,
	opacity: 0,
	y: 200,
	delay: 0.5
}, 0.2);

  GSAP - GSAP Easing Control 예제 실습 파일  

Easing의 종류는 GSAP 공식 사이트에서 easing을 종류별 구현하여 확인할 수 있습니다.

또한 예시, 실행을 해보고 easing 코드를 복사하면 쉽게 사용할 수 있습니다.

백 번 설명하여 포스팅하는 것보다는 직접 보시면 이해가 더 빠르리라 생각되어, GSAP 공식 사이트의 easing 메뉴 URL을 아래에 공유해 드립니다.

https://greensock.com/docs/Easing

GSAP Controlling, Easing 마치며...

GSAP Style, Easing Controlling에 대하여 정리해 보았습니다.

이전에 작성한 '기초 2', 이번에 작성한 '기초 3'을 통해 GSAP의 이벤트, 스타일,  Easing 컨트롤에 대해 모두 다루어 보았습니다.

이 글을 보신 분들 모두 퍼블리싱하시면서 GSAP 애니메이션을 떡 주무르듯이 컨트롤하실 수 있는 고수가 되실 수 있었으면 합니다.

다음 포스팅은 GSAP eventCallback 함수에 대해 간단하게 알아 보겠습니다.

감사합니다.

GSAP Variables (트윈 제어 - Tween Controlling )

GSAP는 움직임을 제어할 수 있는 메서드를 제공합니다.

이번 포스팅에서는 repeat(), repeatDelay(), delay(), yoyo(), start(), resume(), restart(), reverse(), isActive(), pause(), seek(), timeScale() 에 대해 예제와 설명을 통해 알아가 보겠습니다. 

repeat(number)

애니메이션(트윈이라 정의) 반복 횟수 설정합니다.

기본값은 1이며, -1을 설정하면 무한반복됩니다. delay가 포함되어 있는 경우 첫 번째 트윈만 delay가 적용되고, repeat가 반복 실행되는 두 번째부터는 delay가 적용되지 않습니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.repeat() 예제 실습 파일  

repeatDelay(number)

트윈 반복 시  지연 시간을 초 단위로 설정합니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
		repeatDelay: 2 // 반복 지연시간 설정(초 단위)
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.repeatDelay() 예제 실습 파일  

delay(number)

트윈 지연 시간을 초 단위로 설정합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	justify-content:center;
	padding:200px 0;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	$('.btn').click(function(){
		gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });
	});
});

//HTML
<a href="#none" class="btn">Toggle Tween Delay</a>
<div class="content">
	<div class="tweenbox"></div>
</div>

  gsap.delay() 예제 실습 파일  

yoyo(Boolean)

트윈을 앞뒤로 반복하여 실행합니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	TweenMax.to('.tweenbox', 3, {
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: -1, //repeat 값이 -1 일 경우 무한 반복
		yoyo: true // 애니메이션을 앞뒤로 반복하여 실행 시킴 - yoyo: Boolean 
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.yoyo() 예제 실습 파일  

pause( ), resume( ), restart( )

  pause( )   - 트윈의 현재 위치에서 일시 중지하는 설정합니다.

  resume( )   - 방향을 바꾸지 않고 현재 위치에서 트윈을 재시작하는 설정합니다.

  restart( )   - 트윈을 처음부터 다시 시작하는 설정합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = TweenMax.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:500, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenPause(){
	tweenBox.pause();   //멈춤
}

function tweenResume(){
	tweenBox.resume();  //재시작
}

function tweenRestart(){
	tweenBox.restart(); //처음부터 다시시작
}


//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenPause();" class="btn">Pause()</a>
<a href="javascript:tweenResume();" class="btn">Resume()</a>
<a href="javascript:tweenRestart();" class="btn">Restart()</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  pause(), resume(), restart() 예제 실습 파일  

reverse( )

트윈 재생을 역방향으로 설정 합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox1");
	tweenBox = gsap.fromTo(motionBox, 2, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30})
}

function tweenReverse(){
	tweenBox.reverse();   //역방향으로 진행
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenReverse();" class="btn">Reverse()</a>
<div class="content">
    <div id="tweenBox1" class="tweenbox"></div>
</div>

  reverse() 예제 실습 파일  

isActive( )

트윈의 활성화 여부를 나타냅니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}
button {margin:10px}

//JS
$(function(){
	var tween = gsap.to('.tweenbox', 2, {
		x: 300, 
		backgroundColor: '#ccc', 
		border: '2px solid #222', 
		borderRadius: 30,
		reversed: true //reversed() : 애니메이션의 역방향에 대한 여부 및 설정
	});

	$('#tweenBox').click(function(){
		if(!tween.isActive()){  //isActive() : 애니메이션 활성화 여부
			tween.reversed() ? tween.play() : tween.reverse();  //삼항연산자 :  조건 ? ture : false
		}
	});
});

//HTML
<div class="tweenbox"></div>
<button id="tweenBox">Toggle Tween Reverse</button>

  isActive() 예제 실습 파일  

seek(number)

트윈을 지정한 위치로 이동 설정 합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenSeek(){
	tweenBox.seek(3);   //지정한 위치로 이동(3초 위치로)
}

//HTML
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  seek() 예제 실습 파일  

timeScale(number)

트윈의 속도 증가와 감속을 설정합니다.

기본값은 1이며, 1보다 작을 경우 속도가 감소하며, 값이 1보다 클 경우 속도가 증가합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:700, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenTimescale(){
	tweenBox.timeScale(0.5); //배율, 속도 감소(0.5는 최초 속도의 절반 느려짐 의미함) / timeScale(2) - 속도가 2배 빨라짐 
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenTimescale();" class="btn">Timescale(0.5)</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  timeScale() 예제 실습 파일  

GSAP Controlling을 마치며...

이번 포스팅은 트윈 컨트롤 중  이벤트 발생 시 트윈 컨트롤에 대해 주로 알아보았습니다.

GSAP 트윈 컨트롤 포스팅해드린 내용만 완벽하게 숙지하신다면, 웹퍼블리싱(이벤트 발생 시트 윈 컨트롤 ) 하는데 문제가 없으리라 생각됩니다.

다음 편에는 트윈 컨트롤 중 style 컨트롤에 대해서 포스팅 하고자 합니다.

퍼블리셔가 해야 할 공부가 너무 많죠??

다들 힘내서 퍼블리싱 합시다!!  파이팅!!!!!!

GSAP 트윈 기본 문법

GSAP는 자바스크립트 객체의 숫자형 속성을 통해 애니메이션(앞으로 이것을 '트윈'이라 정의합니다.)을 실행합니다.

예를 들어, 특정 속성의 값을 3초 동안 모서리에 라운드 트윈을 주는 기본 문법 코드는 다음과 같습니다.

gsap.to('.tweenbox', 3, {borderRadius: 30});

첫 번째 파라미터 값은 트윈 할 목표 대상(Target), 두 번째 파라미터 값은 지속시간(Duration), 세 번째 파라미터 값은 트윈 할 목표 대상(Target)의 변화된 다른 속성(Properties) 값으로 변화가 발생하면서, 트윈이 표현됩니다. 

GSAP 메서드 설명에 앞서서 기본 문법에 설명드렸습니다.

지금부터는 기본 메서드인 .to(), .from(),  fromTo(), staggerTo(), staggerFrom(), TimelineMax()에 대해서 다루겠습니다.

gsap.to( )

this(Target) 속성에서 지정한 속성까지 트윈

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.to('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

  gsap.to() 예제 실습 파일  

gsap.from( )

지정한 속성에서 this(Target) 속성까지 트윈 

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.from('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

  gsap.from() 예제 실습 파일  

gsap.fromTo( )

from에서 지정된 값에서 to가 지정된 값으로 트윈

gsap.fromTo(target, duration, {from vars}, {to vars});

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.fromTo('.tweenbox', 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});

  gsap.fromTo() 예제 실습 파일  

TweenMax.staggerTo( )

TweenMax.staggerTo(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

여러 개의 배열(Array)인 this(Target) 속성을  순차적(시간 차)으로 지정한 속성까지 트윈 합니다.

stagger 메서드는 공식 문법이 gsap로 바뀌기 이전 버전(2.1.3 - Version)인 TweenMax 였을 때 존재했던 메서드이지만 gsap로 공식 문법(3.0.0 - Version)이 변경되고, TimelineMax 하나의 메서드로 통일된 것 같습니다.

stagger(Target 배열) : 각 배열 트윈 사이의 모션 실행,  TimelineMax(트윈 배열) : this(Target) 트윈이 종료 후 모션 실행합니다.

이렇듯 엄연히 두 개의 메서드는 결이 다른데 왜 없어졌는지 모르겠습니다. 

개인적으로 저는 stagger 메서드를 더 선호합니다.

그러나 현재 최신 버전에서도 하위 버전을 지원하므로 TweenMax.staggerTo()를 사용 가능합니다.

gsap를 몇 년 전부터 미리 알지 못했다면, 이렇게 좋은 메서드를 사용하지 못했을 메서드가 될 뻔했습니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	padding:100px 30px;
	border:1px solid #000
}
ul {display:flex}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
function tweenStaggerTo(){
	var m0 = document.getElementById("e0");
	var m1 = document.getElementById("e1");
	var m2 = document.getElementById("e2");
	var m3 = document.getElementById("e3");
	var m4 = document.getElementById("e4");
	TweenMax.staggerTo([m0, m1, m2, m3, m4], 1, { rotation:180 }, 0.5);	//TweenMax.staggerTo([객체1, 객체2, 객체3], 시간, {트윈 모션}, 모션 사이의 딜레이 시간);
}

//HTML
<a href="javascript:tweenStaggerTo();" class="btn">Start</a>
<div class="content">
	<ul>
		<li id="e0" class="tweenbox">1</li>
		<li id="e1" class="tweenbox">2</li>
		<li id="e2" class="tweenbox">3</li>
		<li id="e3" class="tweenbox">4</li>
		<li id="e4" class="tweenbox">5</li>
	</ul>
</div>

  TweenMax.staggerTo() 예제 실습 파일  

TweenMax.staggerFrom( )

여러 개의 배열(Array)을 지정한 속성에서 this(Target) 속성까지  순차적(시간 차)으로  트윈 합니다.

TweenMax.staggerFrom(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

//CSS
ul {
	display:flex;
	justify-content:center;
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
TweenMax.staggerFrom('.tweenbox', 1, {
	ease: Back.easeOut,
	opacity: 0,
	y: 200,
	delay: 0.5
}, 0.2);

//HTML
<ul>
	<li class="tweenbox">1</li>
	<li class="tweenbox">2</li>
	<li class="tweenbox">3</li>
	<li class="tweenbox">4</li>
	<li class="tweenbox">5</li>
</ul>

  TweenMax.staggerFrom() 예제 실습 파일  

TimelineMax( )

this(Target) 하나의 객체를 순차적으로 트윈 하는 타임라인  문법입니다. 

gsap.to()가 연달아 있는 코드와 비슷합니다.

//CSS
ul {
	display:flex;
	justify-content:center
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	color:#fff;
	list-style:none
}

//JS
var timeLine = new TimelineMax();
timeLine.to('.tweenbox', 1, { backgroundColor: '#ddd' })
	.to('.tweenbox', 1, { backgroundColor: 'cyan' })
	.to('.tweenbox', 1, { backgroundColor: '#ccc' });
        
//HTML
<ul>
	<li class="tweenbox">1</li>
</ul>

  TimelineMax() 예제 실습 파일  

GSAP 메서드(기초) 마치며...

GSAP 메서드는 이정도만 숙지하고 계셔도 동적인 화면을 만드실 때 문제가 없으시리 생각됩니다.

제가 포스팅한 GSAP 메서드(기초)편이 퍼블리싱하는데 도움이 되었으면 합니다.

다음 포스팅은 GSAP VARIABLES 대해서 알아 보겠습니다.

VARIABLES는 알아야 할 것들이 많기 때문에 2~3편의 글을 작성하고자 계획 중입니다.

기대해 주세요!!!

프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다. 
애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까?
바로~~ 바로!!!
트윈맥스 애니메이션 자바스크립트 라이브러리에 대해 여러 편에 걸쳐 포스팅하여 제대로 알아보겠습니다.

GSAP

GreenSock Animation Platform (GSAP)는 퍼블리싱을 하면서 애니메이션을 쉽게 사용할 수 있는 강력한 타임라인 기반의 전용 애니메이션 자바스크립트 라이브러리입니다.

GSAP는 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있습니다. 

또한 GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋습니다.

이번 가이드에서는 GSAP의 세팅방법과 기본문법에 대해서 알아볼 것입니다.

Get GSAP (Installation)

코드를 작성하기 전에, HTML 파일에 GSAP 라이브러리를 추가해야 합니다.

CDN을 이용하여 추가해도 되고 파일을 다운로드하여 추가해도 됩니다.

당연히 NPM으로 설치도 가능합니다.

CDN 버전 선택 방법 : https://cdnjs.com/libraries/gsap/3.8.0

Download 방법 : https://greensock.com/docs/v3/Installation/#download

NPM 설치 방법 : https://greensock.com/docs/v3/Installation/#npm-club

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>		
    
	<!-- local(download file) -->
	<script src="js/gsap.min.js"></script>
</head>
<body>

</body>
</html>

기본 문법

gsap.to(target:Object, duration:Number, {variables:Object});

.to()는 일반적으로  제이쿼리의 .animate()라고 생각하면 됩니다.

target : Object - 대상 오브젝트(인자)

duration : Number - 애니메이션 지속 시간 /(초)

variables : Object - target에 부여할 키 값

  문법 작성 기본규칙  

Ⅰ. CSS  키값은 동일하지만 border-radius, border-right 와 같이 '-' 문자가 들어가 있을 경우 카멜 표기법을 사용하면 됩니다. (EX : borderRadius, borderRight)

Ⅱ. target은 유연하게 사용 가능하기 때문에 제이쿼리 형태로 사용해도 되고 아니어도 됩니다. (EX : $(".tweenbox") , .tweenbox, 변수명 ) 

입문 가이드 마치며...

다음 포스팅은 GSAP의 메서드와 VARIABLES에 대해서 가이드할 계획입니다.

이번 입문 가이드에 대해서 이해 못하셔도 됩니다. 다음 포스팅에서는 예제를 작성하여 설명할 예정이니까요!!

좀 더 쉽겠죠??

저만의 생각은 아니겠죠??

제가 작성하고 공유하는 가이드가 웹퍼블리싱 하는데 도움이 되었으면 합니다.

안녕하세요, 맑은커뮤니케이션의 퍼블리셔 윤상원입니다.

오늘은 IE10 이상을 지원하는 페이지 작업을 할 때 유용하게 쓰이는 Swiper에 대해 정리해보았습니다.

사용 방법

1단계: 연결(두 가지 방법)

CDN에서 Swiper 사용하기

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> // CSS 파일
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> // 스크립트 파일

주의사항: swiper에서 지원하는 min 파일의 주소가 몇 년 주기로 바뀔 수 있습니다.

위와 같은 연결 링크가 아닌 로컬 파일로 연결하면 변경 위험 없이 사용할 수 있습니다.

예시)

<!DOCTYPE html>
<html lang="ko">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css"> // CSS 파일 연결
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script> // 스크립트 파일 연결
</body>
</html>

2단계: 기본 레이아웃 추가

<div class="swiper-container">
  <div class="swiper-wrapper">
    // 메인 슬라이드
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  
  // 페이지네이션
  <div class="swiper-pagination"></div>

  // 슬라이드 좌,우 버튼
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  // 스크롤바
  <div class="swiper-scrollbar"></div>
</div>

swiper-container > swiper-wrapper > swiper-slide 순으로 감싸져있어야 하고,

swiper-slide가 슬라이드의 내용이 됩니다.

3단계: 스크립트로 Swiper 초기화

new Swiper('.swiper-container');

.swiper-container 클래스를 포함한 다른 레이아웃 클래스의 이름을 변경할 경우에는 css, js 파일에 있는 클래스 이름도 같이 변경해야 합니다.

슬라이드 옵션

Swiper에는 다양한 옵션들이 있습니다.

옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나,

아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다.

옵션 적용하는 방법

스크립트 파일에 넣는 코드입니다.

옵션이 필요없을 때

new Swiper('.swiper-container');

옵션을 적용해야 할 때

var mySwiper = new Swiper('.swiper-container', {

   // 여기에 옵션을 넣어야 합니다.

   // 예시 코드
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  autoplay: {
    delay: 3000
  }
});

자주 사용하는 Swiper API

예제처럼 필요한 옵션과 값을 적어주면 적용할 수 있습니다.

동작이 아닌 버튼이나 스크롤 바가 생기는 등의 옵션은 해당 html 코드도 같이 넣어주어야 합니다.

옵션 변수
예시 코드	코드 설명
allowTouchMove: false	false값을 넣을 경우 슬라이드를 터치를 통해 직접 움직일 수 없습니다. slidePrev, slideNext와 같은 슬라이드 조작 버튼이나 autoplay와 같은 외부 요소를 통해서는 움직일 수 있습니다.
autoHeight: true	true로 설정하면 슬라이드 내용의 높이에 따라 자동으로 슬라이드의 높이를 조정합니다.
breakpoints (예시 코드 →)	브라우저의 크기별로 반응형 설정을 할 수 있습니다. breakpoints: {         // 브라우저 320px 크기일 경우         320: { slidesPerView: 3, spaceBetween: 20, },         // 브라우저 480px 크기일 경우         480: { slidesPerView: 3, spaceBetween: 30, },         // 브라우저 640px 크기일 경우         640: { slidesPerView: 4, spaceBetween: 40, } },
direction: 'horizontal' direction: 'vertical'	슬라이드의 진행 방향을 정합니다. horizontal = 가로(기본) | vertical = 세로
effect: 'slide'	'slide' | 'fade' | 'cube' | 'coverflow' | 'flip' 다섯 가지의 슬라이드 전환 효과를 부여할 수 있습니다. effect: 'slide' // 기본 슬라이드 전환 effect: 'fade' // 희미해지면서 슬라이드 전환 effect: 'cube' // 큐브 형태로 전환 effect: 'coverflow' // 약간의 그림자와 함께 슬라이드를 밀어내며 전환 effect: 'flip' // 카드를 뒤집듯이 전환
enabled: false	슬라이드의 활성화 여부를 정할 수 있습니다. false 값을 넣으면 슬라이드의 모든 요소가 비활성화됩니다.
followFinger: false	슬라이더를 터치하고 놓을 때만 애니메이션이 적용됩니다. effect 옵션과 함께 사용하면 슬라이드 사용자가 터치로 슬라이드 애니메이션을 마음대로 움직일 수 없고 터치를 끝냈을 때만 적용됩니다. 더보기 더보기 [followFinger: true(적용 전)] [followFinger: false(적용 후)]
grabCursor: true	데스크탑에서 슬라이드에 커서를 올렸을 때 그랩 커서를 보여줍니다.
loop: true	슬라이드를 계속 반복합니다. [슬라이드 순서] false: slide 1 → slide 2 → slide 3 → end true: slide 1 → slide 2 → slide 3 → slide 1 → ……
on	이벤트 핸들러를 등록할 때 사용합니다.
slidesPerView: 1	슬라이드 표시 개수입니다. 더보기 더보기 [slidesPerView: 2] [slidesPerView: 3]
spaceBetween: 0	슬라이드 간 거리를 조절합니다. (px 단위) 더보기 더보기 [spaceBetween: 20]
speed: 1000	슬라이드가 전환될 때의 시간을 지정합니다. (밀리초 단위, 1000 = 1초)
touchRatio: 1	터치 비율을 조정합니다. 숫자가 올라갈수록 슬라이드를 넘길 때 필요한 터치 동작이 줄어듭니다.

스와이퍼 공식 홈페이지에는 나오지 않는 방법들

한 페이지에서 스와이퍼를 여러 번 사용해야 할 때 선언하는 방법

// 첫번째 슬라이드입니다.
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

// 두번째 슬라이드입니다.
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

// 첫번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper1 = new Swiper('.swiper1', {

	// 옵션을 넣어주세요.
});

// 두번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper2 = new Swiper('.swiper2', {

	// 옵션을 넣어주세요.
});

슬라이드 버튼을 swiper-container 밖으로 이동시키는 방법

더보기

더보기

작업을 하다보면 슬라이드의 버튼을 컨테이너 밖으로 이동시키고 싶은데 화면에서 사라질 때가 있습니다.

그 이유는 .swiper-container 안에 들어간 overflow:hidden 속성 때문인데요,

슬라이드를 사용하기 위해선 overflow 속성을 끌 수 없으니 이 방법을 사용하면 해결할 수 있습니다.

 

[HTML] - 기존

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">슬라이드 1</div>
        <div class="swiper-slide">슬라이드 2</div>
        <div class="swiper-slide">슬라이드 3</div>
    </div>
        
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

 [HTML] - 수정 후

<div> // 임의의 DIV
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">슬라이드 1</div>
            <div class="swiper-slide">슬라이드 2</div>
            <div class="swiper-slide">슬라이드 3</div>
        </div>
    </div>
    
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

기존에 .swiper-container 안에 있던 버튼 두 가지를 밖으로 빼내고 전체를 임의의 div를 새로 감싼 모습입니다.

그리고 이제 새로 감싼 div에 position:relative를 추가하고,

.swiper-container에 있던 position:relative를 position:static 으로 변경해주시면 됩니다.

 

[결과 화면]

스와이퍼 홈페이지에서 더 많은 옵션과 예제를 확인할 수 있습니다.

옵션:  https://swiperjs.com/api/

예제:  https://swiperjs.com/demos/

감사합니다.

안녕하세요, 맑은커뮤니케이션의 퍼블리셔 윤상원입니다.

오늘은 IE10 이상을 지원하는 페이지 작업을 할 때 유용하게 쓰이는 Swiper에 대해 정리해보았습니다.

사용 방법

1단계: 연결(두 가지 방법)

1. 파일을 다운로드하지 않고 html에서 CDN 연결

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

2. 파일을 다운로드해서 html 연결

https://github.com/nolimits4web/swiper/archive/v5.3.0.zip

예시)

<!DOCTYPE html>
<html lang="ko">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

CSS, JS 파일은 package 폴더 안에서 찾아볼 수 있습니다.

2단계: 기본 레이아웃 추가

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
</div>

swiper-container > swiper-wrapper > swiper-slide 순으로 감싸져있어야 하고,

swiper-slide가 슬라이드의 내용이 됩니다.

3단계: 자바스크립트에서 Swiper 초기화

new Swiper('.swiper-container');

swiper-container라는 클래스 이름은 변경하지 않아야 합니다.

예제

See the Pen 간단한 스와이퍼 예제 by 윤 시대 (@yoonsangwon) on CodePen.

다른 옵션을 넣지 않고 1번부터 3번까지의 내용을 적용한 예제입니다.

슬라이드 옵션

Swiper에는 다양한 옵션들이 있습니다.

옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나,

아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다.

슬라이드 옵션 예제

See the Pen 슬라이드 옵션 by 윤 시대 (@yoonsangwon) on CodePen.

예제처럼 필요한 옵션과 값을 적어주면 적용할 수 있습니다.

동작이 아닌 버튼이나 스크롤 바가 생기는 등의 옵션은 해당 html 코드도 같이 넣어주어야 합니다.

옵션 적용하는 방법

사용방법 3번이 Swiper를 초기화하는 방법(한 줄)이었다면 옵션을 추가할 때는 코드의 모양이 바뀌어야 합니다.(여러 줄)

옵션이 필요없을 때

new Swiper('.swiper-container');

옵션을 적용해야 할 때

var mySwiper = new Swiper('.swiper-container', {

   // 여기에 옵션을 넣어야 합니다.

});

자주 사용하는 옵션 목록 ('더보기'를 클릭하면 옵션을 볼 수 있습니다)

Navigation(페이지를 넘기는 버튼)

<div class="swiper-button-prev"></div> // 이전 페이지
<div class="swiper-button-next"></div> // 다음 페이지

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
});

Pagination(페이지의 순서를 나타내는 불릿)

<div class="swiper-pagination"></div>

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

자동 재생(1000 = 1초)

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 2000,
  },
});

한 번에 여러 장의 슬라이드를 표현하는 방법 + 슬라이드 무한 반복

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3, // 보여지는 슬라이드 수
    spaceBetween: 30, // 슬라이드 간의 거리(px 단위)
    loop: true, // 슬라이드 무한 반복
    centeredSlides: true, // 다음 슬라이드의 모습이 50%만 보입니다.(중앙)
});

스와이퍼 홈페이지에서 더 많은 옵션과 예제를 확인할 수 있습니다.

옵션:  https://swiperjs.com/api/

예제:  https://swiperjs.com/demos/

홈페이지에는 나오지 않는 방법들

한 페이지에서 스와이퍼를 여러 번 사용해야 할 때 선언하는 방법

// 첫번째 슬라이드입니다.
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

// 두번째 슬라이드입니다.
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

// 첫번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper1 = new Swiper('.swiper1', {

	// 옵션을 넣어주세요.
});

// 두번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper2 = new Swiper('.swiper2', {

	// 옵션을 넣어주세요.
});

슬라이드 버튼을 swiper-container 밖으로 이동시키는 방법

더보기

작업을 하다보면 슬라이드의 버튼을 컨테이너 밖으로 이동시키고 싶은데 화면에서 사라질 때가 있습니다.

그 이유는 .swiper-container 안에 들어간 overflow:hidden 속성 때문인데요,

슬라이드를 사용하기 위해선 overflow 속성을 끌 수 없으니 이 방법을 사용하면 해결할 수 있습니다.

 

[HTML] - 기존

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">슬라이드 1</div>
        <div class="swiper-slide">슬라이드 2</div>
        <div class="swiper-slide">슬라이드 3</div>
    </div>
        
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

 [HTML] - 수정 후

<div> // 임의의 DIV
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">슬라이드 1</div>
            <div class="swiper-slide">슬라이드 2</div>
            <div class="swiper-slide">슬라이드 3</div>
        </div>
    </div>
    
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

기존에 .swiper-container 안에 있던 버튼 두 가지를 밖으로 빼내고 전체를 임의의 div를 새로 감싼 모습입니다.

그리고 이제 새로 감싼 div에 position:relative를 추가하고,

.swiper-container에 있던 position:relative를 position:static 으로 변경해주시면 됩니다.

 

[결과 화면]

감사합니다.

안녕하세요

(주)맑은커뮤니케이션에 근무하는 유아영입니다.

오늘은 placeholder에 대해 알아보려고 하는데요,

HTML5의 placeholder 속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용됩니다.

이러한 힌트는 사용자가 입력상자에 데이터를 입력하는데 도움을 줍니다.

사용 방법은 <input type="text" placeholder="내용을 입력하세요."> 이렇게 써줄 수가 있는데요.

하지만, IE 6~9 사이의 브라우저는 HTML5의 placeholder 속성을 지원하지 않습니다.

해결 방법을 알아볼까요?

1. https://github.com/mathiasbynens/jquery-placeholder

위의 url에서 스크립트를 다운받는다.

placeholder.js 를 사용하면 IE9 이하는 .placeholder 이라는 클래스가 자동으로 생성된다.

2. <script type="text/javascript" src="js/jquery.placeholder.js"></script>

코드를 추가한다.

3. js파일에 $('input, textarea').placeholder();

코드를 추가한다.

4. css.파일에 .placeholder 클래스를 이용해 속성을 주면 끝납니다.

위의 내용을 예제를 통해 한 번 살펴볼까요?

See the Pen dwBoOj by ahyoung (@ahyoung) on CodePen.

::placeholder 선택자로 선택하여 스타일을 줄 수 있습니다.

input::placeholder : Chrome, Firefox, Opera, Safari 최신 버전에서는 적용이 잘 됩니다.

하지만 Chrome, Firefox, Opera, Safari의 구버전과 IE에서는 적용되지 않습니다.

그 해결 방법은 아래와 같습니다.

input::-webkit-input-placeholder : Chrome

input:-ms-input-placeholder : IE

input:-mos-input-placeholder : Firefox

텍스트로만 보면 이해가 안 될 수 있는데요

예제를 통해 같이 한 번 알아볼까요?

See the Pen gZJYGb by ahyoung (@ahyoung) on CodePen.

Tip) 다 적용해도 파이어폭스에서 이상하게 뿌옇게 보이는 현상을 보실 수가 있는데요, 

그럴 때는 input::placeholder { opacity: 1 } 을 넣어주면 해결이 됩니다.

placeholder를 사용하다 보면 줄바꿈을 하고싶어질 때가 있을텐데요 

그 방법에 대해 알아볼까요?

See the Pen maZbdQ by ahyoung (@ahyoung) on CodePen.

설명

&#10; : 줄바꿈을 하고 싶은 곳에 해당 코드를 추가해줍니다.

오늘은 placeholder에 대해 알아보았는데요

부족한 점이나 잘못된 점이 있으면 댓글 부탁드립니다!

감사합니다.