반응형
스크롤 모션
function scrollMotion(tl, obj) {
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({ triggerElement: obj, offset: -300 })
.setTween(tl)
.reverse(false)
.addTo(controller);
//.addIndicators(true);
}
돈 흩날리면서 떨어지는 모션
function moneyMotion1(obj, d, tg) {
var tl = new TimelineMax();
tl.to(obj, 0.7, { opacity: 1, delay: d }).to(obj, 3, {
bezier: [
{ x: 70, y: 100 },
{ x: 40, y: 200 },
{ x: 80, y: 222 },
],
delay: -0.5,
});
scrollMotion(tl, tg);
}
//실행
moneyMotion1(".money1_1", 1.7, ".percentBox1");
반응형
'Dev > Temp' 카테고리의 다른 글
자동으로 높이 설정 및 스크롤 했을 때 페이지 상단으로 이동 (0) | 2020.11.12 |
---|---|
css transform matrix (0) | 2020.11.11 |
슬라이드 진행시 다음 모션 미리 작동 되어 있을 때 (0) | 2020.11.10 |
스크롤 했을 때 헤더 고정 (0) | 2020.11.05 |
가운데 정렬 하는법 (0) | 2020.11.05 |