Kang-ji

CSS 를 이용하기

• 부모요소에 height와 perspective 속성을 설정하여 parallax 효과를 간단하게 구현할 수 있다.
• 비교적 가볍고 간단하게 효율적으로 인터렉티브 요소 적용이 가능하다.
• 인터렉티브 요소 조작이 제한적으로 복잡한 인터렉션 구현에 한계가 있다.

See the Pen parallax-scrolling-css by KangJi (@Kangjii) on CodePen.

Javascript 로 구현

• 스크롤에 따라 직접적으로 객체에 효과를 주어 직접적인 통제가 가능하여 구현의 자유도가 높다.
• 사용자의 인풋에 따르는 등 복잡한 인터렉션, 애니메이션 구현이 가능하다.
• 인터렉션 요소에 따라 웹성능에 지장을 줄 수 있다.
• 사용자의 인풋 등과 관계된 인터렉티브 구현이 필요한 경우에 적합하다.

See the Pen parallax-scrolling-js by KangJi (@Kangjii) on CodePen.

모바일 Parallax 동작 이슈

모바일 화면의 경우 방향전환이 가능함으로 인해 설정해준 사이즈와 스크롤 높이 등이 

쉽게 바뀔 수 있어 스크롤에 따라 패럴럭스가 의도대로 동작 하지 않을 수 있다.

PC의 경우 마우스 또는 트랙패드로 스크롤하지만

모바일은 터치스크린으로 동작이 되기때문에 스크롤의 속도와 방향 조절을 어렵게 만들 수 있다.

저성능 기기에서 느린 스크롤 등의 성능저하를 일으킬 수 있다,

위의 사용자 경험을 해칠수 있는 점들을 고려하여 구현이 필요함에 따라

모바일 기기에서 상황에 따라 페럴럭스 스크롤의 동작을 제외시킬때 해결방법

CSS에서는 미디어쿼리를 통해 

설정해주었던 perspective 속성값을 없애주면 된닥.

javascript의 경우

viewport 로 접근하여 

documentElement.clientWidth

- html 문서의 화면노출 width 값 (border, margin, scrollbar 제외한 너비)

The GreenSock Animation Platform (줄여서 GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인기반의 애니메이션 자바스크립트 라이브러리 입니다. 이 GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있어요.

또한 이 라이브러리의 가장 큰 장점은 가볍고 쉬운 사용방법입니다.

GSAP 를 사용하면 Javascript에 대한 지식이 뛰어나지 않아도 애니메이션 제작을 할 수 있어요!
이 가이드에서는 GSAP의 TweenMax 기능의 설정 및 사용하는 방법에 대해 알아 볼 것입니다.

설치하기

- CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

- NPM

npm install gsap

Tweens 란?

GSAP의 기본적인 애니매이션으로 오브젝트에 애니메이션을 주기위해서 call, animate, property, duration, easing, delay 등 많은 파라미터가 필요하다. 

TweenLite 는 우리가 정의한 자바스크립트 명령어를 통해 GSAP를 사용하여 애니메이션을 만든다는것을 알 수 있다.

.to 메서드는 CSS로 정의한 오브젝트의 상태를 JS에서 정의한 상태로 애니메이션 시켜주는 메서드이다.

반대로는 .from라는 메서드를 이용한다.

TweenLite.to("#myDiv", 2, {
    left: 100,
    top: 75,
    backgroundColor:"#000",
    ease: Power4.easeIn
});

Timeline Animations을 이용한 다수 애니메이션

TimelineLite는 하나의 오브젝트를 애니메이션 하는것으로 제한되지 않습니다. 서로 다른 기능에 해당하는 ID를 추가하여 타임라인에서 여러개체를 애니메이션 할 수 있습니다.

#myDiv {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  background: red;
}

#myCircle {
  position: absolute;
  left: 50px;
  top: 350px;
  width: 150px;
  height: 150px;
  background: red;
  border-radius: 100%;
}

var tl = new TimelineLite;

tl.to("#myDiv", 2, {
  x:100,
  y:75,
  backgroundColor:"#000",
  ease: Power4.easeIn
})
.to ("#myDiv", 1 , {
  scaleX: 1.5,
  scaleY: 1.5,
  backgroundColor: "#454545",
  ease: Back.easeOut.config(1.7)
})
.from("#myCircle", 1, {
  opacity: 0,
});

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".trigger",
    start: "center bottom",
    end: "center top",
    scrub: true,
    markers: true
  }
});
tl.to(".box", {yPercent: 350, duration: 1})
tl.to(".box", {rotation: 360, duration: 3})
tl.to(".box", {xPercent: 350, duration: 1})

https://greensock.com/gsap/

https://greensock.com/docs/v3/Plugins/ScrollTrigger

https://codepen.io/GreenSock/pen/abOPrBj

https://codepen.io/DavidMonnuar/pen/VwKEvQM

Typeit

https://www.typeitjs.com/

Scrollout

https://scroll-out.github.io/

anime.js

css속성, css transform, SVG와  DOM요소의 속성, Javascript객체를 사용하여 동작하는 Javascript 애니메이션 라이브러리. 

설치 및 Import

npm install animejs --save

import anime from 'animejs/lib/anime.es.js';

<template>
  <div class="container">
  	<p class="target">target anime</p>
  </div>
</template>

export default {
	mounted() {
      this.$anime({
        targets: '.target',
        translateX: '50px',
        duration: 3000
      })
   	}
}

https://github.com/juliangarnier/anime

GSAP

GreenSock에서 만든 자바스크립트 애니메이션 라이브러리로 

복잡한 애니메이션을 구현하기위한 도구. 

https://greensock.com/gsap/