大部分的网页,在滚动到一定位置的时候,当前区块的文案或者图片有一些飞入,淡入淡出,向上划入的动画效果
//向上划入样式
.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;