কীভাবে সিএসএস, এইচটিএমএল এবং সিএসএস ব্যবহার করে ইমেজ অ্যানিমেশন তৈরি করা যায় ?
কীভাবে সিএসএস এবং এইচটিএমএল তৈরি করে বিশেষ ধরনের ৩৬০ ডিগ্রি অ্যানিমেশন তৈরি করা যায় ?
হ্যা , আজকে আমারা আমাদের বিশেষ প্রয়োজন সেই ৩৬০ ডিগ্রি আকর্ষণীয় ইমেজ অ্যানিমেশন তৈরি করা শিখব । এবং সবশেষে সোর্স কোড থাকবেই এবং কিছু কাস্টমাইজেশন করব ।
সিএসএস, এইচটিএমএল শুধুমাত্র ব্যবহার এবং জাভা স্ক্রিপ্ট ব্যবহার না করে আমরা আজকে ৩৬০ ডিগ্রি আকর্ষণীয় ইমেজ অ্যানিমেশন তৈরি করা শিখব । এমন একটি টিউটোরিয়াল নিয়ে হাজির হয়েছি ।
আসলে এখানে তেমন কিছু কাস্টমাইজেশন এবং সিএসএস এবং এইচটিএমএল লিখতে হবে না । শুধুমাত্র কিছু সাধারণ লিখে আমরা এটি শিখব । এবং আমি এখন সোর্স কোড আপনাদের উপহার হিসেবে দিব । সোর্স কোড কাস্টমাইজেশন এর মাধ্যমে আপনি আরো বেশি শিখতে পারেন। এগুলো তৈরি করতে আমাদের যেন সময় নষ্ট না হয় তার জন্য আমি সব সময়ই সোর্স কোড দিই । আশাকরি আপনারা ভালো কাস্টমাইজেশন করতে পারেন ।
🍃
Source Code:
১. এইচটিএমএল অংশ তৈরি
<div class="container circle"><div class="main one"></div>
<div class="main two"></div>
<div class="big circle one"></div>
<div class="big circle two"></div>
<div class="small circle one"></div>
<div class="small circle two"></div>
</div>
বিশেষ দ্রষ্টব্য : এখানে কিছু কাস্টমাইজেশন করা লাগবে না, আর যদি আপনার প্রয়োজন হয় তাহলে আপনি নিজে অনেক কিছু যুক্ত করতে পারেন । কোনো সমস্যা হলে আমাকে জানাতে পারেন ।
২. সিএসএস অংশ তৈরি :
এখানে সিএসএস শুধুমাত্র কাস্টমাইজেশন নিয়ে কথা বলবো । এখানে কন্টেন্ট সংক্ষিপ্ত করার জন্য শুধু মাত্র যেগুলো কাস্টমাইজেশন করা আবশ্যক তাই আমরা কাস্টমাইজেশন করা শিখব ।
সিএসএস কাস্টমাইজেশন ১:
body { background:linear-gradient(290deg,hotpink,gold,greenyellow,skyblue,white);}
এখানে আপনার পছন্দ অনুযায়ী রং নির্বাচন করতে পারেন । আমি আমার এখানে শেখানোর সুবিধার জন্য রাং নির্বাচন করেছি ।
বিশেষ দ্রষ্টব্য : আপনি চাইলে এখানে পটভূমি রং নাও ব্যবহার করতে পারেন । কোনো সমস্যা হবে না । অবশ্যই প্রত্যেক রং নির্বাচন করে কমা দিয়ে লিখতে হবে এবং প্রথম বন্ধনী র ভিতরে রাখতে হবে ।
সিএসএস কাস্টমাইজেশন ২ :
one:after { background-image: url(/Download/textscroll.jpeg);}এখানে আপনাকে আপনার ফটো বা ইমেজ এড্রেস লিখতে যেটি ৩৬০ ডিগ্রি তে ঘুরবে ।
রেজাল্ট বা ফলাফল :
শেষ কথা:
আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সহজেই যেকোনো রঙিন ৩৬০ ডিগ্রি ইমেজ অ্যানিমেশন তৈরি করতে পারবেন । সিএসএস এবং এইচটিএমএল তৈরি করে বিশেষ ধরনের ৩৬০ ডিগ্রি অ্যানিমেশন তৈরি করা আপনার কাছে এখন নিশ্চয়ই খুব সহজ কিছু । কমেন্ট বক্স এ মতামত জানাতে ভুলবেন না ।
বিশেষ দ্রষ্টব্য :
সোর্স কোড এ কোনোরকম ভুল বা ত্রুটি নেই ।কারণ পরীক্ষা করা হয়েছে এবং তা আপনারা উপরে ফলাফল হিসেবে দেখছেন ।
My Talk:
ধন্যবাদ আপনাকে এই ব্লগ টি পড়ার জন্য । আসসালামু আলাইকুম! আমি শেখ জুবায়ের । কিছু কথা বলতে চাই । আসলে অনেক কষ্ট করে, চিন্তাভাবনা করে, প্রত্যেক বিষয়বস্তু সম্পর্কে জ্ঞান অর্জন করে এবং অনেক সময় নিয়ে এই আর্টিকেল বা কন্টেন্ট বা ব্লগটি লিখেছি । তাবে কিছু বানান বা বাক্যের ভূল হতে পারে । আশা রাখি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন । তবুও কোনো সমস্যা হলে কমেন্ট বক্স এ জানাবেন । আমি আপনার প্রশ্নের যথাযথ উত্তর দেওয়ার চেষ্টা করব । আশা রাখি উপকারে আসবে । অউপকারে আশার মতো কিছু লিখিনি আমি এটি আমার বিশ্বাস।
🍃
My Talk:
Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!
0 Comments