Fireworks animation ওয়েব সাইট তৈরি করুন খুব সহজে [ wapkiz user must be see]

 হ্যালো ভিজিটর! আসসালামু আলাইকুম। কেমন আছেন সবাই? আশা করছি আপনারা সকলে
অনেক ভাল আছেন। আজ আমি আপনাদের মাঝে একদম ইউনিক একটি বিষয় নিয়ে আলোচনা করব।
অনেকের হায়তো টাইটেল দেখেই বুঝে গেছেন আজ আমি কি নিয়ে আলোচনা করতে চলেছি। হ্যাঁ
আপনি ঠিকই ধরেছেন। আজ আমি কলিং এর মাধ্যমে fireworks animation এ সাইট কিভাবে
বানাবেন তার কোড শেয়ার করবো। তো চলুন বেশি কথা না বলে পোস্টে যাওয়া যাক।

Fireworks animation ওয়েব সাইট তৈরি করুন খুব সহজে 

Fireworks কি?

আপনারা সকলে হয়তো আতশবাজি দেখেছেন?

আমি সকলের ছোটবেলায় এই আতশবাজি বা বাজে ফাটাতে বা পড়াতে পছন্দ করি। এই বাজেটা
যখন ফাটে তখন বাজির কিছু কণা চারদিকে বিভিন্ন স্টাইলে বিভিন্নভাবে ছড়িয়ে পড়ে।
যেমনটা আমরা আলোক বাজিতে দেখে থাকি। এইযে চার দিকে সরিয়ে পড়ছে এটাই আমরা আজ
প্রোগ্রামের মাধ্যমে  তৈরি করেছি এবং এই কোডটি শেয়ার করবো। এবং এই করতে যখন
আপনি রান করবেন তখন আপনি বিভিন্ন স্টাইলে দেখতে পাবেন। চমৎকার সুন্দর যা আপনার
মনকে কেড়ে নিবে। 

যেহেতু এরকম animation সাইট থেকে ইনকাম করা যায় না সেই তো এরকম সাইট বানার জন্য
আমরা কোন টাকা খরচ করব না। তাই আমি আপনাদেরকে wapkiz এ তৈরি করে দেখাবো।

তো প্রথমের ডেমো দেখা নেওয়া যাক।

Demo: click here

যেহেতু এটা এনিমেশন সেহেতু এটা আমি কোন স্কিনশট দিতে পারছি না। অ্যানিমেশনগুলো তো
চলন্ত। সেজন্য দুঃখিত।

প্রথমে আপনারা wapkiz সাইটে লগিন করে নিবেন।

এখন আপনার যদি সাইট খোলা না থাকে তাহলে একটি খুলে নিবেন। আর যদি আগে থেকেই খোলা
থাকে তাহলে সেই সাইটের panel mode এ যাবেন।

না বুঝলে নিচের স্ক্রিনশট ফলো করুন।

তরপর একটু নিচের দিকে আসবেন। এবং Theme » Backup / Restore (New!) এ ক্লিক করুন।

Theme ক্লিক করলে আপনার সামনে নিচের মতো একটি পেজ ওপেন হবে। এবার আমার দেওয়া
থিমটি আপলোড করে দিবেন।

 ব্যাস এবার আপনার সাইটে ভিজিট করে দেখুন fireworks animation হবে।

আর আপনারা যদি অন্য কোথাও তৈরি করতে চান। তার জন্য নিচের কোডটি ব্যবহার করুন। যদি ব্লগার সাইটের পেজের মধ্যে এমন একটি ফায়ার ওয়ার্ক পেজ বানাতে চান তাহলে নিচের কোড গুলো ব্যবহার করুন।

Download theme :
click here 

Code

<br /> <title>Fireworks</title> var t = 0; var c = document.querySelector(“canvas”); var $; = c.getContext(‘2d’); c.width = window.innerWidth; c.height = window.innerHeight; $;.fillStyle = ‘hsla(0,0%,0%,1)’; window.addEventListener(‘resize’, function() { c.width = window.innerWidth; c.height = window.innerHeight; }, false); function draw() { $;.globalCompositeOperation = ‘source-over’; $;.fillStyle = ‘hsla(0,0%,0%,.1)’; $;.fillRect(0, 0, c.width, c.height); var foo, i, j, r; foo = Math.sin(t) * 2 * Math.PI; for (i=0; i<400; ++i) { r = 400 * Math.sin(i * foo); $;.globalCompositeOperation = ''; $;.fillStyle = 'hsla(' + i + 12 + ',100%, 60%,1)'; $;.beginPath(); $;.arc(Math.sin(i) * r + (c.width / 2), Math.cos(i) * r + (c.height / 2), 1.5, 0, Math.PI * 2); $;.fill(); } t += 0.000005; return t %= 2 * Math.PI; }; function run() { window.requestAnimationFrame(run); draw(); } run();<br />

Csss

body{

  background:#000;

  margin:0;

  width:100%;

  overflow:hidden;

}

আশা করছি আপনাদের সকলের ভালো লেগেছে। আজ এ পর্যন্তই। আগামীতে আরো নতুন নতুন টিপস
নিয়ে আসব। ততদিন পর্যন্ত ভালো থাকুন এবং
trickbd.com সাথেই থাকুন।

আমার ছোট একটি যেখানে আমি কিছু ব্লগার টিপস পোস্ট করেছি। আপনারা চাইলে দেখে নিতে
পারেন।

লিঃক click here

ধন্যবাদ সবাইকে।

আল্লাহ হাফেজ