vue 网页滚动到指定位置显示动画效果

最新推荐文章于 2024-06-18 18:06:03 发布

woderlili

最新推荐文章于 2024-06-18 18:06:03 发布

阅读量6.5k

点赞数 1

分类专栏： vue 文章标签： javascript 前端

本文链接：https://blog.csdn.net/sinat_41657240/article/details/124120484

版权

大部分的网页，在滚动到一定位置的时候，当前区块的文案或者图片有一些飞入，淡入淡出，向上划入的动画效果

//向上划入样式
.boxUp {
   
  transform: translateY(0%) !important; //滚动后的位置
  opacity: 1 !important; //滚动后显现
  transition: all .5s ease;
}

.boxUpTo10 {
   
  transform: translateY(10%); //滚动前的位置
  opacity: 0; //滚动前设置透明隐藏
}

//开始位置在左侧20%位置
.boxleftTo20 {
   
  transform: translateX(-20%); 
  opacity: 0; 
}
//开始位置在右侧120%位置
.boxtranslateXright {
   
  transform: translateX(120%); 
  opacity: 0; 
}

//滚动到指定位置时回到原点
.boxtestenterX {
   
  transform: translateX(0%) !important;