Hiệu ứng Bubble Canvas cho Blogger

Làm sao tạo hiệu ứng Bubble cho Blogspot? Bài viết sau sẽ hướng dẫn chi tiết

Thẻ Canvas cung cấp rất nhiều hiệu ứng đồ họa làm cho trang Web thêm sinh động và đẹp mắt. Một trong những hiệu ứng đó là bubble effect có nghĩa là hiệu ứng bong bóng. Ta sẽ ứng dụng hiệu ứng này cho trang Blogger.

Bước 1: Khai báo css cho thẻ canvas

[canvas{position:absolute;top:0;left:0}]

Bước 2: Tạo thẻ có id=lager-header với css

[{padding-top:0px;padding-bottom:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;background-position:bottom center;background-image:url(image.jpg)!important;position:relative;background:#333;overflow:hidden;background-size:cover;background-position:center center;z-index:1;height:530px!important;}]

Bước 3: Tạo thẻ có dạng như

[<div id="large-header" class="et_pb_section et_pb_section_0 hero et_section_regular">]

và đưa canvas

[<canvas id="demo-canvas"> </canvas>]

Bước 4: Code javascript:

[(function(){var width,height,largeHeader,canvas,ctx,circles,target,animateHeader=true;initHeader();addListeners();function initHeader(){width=window.innerWidth;height=window.innerHeight;target={x:0,y:height};largeHeader=document.getElementById('large-header');largeHeader.style.height=height+'px';canvas=document.getElementById('demo-canvas');canvas.width=width;canvas.height=height;ctx=canvas.getContext('2d');circles=[];for(var x=0;xheight)animateHeader=false;else animateHeader=true;}function resize(){width=window.innerWidth;height=window.innerHeight;largeHeader.style.height=height+'px';canvas.width=width;canvas.height=height;}function animate(){if(animateHeader){ctx.clearRect(0,0,width,height);for(var i in circles){circles[i].draw();}}requestAnimationFrame(animate);}function Circle(){var _this=this;(function(){_this.pos={};init();})();function init(){_this.pos.x=Math.random()*width;_this.pos.y=height+Math.random()*100;_this.alpha=0.1+Math.random()*0.3;_this.scale=0.1+Math.random()*0.3;_this.velocity=Math.random();}_this.draw=function(){if(_this.alpha<=0){init();}_this.pos.y-=_this.velocity;_this.alpha-=0.0005;ctx.beginPath();ctx.arc(_this.pos.x,_this.pos.y,_this.scale*10,0,2*Math.PI,false);ctx.fillStyle='rgba(255,255,255,'+_this.alpha+')';ctx.fill();};}})();]

Lưu ý: Để nhúng javascript vào blogger cần định dạng như sau

[<script type='text/javascript'>//![CDATA[// Place your javascript code here//]]></script>]

Sau khi hoàn thành trang Web có hiệu ứng  [Click để xem##eye##]
Áp dụng vào blog [Click để xem##eye##]