Of Stack

JavaScript implements Flash dazzle wave effect

  • 2020-06-12 08:32:17
  • OfStack

Seeing how easy flash is to implement this kind of animation, I tried to fool around with it. All pixels simulated by dom, serrations are inevitable...

I'm going to have to add one more filter to this one to avoid the sawtooth, or use an image. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Dazzle light wave effect </title>
<script>
var lightWave = function(T,left,thick,sharp,speed,vibration,amplitude,opacity){
this.cont = T;// Dazzle light container 
this.left = left;// Dazzle to the right offset 
this.thick = thick;// The thickness 
this.sharp = sharp;// The sharp degree of 
this.speed = speed;// Wave velocity 
this.vibration = vibration;// Frequency of vibration per unit time 
this.amplitude = amplitude;// The amplitude 
this.opacity = opacity;// transparency 
this.cont.style.position = 'relative';
this.move();
}
lightWave.prototype = {
point:function(n,l,t,c,color){
var p = document.createElement('p');
p.innerHTML = '&nbsp;';
p.style.top = t + 'px';
p.style.left = l + 'px';
p.style.width = 1 + 'px';
p.style.height = n + 'px';
p.style.filter = 'alpha(opacity='+this.opacity+')';
p.style.lineHeight = 0;
p.style.position = 'absolute';
p.style.background = color;
c.appendChild(p);
return this;
},
color:function(){
var c = ['0','3','6','9','c','f'];
var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
t.sort(function(){return Math.random()>0.5?-1:1;});
return '#'+t.join('');
},
wave:function(){
var l = this.left,t = this.wavelength,color = this.color();
var c = document.createElement('div');
c.style.top = this.amplitude+20+'px';
c.style.position = 'absolute';
c.style.opacity = this.opacity/100;
for(var i=1;i<this.thick;i++){
for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){
this.point(i,l,-9999,c,color);
}
}
for(var i=this.thick;i>0;i--){
for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){
this.point(i,l,-9999,c,color);
}
}
this.cont.appendChild(c);
return c;
},
move:function(){
var wl = this.amplitude;
var vibration = this.vibration;
var w = this.wave().getElementsByTagName('p');
for(var i=0;i<w.length;i++){
w[i].i = i;
}
var m = function(){
for(var i=0,len=w.length;i<len;i++){
if(w[i].ori == true){
w[i].i-=vibration;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)<=-wl){
w[i].ori = false;
}
}else{
w[i].i+=vibration;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)>=wl){
w[i].ori = true;
}
}
}
}
setInterval(m,this.speed);
}
}
window.onload = function(){
var targetDom = document.body;
new lightWave(targetDom,0,3,36,120,6,20,40);
new lightWave(targetDom,50,2,70,120,10,30,30);
}
</script>
</head>
<body style="background:#000;margin-top:100px">
</body>
</html>

Parameters: 


var lightWave = function (T,left,thick,sharp,speed,vibration,amplitude,opacity){
    this .cont = T; // Containers that need to add glare 
    this .left = left; // The right offset of dazzle light at birth 
    this .thick = thick; // The degree of the thickness 
    this .sharp = sharp; // The degree of acute 
    this .speed = speed; // Wave velocity 
    this.vibration = vibration; // Frequency of vibration per unit time 
    this .amplitude = amplitude; // The amplitude 
    this .opacity = opacity; // transparency 
    this .cont.style.position = 'relative';
    this .move();
}

And if you're interested, you can talk about 1.

In addition, there is a problem that the transparency filter under ie in the above code does not work. According to the research, changing the positioning of the parent container will affect the inheritance of the transparent filter on the child nodes.

This is the end of this article, I hope you enjoy it.

Related articles: