কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা শিখব ।

প্রায় জিজ্ঞাসিত প্রশ্ন:

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল লোডার তৈরি করা যায়?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

হ্যা , আজকে আমারা প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা শিখব । এবং সবশেষে সোর্স কোড দিয়ে দিবো এবং কিছু কাস্টমাইজেশন করা শিখব । তবে কাস্টমাইজেশন করতে হবে শুধু এইচটিএমএল অংশে এবং কিছুটা সিএসএস অংশে। আসলে এখানে তেমন কিছু কাস্টমাইজেশন এবং সিএসএস এবং এইচটিএমএল লিখতে হবে না কিন্তু আপনাদের প্রয়োজন অনুসারে ভিন্ন হতে পারে । আপনি এখানে অনেক কিছু যুক্ত করতে পারেন এবং কাস্টমাইজেশন করতে পারেন । শুধুমাত্র কিছু সাধারণ কোড লিখে আমরা এটি করা শিখব । এবং আমি এখনে সোর্স কোড আপনাদের উপহার হিসেবে দিব । সোর্স কোড কাস্টমাইজেশন এর মাধ্যমে আপনি আরো বেশি শিখতে পারেন। এগুলো তৈরি করতে আমাদের যেন সময় নষ্ট না হয়। এই জন্য আমি আপনাদের সব সময়ই সোর্স কোড দিই । আপনি কী কাস্টমাইজেশন জানেন? যদি নাত পারেন তাহলেও সমস্যা নেই । আমি কিছু দিক নির্দেশনা দিব যা আপনাকে কাস্টমাইজেশন করতে সাহায্য করবে । অথবা আপনি সরাসরি সোর্স কোড ব্যবহার করুন, সমস্যা হবে না । কিন্তু ছবি, রং এগুলো সাধারণত আমি দিয়েছি তা পরিবর্তন করতে হবে । এখানে সোর্স কোড দিলাম এবং আমি পরে ধাপে ধাপে ব্যাখ্যা করার চেষ্টা করব ।

Source Code:

          
    <body>
  
<div class="ball">
		<div class="inner">
			<div class="line"></div>
			<div class="line line--two"></div>
			<div class="oval"></div>
			<div class="oval oval--two"></div>
		</div>
	</div>
	<div class="shadow"></div>
<style>
html,
body {height: 100%;}
body {
	align-items: center;
	background-image: url('/Download/slideshow.jpeg');
	display: flex;
	flex-direction: column;
	justify-content: center;}
.wrapper {
	transform-origin: bottom;
	transform: scaleY(0.85);}
@-webkit-keyframes rotateBall {
	0% {transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
	50% {transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);}
	100% {transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg);}}
@keyframes rotateBall {
	0% {transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
	50% {transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);}
	100% {transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg);}}	
@-webkit-keyframes bounceBall {
	0% {transform: translateY(-70px) scale(1, 1);}
	15% {transform: translateY(-56px) scale(0.9, 1.1);}
	45% {transform: translateY(70px) scale(1, 1);}
	50% {transform: translateY(73.5px) scale(1, 0.85);}
	55% {transform: translateY(70px) scale(1, 0.95);}
	85% {transform: translateY(-56px) scale(0.9, 1.1);}
	100% {transform: translateY(-70px) scale(1, 1);}}
@keyframes bounceBall {
0% {transform: translateY(-70px) scale(1, 1);}
	15% {transform: translateY(-56px) scale(0.9, 1.1);}
	45% {transform: translateY(70px) scale(1, 1);}
	50% {transform: translateY(73.5px) scale(1, 0.85);}
	55% {transform: translateY(70px) scale(1, 0.95);}
	85% {transform: translateY(-56px) scale(0.9, 1.1);}
	100% {transform: translateY(-70px) scale(1, 1);}}	
.ball {
	-webkit-animation-name: bounceBall;
        	animation-name: bounceBall;
    -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);    	
    border-radius: 50%;
    height: 60px;
    position: relative;
    transform: translateY(-70px);
    transform-style: preserve-3d;
    width: 60px;
    z-index: 1;}
.ball::before {
	background: radial-gradient(circle at 36px 20px, brown, yellow);
	border: 1.9px solid white;
	border-radius: 50%;
	content: "";
	height: calc(100% + 6px);
	left: -3px;
	position: absolute;
	top: -3px;
	transform: translateZ(1vmin);
	width: calc(100% + 6px);}
.ball .inner {
	-webkit-animation-name: rotateBall;
	        animation-name: rotateBall;
	-webkit-animation-duration: 25s;
	        animation-duration: 25s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	border-radius: 50%;
	height: 100%;
	position: absolute;                                
	transform-style: preserve-3d;
	width: 100%;}
.ball .line::before, .ball .line::after {
	border: 2px solid darkblue;
	border-radius: 50%;
	content: "";
	height: 99%;
	position: absolute;
	width: 99%;}
.ball .line:before {
	transform: rotate3d(0, 0, 0, 0);}
.ball .line:after {
	transform: rotate3d(1, 0, 0, 90deg);}
.ball .line--two:before {
	transform: rotate3d(0, 0, 0, 2deg);}
.ball .line--two:after {
	transform: rotate3d(1, 0, 0, 88eg);}
.ball .oval::before, .ball .oval::after {
	border-top: 4px solid #333333;
	border-radius: 50%;
	content: "";
	height: 99%;
	position: absolute;
	width: 99%;}
.ball .oval:before {
	transform: rotate3d(1, 0, 0, 45deg) translate3d(0, 0, 6px);}
.ball .oval:after {
	transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 0, -6px);}
.ball .oval--two:before {
	transform: rotate3d(1, 0, 0, 135deg) translate3d(0, 0, -6px);}
