vue页面添加背景滚动动画（translate实现）

效果：

图中的5个圆背景，跟随页面滚动也随之滚动（暂时无法插入视频，只能意会了～）

代码

• 先画出对应的五个圆，然后给圆添加平移效果【transform: translateX(-100px);】因为5个圆平移都是不同方向的，所以需要各个添加

// 写个5个圆的背景
<div
v-for="(project,num) in allCirle"
:key="num"
class="bg_circle"
:class="[showAnimate ? project.ani : '' ,project.class]"
></div>
// 对应的类名和动画
data(){
allCirle: [
    { class: 'left_cir', ani: 'left_animate' },
    { class: 'left_top_cir', ani: 'left_top_animate' },
    { class: 'center_bot_cir', ani: 'center_animate' },
    { class: 'right_cir', ani: 'right_animate' },
    { class: 'right_top_cir', ani: 'right_top_animate' }
],
}
// 给所有圆添加平移时间【transition-duration: 3s;】
.bg_circle {
      position: absolute;
      background-color: #f8f9fc;
      transition-duration: 3s;
    }
// 通用圆形设置
@mixin circle_box($width, $bg) {
width: $width;
height: $width;
background: $bg;
border-radius: 50%;
}
// 通用圆形的位置设置
@mixin position($top, $left, $opa) {
top: $top;
left: $left;
opacity: $opa;
}
// 画出对应的五个圆
.left_cir {
@include position(46px, -200px, 0.8px);
@include circle_box(
409px,
linear-gradient(269deg, #F7F9FF 1%, #E5F0FE 99%)
);
}
.left_top_cir {
@include position(-142px, 274px, 0.5);
@include circle_box(
225px,
linear-gradient(90deg, #F7F9FF 1%, #E5F0FE 99%)
);
}
.center_bot_cir {
@include position(300px, 274px, 0.83);
@include circle_box(
591px,
linear-gradient(269deg, #F7F9FF 1%, #E5F0FE 99%)
);
}
.right_cir {
top: 71px;
right: -213px;
opacity: 0.61;
@include circle_box(
429px,
linear-gradient(269deg, #F7F9FF 1%, #E5F0FE 99%)
);
}
.right_top_cir {
top: -77px;
right: 177px;
opacity: 0.7;
@include circle_box(
144px,
linear-gradient(90deg, #F7F9FF 1%, #E5F0FE 99%)
);
} 
// 5个圆的动画设置
.left_animate {
transform: translateX(100px);
}
.left_top_animate {
transform: translateY(100px);
}
.center_animate {
transform: translateY(-100px);
}
.right_animate {
transform: translateX(-100px);
}
.right_top_animate {
transform: translateY(100px);
}

• 这里需要注意添加动效的时机（我这边是等页面滚动到2200-2600之前的时候进行平移，大家可根据自己的实际情况设置动效）

mounted(){
	// 页面滚动的时候调用
	window.addEventListener('scroll', this.animate, 200)
}
// 接入流程背景动画
animate() {
    const top =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop
    this.showAnimate = top > 2200 && top < 2600 ? 1 : 0    
},