手把手教你实现一个电视噪音效果~-五八三

前言

大家都经历过在屏幕上出现卡顿的情况吧，它会出现很多小像素方块，这种效果被称作为电视噪音效果。因此这次带来的是一款电视噪音特效，模拟电视噪音。

效果一览

整体实现

还是老样子，我们需要创建一个 id 为 container 的 div 元素。


<div id="container"></div>
<div id="container"></div>
<div id="container"></div>

然后在 CSS 中为它加入一个全屏背景图片的效果，将其宽度和高度都设置为 100%，这样它就会占满整个页面。这里需要注意的是，将 background-attachment 属性设置为 fixed，这样背景图片就不会随着页面的滚动而移动了。


#container{  
position: absolute;  
width: 100%;  
height: 100%;  
background: url(<https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5caa625dcb8a4b7598d3331279df035c~tplv-k3u1fbpfcp-watermark.image?>);  
background-attachment: fixed;  
}
#container{  
position: absolute;  

width: 100%;  
height: 100%;  
background: url(<https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5caa625dcb8a4b7598d3331279df035c~tplv-k3u1fbpfcp-watermark.image?>);  
background-attachment: fixed;  
}
#container{  
position: absolute;  

width: 100%;  
height: 100%;  
background: url(<https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5caa625dcb8a4b7598d3331279df035c~tplv-k3u1fbpfcp-watermark.image?>);  
background-attachment: fixed;  
}

关于这个效果关键实现部分在 JS 代码中，我们来分析一下 JS 代码。相关代码如下：


<script>
        let bg = document.getElementById('container')
        let count = 30
        for(let i=0;i<count;i++){
            let glitchBox = document.createElement('div')
            glitchBox.className = 'box'
            bg.appendChild(glitchBox)
        }
        setInterval(()=>{
            let glitch = document.getElementsByClassName('box')
            for(let i=0;i<glitch.length;i++){
                glitch[i].style.left=Math.floor(Math.random()*100)+"vw"
                glitch[i].style.top=Math.floor(Math.random()*100)+"vh"
                glitch[i].style.width=Math.floor(Math.random()*400)+"px"
                glitch[i].style.height=Math.floor(Math.random()*100)+"px"
        glitch[i].style.backgroundPosition=Math.floor(Math.random()*50)+"px"
            }
        },200)
</script>
<script>
        let bg = document.getElementById('container')
        let count = 30
        for(let i=0;i<count;i++){
            let glitchBox = document.createElement('div')
            glitchBox.className = 'box'
            bg.appendChild(glitchBox)
        }
        setInterval(()=>{
            let glitch = document.getElementsByClassName('box')
            for(let i=0;i<glitch.length;i++){
                glitch[i].style.left=Math.floor(Math.random()*100)+"vw"
                glitch[i].style.top=Math.floor(Math.random()*100)+"vh"
                glitch[i].style.width=Math.floor(Math.random()*400)+"px"
                glitch[i].style.height=Math.floor(Math.random()*100)+"px"
        glitch[i].style.backgroundPosition=Math.floor(Math.random()*50)+"px"
            }
        },200)
</script>
<script>
        let bg = document.getElementById('container')
        let count = 30
        for(let i=0;i<count;i++){
            let glitchBox = document.createElement('div')
            glitchBox.className = 'box'
            bg.appendChild(glitchBox)
        }
        setInterval(()=>{
            let glitch = document.getElementsByClassName('box')
            for(let i=0;i<glitch.length;i++){
                glitch[i].style.left=Math.floor(Math.random()*100)+"vw"
                glitch[i].style.top=Math.floor(Math.random()*100)+"vh"
                glitch[i].style.width=Math.floor(Math.random()*400)+"px"
                glitch[i].style.height=Math.floor(Math.random()*100)+"px"
        glitch[i].style.backgroundPosition=Math.floor(Math.random()*50)+"px"
            }
        },200)
</script>

我们通过 JS 方法获取该元素，将其赋值给变量 bg。然后设置一个循环来创建 30 个 div 元素，每个元素的类名为 box，并将它们添加到 container 元素中。

接下来，在 setInterval 函数每 0.2 秒执行一次回调函数。该函数获取所有类名为 box 的元素，并对它们进行随机的 CSS 样式设置，包括位置、宽度、高度和背景位置，该样式设置就可以实现了一个随机闪烁的效果。

我们再回到 CSS 部分，在 CSS 中我们需要创建一个黑色的半透明遮罩层，相当于噪点。相关代码如下：


.box{  
position: absolute;  
background: #000;  
background: url(<https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5caa625dcb8a4b7598d3331279df035c~tplv-k3u1fbpfcp-watermark.image?>);  
background-attachment: fixed;  
}
.box{  
position: absolute;  

background: #000;  
background: url(<https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5caa625dcb8a4b7598d3331279df035c~tplv-k3u1fbpfcp-watermark.image?>);  
background-attachment: fixed;  
}
.box{  
position: absolute;  

background: #000;  
background: url(<https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5caa625dcb8a4b7598d3331279df035c~tplv-k3u1fbpfcp-watermark.image?>);  
background-attachment: fixed;  
}