ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৩

WELLCOME BACK

Hello guys, how are you? Hope you are doing well! So like every day, today I am here with a new post for you! So let’s get started!

এই Snippets পোস্টগুলোর আরো একরি পার্টে আপনাকে স্বাগতম। তো এর আগের পোস্ট দেখে না থাকলে দেখুন!

1. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ১
2. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ২

তো চলে এলাম আরো একটি নতুন পার্ট নিয়ে আপনাদের মাঝে! বরাবরের মতোই আমি এবার ও কিছু Snippets শেয়ার করবো এবং সেটার ব্যবহার এবং ডিজাইন সম্পর্কে বিস্তারিত জানানোর চেস্ট করবো। যাতে আপনার ব্যবহার করার আগেই ধারণা থেকে যায় যে এটি কেমন হবে। যেগুলো Snippet ব্যবহার বেশি হয় এবং সুন্দর ডিজাইন সেগুলো আমি আপনাদের মাঝে শেয়ার করে থাকি। তো চলুন শুরু করা যাক!

ছবি/ভিডিও Manipulation ইফেক্ট

এই snippet এর বিস্তারিতঃ

এটি সম্পূর্ণভাবে CSS দিয়ে তৈরি করা হয়েছে শুধু। এটিতে ছবি বা ভিডিও দেখাতে পারবেন যাতে কোনো মানুষ Center এ থাকলে থাকে অনেক সুন্দরভাবে দেখাবে। এটি আপনি Photography Portfolio ওয়েবসাইট গুলোতে ব্যবহার করতে পারেন। সাথে ব্লগিং ওয়েবসাইট এও!

কোড কালেক্টঃ

Rain অ্যানিমেশন!

এই snippet এর বিস্তারিতঃ

এটি Css এবং JS দিয়ে তৈরি। এটিতে মূলত বৃষ্টি পড়ে আর একটু পর পর আকাশ যেমন চমকায় তেমন করে। বলতে গেলে একদম রিয়েল বৃষ্টি হওয়ার snippet এটা। এটি বিশেষ করে কোনো Agency এর ওয়েবসাইট body অ্যানিমেশন হিসাবে ব্যবহার করতে পারেন যাতে সম্পূর্ণ ওয়েবসাইটে বৃষ্টি হবে আর সুন্দর দেখাবে!

কোড কালেক্টঃ

Cursor ইফেক্ট

এই snippet এর বিস্তারিতঃ

এটি বিশেষ করে Jquery এবং GSAP দিয়ে তৈরি করা হয়েছে। এটিতে যখন মাইস নিয়ে যাবে তখন অ্যানিমেটেড ভাবে যে লেখা টা থাকবে সেটা দেখাবে ছবিতে। এটিতে ছবিতে থাকা ব্যাক্তির নাম দিতে পারেন। যদি কোনো মানুষের বেপারে জানাতে চান তাহলে এই snippet ব্যবহার করতে পারেন!

কোড কালেক্টঃ

ফলোটিং Persons

এই snippet এর বিস্তারিতঃ

এটিতে হলো যে আপনার কোনো person এর background ছাড়া ছবি আছে সেটাকে সুন্দর Background এবং নাম দিয়ে সাজানোর জন্য এই Snippet আপনাকে সাহায্য করবে। এটি আপনি নিজের টিম Member গুলো দেখাতে ব্যবহার করতে পারেন!

কোড কালেক্টঃ

লেখার অ্যানিমেশন

এই snippet এর বিস্তারিতঃ

এখানে আপনি যে লেখা টা রাখবে সেটাকে অ্যানিমেশনের সাথে উপরে এবং নিচে নিয়ে আসবে। এটি সব ধরনের ওয়েবসাইটের জন্য কাজের। কেনোনা এটি তেমন Snippet না যে সব ধরনের ওয়েবসাইটে ব্যবহার করা যাবে না।

কোড কালেক্টঃ

THIS POST END

So friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.

CONTACT ME

The post ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৩ appeared first on Trickbd.com.

source https://trickbd.com/web-development/3058630