ওয়েব ডেভলপারদের জন্য 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 || পার্ট – ২
3. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৩

তো এই পোর্টেও আগের মতো কিছু Snippet শেয়ার করবো যা একজন ডেভলপারের কাজে অনক সাহায্য করতে পারে। তো চলুন শুরু করা যাক!

Gallery এবং ছবি Lazyload

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

অনেক সময় Portfolio Photography ওয়েবসাইট বানাতে হলে ছবির Gallery বানাতে হয়। তবে তার মধ্যে যদি একটু Lazyload থাকে তাহলো জিনিসটা একটু ভালো দেখাবে। এটিতে রয়েছে Lazyload সিস্টেম যা সব Device এ কাজ করবে!

কোড কালেক্টঃ

Drop & Down এবং GSAP অ্যানিমেশন

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

বেশির ভাগে সব ওয়েবসাইটেই এখন Dropdown সিস্টেম করা থাকে। আর তৈরি করতে হলে করাও লাগে আর সেটা যদি Animated হয় তাহলে অনেক ভালো লাগবে। এই Snippet এ GSAP এর অ্যানিমেশন ব্যবহার করা হয়ে Dropdown এর জন্য। এটি চাইলে ব্যবহার করতে পারেন!

কোড কালেক্টঃ

লোডার

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

এই লোডার টা কেমন দেখতেই তো পেলেন। ছোট ছোট বল যেগুলো এদিক থেকে সেদিক যাচ্ছে। এটি আপনি ওয়েবসাইটের Preloader হিসাবে ব্যবহার করতে পারেন। যদি অনেক কোথায় করেন তাহলে white Background এ দিবেন, তাহলে লোডার টা সুন্দর দেখাবে!

কোড কালেক্টঃ

SVG লেখা Path অ্যানিমেশন

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

এটি হলো একটি Svg Text অ্যানিমেশন। যা লেখাগুলোকে এমনে ঘুরাতে থাকবে। এখানে আপনি নিজের বা কোম্পানি বিষয়ে লেখে সেটাকে এভাবে অ্যানিমেশন এ করতে পারেন!

কোড কালেক্টঃ

Splittext এবং Protect Word

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

এটিতে রয়েছে কিছু Animation যা লেখাগুলোকে উপর থেকে নিয়ে আসবে! সুন্দর Gradient কালার রয়েছে লেখাগুতে। তার সাথে লেখা গুলোকে Space এ রাখা হয়েছে সুন্দর করে। এগুলোতে Font Style ব্যবহার করলে আরো সুন্দর দেখাবে। এটি আপনি আপনার যেকেনো ওয়েবসাইট বসাতে পারেন। অনেক সুন্দর দেখাবে!

কোড কালেক্টঃ

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.

from
https://trickbd.com/web-development/3058759