Create Fireworks animation effects using jquery and css - Mostlikers

23 November, 2016

Create Fireworks animation effects using jquery and css

Hi Friends, Today we are going to see  how to create firework animation effect using jquery plugin. We as a whole are intrigued by firecrackers, for a new website launch, festival day offer page, birthday celebration, some special page you can use this effect. the firework effect will attract your site visitors.

Create Fireworks animation effects using jquery and css



How to use Firework Effect

Load below CSS and jquery script in the head tag. 
<link href="jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fireworks.js"></script>

Firework script will create randomly an HTML canvas rocket  design.

HTML

Create contain html element.
<body>
    <div id="imgs">
      <img width="1350"  height="700" src="bg.jpg">
      <div class="content-msg">
       <h2> Create Fireworks Animation Effects Using Jquery and CSS</h2>
       </div>
    </div>
</body>


Jquery

#imgs - Here firework effect will only the image id. if you want to display all page just change #imgs to a body
<script type="text/javascript">
$(document).ready(function(){
    setTimeout(function() {
        $('#imgs').fireworks();
    });
});
</script>
Try yourself >>

This firework jquery plugin developed by jqueryscript.net.







Labels: , , ,

3 comments:

Subscribe to: Post Comments (Atom)