淘先锋技术网

首页 1 2 3 4 5 6 7

CSS进入屏幕后执行,是指当一个元素进入浏览器可视窗口后,会触发特定的事件或样式效果。这些效果可以通过CSS的伪类和js的事件监听来实现。

/*CSS伪类*/
/*当元素完全进入浏览器可视窗口后执行*/
.your-class:in-view{
animation: your-animation 1s ease-in-out;
}
/*当元素部分进入浏览器可视窗口后执行*/
.your-class:in-partial-view{
opacity: 0.5;
}
/*JS事件监听*/
/*当元素进入浏览器可视窗口后执行*/
window.addEventListener('scroll', function(){
var elem = document.querySelector('.your-class');
var position = elem.getBoundingClientRect();
if(position.top >= 0 &&
position.left >= 0 &&
position.bottom<= window.innerHeight &&
position.right<= window.innerWidth){
//执行你的代码
}
});
/*当元素完全进入浏览器可视窗口后执行*/
window.addEventListener('scroll', function(){
var elem = document.querySelector('.your-class');
var position = elem.getBoundingClientRect();
if(position.top >= 0 &&
position.left >= 0 &&
position.bottom<= window.innerHeight &&
position.right<= window.innerWidth &&
position.bottom >0 &&
position.top< window.innerHeight){
//执行你的代码
}
});

以上代码实现了当元素进入浏览器可视窗口后执行CSS动画或改变元素不透明度的效果。同时,通过js监听浏览器滚动事件,实现了元素进入屏幕后执行自定义代码的效果。