Recently, we shared a cool HTML5 Canvas flame animation for everyone, and witnessed the power of Canvas. The animation to be shared this time is also based on Canvas. It is a colorful luminous fountain animation effect. There are a total of 4 fountain pillars on the page, and each pillar has a reflection on the water surface, spraying out a colorful fountain, and the color of the fountain will change randomly, very cool.
Advertisement
init : function(){
this.setParameters();
this.setup();
this.reconstructMethods();
this.bindEvent();
this.render();
},
setParameters : function(){
this.$window = $(window);
this.$container = $('#jsi-fountain-container');
this.$canvas = $('<canvas />');
this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d');
this.particles = [];
this.fountains = [];
this.resizeIds = [];
},
setup : function(){
this.particles.length = 0;
this.fountains.length = 0;
this.resizeIds.length = 0;
this.width = this.$container.width();
this.height = this.$container.height();
this.$canvas.attr({width : this.width, height : this.height});
this.velocity = 1;
while(true){
var distance = 0,
velocity = this.velocity;
while(velocity >= 0){
velocity -= this.GRAVITY;
distance += velocity;
}
if(distance > Math.min(this.height * (this.BASE_RATE - this.OFFSET_RATE), 500)){
this.velocity--;
break;
}
this.velocity++;
}
this.gradient = this.context.createLinearGradient(0, this.height * this.BASE_RATE, 0, this.height);
this.gradient.addColorStop(0, 'hsla(210, 80%, 5%, 0.5)');
this.gradient.addColorStop(0.1, 'hsla(210, 80%, 5%, 0.8)');
this.gradient.addColorStop(1, 'hsla(210, 80%, 5%, 1)');
this.createElements();
},
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
Advertisement
