minimal-mistakes
minimal-mistakes copied to clipboard
Smooth scrolling add callback with Animation API
This is an enhancement or feature.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect
when srollend will run callback ,if scss set --scroll-hover:red, then can
animateScroll.createAnimation(target,{
keyframes:[
{
backgroundColor:'var(--scroll-hover)'
},
{
backgroundColor:'var(--scroll-hover2)'
}
],
duration: 100,//动画所需ms
iterations: 3,//循环次数
});
if('Animation' in window){
animateScroll('a[href^=#]',{
//delay:-1,
//endDelay:-1
//easing:"ease-out",
//duration: 800,
//iterations: 1,
//offset:-50,
callback:function(event,elm,target){
animateScroll.createAnimation(target,{
keyframes:[
{
backgroundColor:'#FFF'
},
{
backgroundColor:'#000'
}
],
duration: 100,//动画所需ms
iterations: 3,//循环次数
});
}
});
}else{
var scroll = new SmoothScroll('a[href*="#"]', {
offset: 20,
speed: 400,
speedAsDuration: true,
durationMax: 500
});
}
callback it highlight elmemnt
animateScroll.createAnimation(target,{
keyframes:[
{
transform:'translateX(-5px)',
transition: 'all .2s ease-in-out'
},
{
transform:'translateX(5px)',
transition: 'all .2s ease-in-out'
}
],
duration: 50,//动画所需ms
iterations: 3,//循环次数
});
I don't quite understand this. Can you elaborate on what exactly this is?
Looking at https://github.com/cferdinandi/smooth-scroll, it seems that this is no longer useful on modern browsers.