DEV Community

Cover image for Diwali Greetings in DevStyle😜
Rajamanickam
Rajamanickam

Posted on

Diwali Greetings in DevStyle😜

In this tutorial has helped you learn how to create diwali greetings using html css.

First of all, start scratch in basic html skeleton

Image description

Now, Add some library cdn

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="jquery.fireworks.js"></script>
Enter fullscreen mode Exit fullscreen mode

jQuery

jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.

Fireworks js
A simple fireworks library! Visit on GitHub. fireworks-js. hue. acceleration. brightness. decay. delay. explosion. flickering. intensity.

Add HTML section tag with id

<section id="fireworks"></section>
Enter fullscreen mode Exit fullscreen mode

Fireworks js library simple controller
The hue, delay, decay, brightness, lineWidth.explosion, lineWidth.trace, sound.volume and rocketsPoint options accept an object:

<script>
        $('#fireworks').fireworks({
            width: '100%',
            height: '100%',
            sound: true
        });
</script>
Enter fullscreen mode Exit fullscreen mode

Finally,

Image description

Youtube Full Video : https://youtu.be/c6Wfu2zl5Xg
Demo : https://diwali-greetings.vercel.app/
Portfolio : https://rajamanickam.vercel.app/
Github : https://github.com/erajamanickam/

Thanks for Reading..!!😎

Top comments (0)