Parallax Movement에 완화를 추가하는 방법은 무엇입니까?
-
21-12-2019 - |
문제
일부 이미지에 시차 효과를 적용하고 있으며 저는 완화를 신청하고 싶습니다.시차의 논리는 매우 간단합니다. 이미지가 창의 중심에서이를 1 배로 표현하는 거리를 계산하고 0은 화면의 중간이고 0은 바닥입니다.나는 또한 이것을 화면의 상단 절반에 적용하여 -1이 맨 위로 될 것입니다.
이상적으로, 여기에 일부 기능을 꽂고 싶습니다 ( http://gsgd.co.uk/sandbox/jquery/easing/jquery.eassion.1.3.js ) 똑바로 in. 그래서 'easeoutsine'을 사용하고 싶다고 가정합니다 :
// t: current time, b: begInnIng value, c: change In value, d: duration
function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
어떤 가치를 통과합니까?나는 이것이 지속 시간 기반 애니메이션이 아닌이기 때문에 가장 확실한 것은 D (기간)임을 생각합니다.이 방정식은 심지어 적합합니까?
참고 : 라이브러리를 사용하고 싶지 않아, 이것은 순수한 JS입니다.
해결책
나 자신을 알아 냈습니다.모든 코드를 게시하지 않고 여기에 GIST가 있습니다.
function easeInQuart(t, b, c, d) {
return c*(t/=d)*t*t*t + b;
}
var deltaY // The distance the element is from the bottom of
// the screen expressed as a factor of 1
var origY // The original position
var distanceY // The distance it can move
var y = easeInQuart(deltaY, origY, distanceY, 1);
. 제휴하지 않습니다 StackOverflow