#20-有看到我的猫吗？用offsetPath让猫猫滚起来！(SVG)

偶尔会看到，往下滚，球就会跟着滚动的幅度以抛物线移动。

今天就来使用SVG的Path做做看！
其实是我做好的第二个版本，第一个是使用GSAP & ScrollMagic的外挂完成，
但...人家才不要套件啦！

老样，先看成果！
滚轮上滚时，猫猫也会用一样的比例倒回去～

那你有看到我的猫了吗？

用offset-path华丽滚！用JS控制滚动幅度

用css的参数就可以达到曲线滚动的效果罗！

offset-path: path('M3.9,...看你要什麽路径');
motion-offset: 100%; //看猫猫要走多久！我们等一下就是要控制这个

今天的offse-path就来用这个双峰：
出处：SVG 研究之路 (4) - Path 基础篇

不过因为我想要让猫走完整个萤幕，所以用JS看一下现在的萤幕宽度
然後设定一下猫猫要跑的路线

const cat = document.querySelector('.cat'); //先找到猫猫
const windowWidth = window.innerWidth*1.5; //比萤幕宽一点
cat.style.offsetPath = `path('M0 0 Q${windowWidth/4} ${windowWidth/4}, ${windowWidth/2} 0 T${windowWidth} 0')`; //就是刚刚那个图啦，总共需要三个点，就是一直对切除以二罗～

再来侦测scroll滚动，
想让猫猫再第一块区块滚动结束时开始滚，
然後在300px的距离里面滚完～

const main = document.querySelector('.main');
let scrollStart = main.offsetTop; //第一个区块的高度就是要开始滚的距离～
let distancePercent;

//侦测滚动的距离
document.addEventListener('scroll', function(){
    //滚动的距离
  let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
  //看滚动了多少  除以  想要滚动的幅度（数学都有学吧！）
  let percent = (scrollHeight - scrollStart) / 300 * 100;
  
  //如果是负的话，就要让猫猫倒着回去～所以用100去减
  distancePercent = percent > 0 ? percent : 100 - distancePercent;
  cat.style.offsetDistance =  `${percent}%`;

就这样啦！猫咪就滚起来噜