TrickBD টেক্সটের ভিতর অ্যানিমেশন ছবি যুক্ত করুন HTML CSS দিয়ে। কেউ লেখাতে চাপ দিলেই ইমেজ এনিমেশন হবে!!!
Web Development

TrickBD টেক্সটের ভিতর অ্যানিমেশন ছবি যুক্ত করুন HTML CSS দিয়ে। কেউ লেখাতে চাপ দিলেই ইমেজ এনিমেশন হবে!!!

আসসালামু আলাইকুম

আশা করছি আল্লাহ তায়ালার অশেষ রহমতে আপনারা সকলেই ভাল আছেন। আমিও আল্লাহর রহমতে ভালো আছি এবং সুস্থ আছি আলহামদুলিল্লাহ।

আজকে আমি আপনাদের সাথে আলোচনা করব কিভাবে এইচটিএমএল সিএসএস দিয়ে টেক্সট মাস্ক তৈরি করবেন।
ডেমো না দেখিয়ে আপনাদের বোঝানো মুশকিল যে এটা কি। তাই নিচে ডেমো এর লিঙ্ক দিয়ে দিলাম এখান থেকে দেখে আসতে পারেন।

Demo Link:

Click Here To See

আপনি চাইলে নিচের HTML, CSS কোড কপি করতে পারেন। সেক্ষেত্রে আপনার নিজের ইমেজ ব্যবহার করতে হবে।
আর যদি সম্পূর্ণ কপি করতে চান তাহলে সোর্সকোড উপরের লিঙ্ক থেকে ডাউনলোড করে নিতে পারেন।

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Text Mask</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">

<body>

<section class="banner">
	<h1>TRICK BD</h1>
</section>









</body>
</head>

CSS:

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

*{
	box-sizing: border-box;
}

.banner{
	background-color: #000000;
	height: 100vh;
	display: flex;
	align-items: center; /*vertical center*/
	justify-content: center; /* horizontal center*/
}

.banner h1{
	margin:0;





	color:transparent;
	font-size: 180px;
	background-image:url('img/rfxu1nokaX.jpg');
	background-size: cover;
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-o-background-clip: text;
	transition:background-position 1s ease;

}

.banner h1:hover{
	background-position: 0 -50%;
}

সম্পূর্ণ পোস্টটি পড়ার জন্য আপনাকে ধন্যবাদ।

11 thoughts on "TrickBD টেক্সটের ভিতর অ্যানিমেশন ছবি যুক্ত করুন HTML CSS দিয়ে। কেউ লেখাতে চাপ দিলেই ইমেজ এনিমেশন হবে!!!"

  1. AJ sabbir Author says:
    August 7, 2020 at 12:40 pm
    Reported..
    !!!
    1. Rider Author Post Creator says:
      August 7, 2020 at 12:58 pm
      Thank You..!!! ?
  2. Hridoy khan Contributor says:
    August 7, 2020 at 1:02 pm
    Good
  3. muradhasanmedia7 Contributor says:
    August 7, 2020 at 3:46 pm
    post ar aga matha kichui bujlam na …
  4. Tazim Ahmed Contributor says:
    August 7, 2020 at 4:06 pm
    Good
  5. King Author says:
    August 7, 2020 at 4:41 pm
    বুঝলাম নাহ।।একটু বিস্তারিত লেখতেও পারতেন।
  6. Al Sayeed Author says:
    August 7, 2020 at 7:24 pm
    post beshi valo hoy nai
    ar, background-image:url(‘img/rfxu1nokaX.jpg’); ekhane image er full link na dile to kaj korbe na
  7. Lipon Islam Author says:
    August 7, 2020 at 10:55 pm
    Post er to kicui bujhlam na. ar demo link koi ?
  8. Ｒａｋｉｂ Ｈａｓａｎ ツ Author says:
    August 7, 2020 at 11:22 pm
    এইটা কি ছিল….!

    যিনি লিখেছেন একমাত্র তিনিই জানেন…!

    মানুষরে কি আপনার মতো বুদ্ধিমান ভাবছেন …..?

  9. MD Shakib Hasan Contributor says:
    August 8, 2020 at 10:23 am
    ?
  10. Levi Author says:
    August 27, 2022 at 10:19 pm
    কোডগুলো দেয়ার জন্য যে html কোড ইউজ করেছেন সেগুলো দেয়া যাবে?

Leave a Reply