I need to reproduce the same effect as here: http://www.chanel.com/fr_FR/mode/haute-couture.html = a swipe effect on mouse move event.
I just need some help on the animation part.
function frame() {
$('.images-gallery').css({
'transform': 'translateX('+ -mouseXPerc +'%)'
});
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
$(document).on('mousemove',function(e){
mouseXPerc = e.pageX/containerWidth*100;
});
Here's what I've done so far. It works as supposed, but as you can imagine, it's pretty raw, I need some easing in that. How can I edit my frame() function
to get something smoother ?
Edit : I can't use CSS transition / animation as I change the value on requestAnimationFrame (each 1/30 sec).
I think I've found an answer for you. It's based on this library
First, I would just grab a function from that site
function inOutQuad(n){
n *= 2;
if (n < 1) return 0.5 * n * n;
return - 0.5 * (--n * (n - 2) - 1);
};
Then, I would use a modified form of the example code, something like this
function startAnimation(domEl){
var stop = false;
// animating x (margin-left) from 20 to 300, for example
var startx = 20;
var destx = 300;
var duration = 1000;
var start = null;
var end = null;
function startAnim(timeStamp) {
start = timeStamp;
end = start + duration;
draw(timeStamp);
}
function draw(now) {
if (stop) return;
if (now - start >= duration) stop = true;
var p = (now - start) / duration;
val = inOutQuad(p);
var x = startx + (destx - startx) * val;
$(domEl).css('margin-left', `${x}px`);
requestAnimationFrame(draw);
}
requestAnimationFrame(startAnim);
}
I might change how 'stop' is calculated, I might write something to ensure that it ends on destx
, etc, but that's the basic format
Showing it in this jsfiddle
I'm actually kinda proud of this one. I've been wanting to figure this out for a while. Glad I had a reason to.
You can create your own ease
function and use it inside your frame
function:
var ease = function() {
var x = 0;
return function(x_new) {
x = (x_new+x)*.5;
return x;
}
}();
function frame() {
$('.images-gallery').css({
'transform': 'translateX('+ -ease(mouseXPerc) +'%)'
});
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
$(document).on('mousemove',function(e){
mouseXPerc = e.pageX/containerWidth*100;
});
来源:https://stackoverflow.com/questions/37268250/adding-easing-on-requestanimationframe