minimal-mistakes icon indicating copy to clipboard operation
minimal-mistakes copied to clipboard

Smooth scrolling add callback with Animation API

Open nenge123 opened this issue 2 years ago • 1 comments

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
    });
  }

nenge123 avatar Mar 15 '23 06:03 nenge123

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,//循环次数
          });

nenge123 avatar Mar 15 '23 06:03 nenge123

I don't quite understand this. Can you elaborate on what exactly this is?

iBug avatar May 05 '24 09:05 iBug

Looking at https://github.com/cferdinandi/smooth-scroll, it seems that this is no longer useful on modern browsers.

iBug avatar May 05 '24 09:05 iBug