.ball .oval--two:after {
	transform: rotate3d(1, 0, 0, -135deg) translate3d(0, 0, 6px);}
@-webkit-keyframes bounceShadow {
	0% {filter: blur(3px);
		opacity: 0.6;
		transform: translateY(73px) scale(0.5, 0.5);}
	45% {filter: blur(1px);
		opacity: 0.9;
		transform: translateY(73px) scale(1, 1);}
	55% {filter: blur(1px);
		opacity: 0.9;
		transform: translateY(73px) scale(1, 1);}
	100% {filter: blur(3px);
		opacity: 0.6;
		transform: translateY(73px) scale(0.5, 0.5);}}
@keyframes bounceShadow {
	0% {filter: blur(3px);
		opacity: 0.6;
		transform: translateY(73px) scale(0.5, 0.5);}
	45% {filter:blur(1px);
		opacity: 0.9;
		transform: translateY(73px) scale(1, 1);}
	55% {filter: blur(1px);
		opacity: 0.9;
		transform: translateY(73px) scale(1, 1);}
	100% {filter: blur(3px);
		opacity: 0.6;
		transform: translateY(73px) scale(0.5, 0.5);}}		
.shadow {
	-webkit-animation-name: bounceShadow;
        	animation-name: bounceShadow;
    -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);		
    background: black;
    filter: blur(2px);
    border-radius: 50%;
    height: 6px;
    transform: translateY(73px);
    width: 54px;}
  
</style>
    
    </body>

🍃

১. এইচটিএমএল অংশ তৈরি

আমরা যেগুলো প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন এর ভিতরে রাখব। সেগুলো আমাদের <div class="ball"> ট্যাগের মধ্যে রাখতে হবে ।

বিশেষ দ্রষ্টব্য : এখানে বেশি কিছু কাস্টমাইজেশন করা লাগবে না, আর যদি আপনার প্রয়োজন হয় তাহলে আপনি নিজে অনেক কিছু যুক্ত করতে পারেন । কোনো সমস্যা হলে আমাকে জানাতে পারেন ।

২ সিএসএস অংশ তৈরি ।

অযথা কন্টেন্ট বড় না করার জন্য এখানে শুধুমাত্র আপনাকে কী পরিবর্তন করতে হবে তাই শিখাব । প্রত্যেক লাইন ভেঙে ভেঙে বা আলাদা করে তৈরি বা শিখানো খুবই কষ্টসাধ্য ব্যাপার । আপনার যদি কোথাও সমস্যা হয় তবে আপনি আমাকে জানাতে পারেন । এখন আমরা ব্যাকগ্রাউন্ড রং বা ফটো পরিবর্তন করতে শিখব। নিচে খেয়াল করুন -
background-image: url('/Download/naturalground.png');

এখানে আপনি যে ব্যাকগ্রাউন্ড ফটো যুক্ত করতে চান । সেই ফটো নির্বাচন করুন । আমি এখানে আমার ইচ্ছে অনুযায়ী নির্বাচন করেছি।
আপনি ফটো যুক্ত করতে না চাইলে background:#bbb; পটভূমি রং নির্বাচন করতে পারেন ।

রেজাল্ট বা ফলাফল :

শেষ কথা:
আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সহজেই যেকোনো প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করতে পারবেন । সিএসএস এবং এইচটিএমএল তৈরি করে বিশেষ ধরনের প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা আপনার কাছে এখন নিশ্চয়ই খুব সহজ কিছু । কমেন্ট বক্স এ মতামত জানাতে ভুলবেন না ।

বিশেষ দ্রষ্টব্য :
সোর্স কোড এ কোনোরকম ভুল বা ত্রুটি নেই ।কারণ পরীক্ষা করা হয়েছে এবং তা আপনারা উপরে ফলাফল হিসেবে দেখছেন । তারপরও যদি কোনো সমস্যা হয় তাহলে আমাকে জানাতে পারেন । মানুষ মাত্রই ভুল ।

My Talk:

ধন্যবাদ আপনাকে এই ব্লগ টি পড়ার জন্য । আসসালামু আলাইকুম! আমি শেখ জুবায়ের । কিছু কথা বলতে চাই । আসলে অনেক কষ্ট করে, চিন্তাভাবনা করে, প্রত্যেক বিষয়বস্তু সম্পর্কে জ্ঞান অর্জন করে এবং অনেক সময় নিয়ে এই আর্টিকেল বা কন্টেন্ট বা ব্লগটি লিখেছি । তাবে কিছু বানান বা বাক্যের ভূল হতে পারে । আশা রাখি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন । তবুও কোনো সমস্যা হলে কমেন্ট বক্স এ জানাবেন । আমি আপনার প্রশ্নের যথাযথ উত্তর দেওয়ার চেষ্টা করব । আশা রাখি উপকারে আসবে । অউপকারে আশার মতো কিছু লিখিনি আমি এটি আমার বিশ্বাস।

🍃

Result Here-

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!

Popular Posts

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল লোডার তৈরি করা যায়?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

১. এইচটিএমএল অংশ তৈরি

২ সিএসএস অংশ তৈরি ।

My Talk:

Posted by Priyo Event

Post a Comment

0 Comments

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form

Popular Posts

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল প্রি লোডার তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল প্রাণচঞ্চল বাস্কেটবল লোডার তৈরি করা যায়?

কীভাবে এইচটিএমএল, সিএসএস ব্যবহার করে প্রতিক্রিয়াশীল বাস্কেটবল প্রি লোডার অ্যানিমেশন তৈরি করা যায় ?

১. এইচটিএমএল অংশ তৈরি

২ সিএসএস অংশ তৈরি ।

My Talk:

Posted by Priyo Event

You may like these posts

Post a Comment

0 Comments

Social Plugin

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form