Canvas And jQuery Based Dynamic Background Effects - MagicCanvas
File Size: | 11.1 KB |
---|---|
Views Total: | 9672 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

MagicCanvas is a jQuery plugin which utilizes Canvas
and requestAnimationFrame
to create fancy interactive effects on your background.
How to use it:
1. Include the needed jQuery library and magic-canvas.js
script on your webpage.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="magic-canvas.min.js"></script>
2. Add a background image to your webpage (Optional).
<canvas id="reactive-bg-canvas"></canvas>
3. Create an HTML5 canvas
in your webpage.
body { background: url("bg.jpg") no-repeat; background-size: cover; }
4. Create a random particle effect on the canvas. Requires GSAP's TweenLite.js
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
$.magicCanvas.draw({ type:"random-move", rgb : function (circlePos) { var px = circlePos.x; // point position var py = circlePos.y; // do some computation.... return {r:parseInt(px % 255),g:parseInt(py % 255),b:203}; }, zIndex = -9999; // stack order })
5. Create a heart beat effect on the canvas that interacts with your mouse.
$.magicCanvas.draw({ lineLen : 30, // length of hive's side heartBeatCD : 3000, // boom period heartBeatRange : 300, // boom range rgb : function (circlePos, heartBeatCenter) { var px = circlePos.x; // a point on boom circle var py = circlePos.y; var hbcx = heartBeatCenter.x; var hbcy = heartBeatCenter.y; var dis = Math.pow((px - hbcx), 2) + Math.pow((py - hbcy), 2); var maxDis = 300 * 300; var r = parseInt(255 * dis / maxDis); // do some computation.... return {r:r,g:217,b:203}; }, // rgb: {r:156,g:217,b:249}; // parameter rgb can be a object as well zIndex:-9999 // stack order })
6. All default settings.
$.magicCanvas.draw({ lineLen: 30, heartBeatCD: 3000, heartBeatRange: 300, rgb: {r: 156, g: 217, b: 249}, type: "heart-beat", zIndex: -99999 })
This awesome jQuery plugin is developed by decaywood. For more Advanced Usages, please check the demo page or visit the official website.