হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।
তো প্রতেক দিন একটা করে পোস্ট আর একটা করে ভিডিও টিউটোরিয়াল পোস্ট করার ট্রায় করছি। যাতে করে সবচেয়ে বেশি তারাতারি আপনাদের কিছু শেখাতে পারি। তো আজ আমরা দেখবো যখন গুগল এসিস্ট্যান্ট ওপেন করি তখন একটা লোডিং এনিমেশন অন হয় সেটা কীভাবে ডিজাইন করতে হয়। তো চলেন দেখে নেই কোড গুলোঃ-
তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু Index.html এ রাখবেনঃ-
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google Bouncy Loader - Pogamar | The Tech Therapist</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="google-loader"> <div class="loader-elements one"></div> <div class="loader-elements two"></div> <div class="loader-elements three"></div> </div> </div> </body> </html>
রেখে সেইভ দিন। এবং নিম্মের কোড টুকু রাখবেন style.css এঃ-
Example
/*
*
* Google Bouncy Loader
* Pogamar
* The Tech Therapist
*
*/
* {
margin: 0;
padding:0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.google-loader {
display: grid;
grid-template-columns: 2rem 2rem 2rem;
justify-content: center;
align-items: center;
}
.loader-elements {
border-radius: 100%;
width: 1.5rem;
height: 1.5rem;
animation-duration: 1s;
animation-name: bouncy;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.one {
background: #d1493d;
}
.two {
background: #668ceb;
animation-delay: 1s;
}
.three {
background: #eebf2f;
animation-delay: 1.5s;
}
@keyframes bouncy {
from {
transition: translate(0, 0);
}
to {
transform: translate(0, -1rem);
}
}
এবার কোড টা এক্সিকিউট করুন। আর যারা কোড রান করাতে পারেন্না (আশা করি সবাই পারেন) তাদের বলবো ট্রিকবিডিতে অনেক পোস্ট আছে ওয়েব সার্ভার সেট আপ দেয়ার যেকোন একটা দেখে নিলেই হবে। আর না পারলে নিচে কমেন্ট করুন আমি টিউটোরিয়ালের মাধ্যমে শিখিয়ে দিবো। আর যাদের কাছে কঠিন লাগে তারা ক্রোম ওপেন করেও রান করাতে পারেন যেটা আমি প্রায় সব পর্বেই দেখিয়েছিলাম। যারা দেখেননি তাদের জন্যে আজ আবার দেখিয়ে দেয়া হলো-
file://sdcard/folder_name
অর্থাৎ আপনার ফোল্ডার এর নাম যদি হয় 3d_flip_card তাহলে আপনাকে ইউয়ারএল বক্স এ লিখতে হবেঃ-
file://sdcard/3d_flip_card/index.html
তারপর দেখুন আপনার কোড এক্সিকিউট হচ্ছে। এবার আপনার যেমন ভালো লাগে তেমন মডিফাই করে নিন। দরকার হলে কালার চেঞ্জ করে নিন। সম্পুর্ন আপনার ইচ্ছে।
ডেমোঃ
আর যাদের এই টিউটোরিয়াল টি বুঝতে অথবা কোড বুঝতে সমস্যা হচ্ছে তারা ভিডিও টি দেখুনঃ
আর যারা এখন ও এদিক ওদিক ঘুরতেসেন আর বলতেসেন ভাইয়া কাজ শিখান আর তারা আপনার কাছে টাকা দাবি করছে তাদের জন্যে আমি বলতে চাইবো যে আমার চ্যানেল এর পাশে থাকতে পারেন অন্তত আমি বেশি না পারি একটু হলেও শেখাতে পারবো ইনশাল্লাহ। আমার শুধু চাই আপনাদের সাহায্য আর সহযোগিতা।
আর প্রত্যেক টিউটোরিয়াল এ আমি বলি যে আপনারা যদি চান আমার এই দেয়া কোড গুলো আপনারা এই আপনাদের ওয়ার্ডপ্রেস অথবা আপনাদের ওয়েবসাইটে ইউজ করতে পারেন। তবে শুধু ক্লাস গুলো চেইঞ্জ করে নিলেই হবে। ক্লাস গুলো চেইঞ্জ করে নিবেন। অর্থাৎ আপনার থিম এর যেখানে যেখান্র বাটন আছে সেই বাটনের ক্লাস এর সাথে আমার দেয়া সিএসএস এর ক্লাস গুলো রিপ্লেস করে নিলেই হয়ে যাবে ইনশাল্লাহ। আর যদি না পারেন তবে নিচে কমেন্ট করবেন ইনশাল্লাহ আমি তা নিয়ে টিউটোরিয়াল বানিয়ে দিবো।
পোস্টের কমেন্টে বলুন আপনাদের প্রব্লেম এবং ভিডিও গুলোতে কি আমি প্রত্যেক লাইন কোড এক্সপ্লেইন করবো কিনা।
তো যাদের আমার টিউটোরিয়াল গুলো ভালো লাগছে তারা শেয়ার করে আমাকে সাহায্য করুন এবং ভিডিও ভালো লেগে থাকলে চ্যানেল সাবস্ক্রাইব করতে ভুলবেন্না।
আবার আসব আরেক টিউটোরিয়াল নিয়ে। ততদিন সুস্থ থাকুন। Pogamar এর সাথে থাকুন।
ভিজিট করুন আমার সাইট বাংলাপেন
আর যাদের এই টিউটোরিয়াল এর কোড গুলো প্রয়োজন তারা এখান থেকে ডাউনলোড করে নিনঃ Download Codes
আর ভালো লাগলে আমার চ্যানেল টি সাবস্ক্রাইব করুনঃ
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন
8 thoughts on "গুগল এসিস্ট্যান্ট এর লোডিং এনিমেশন এফেক্ট কীভাবে ডিজাইন করবেন শুধুমাত্র এইচটিএমএল এবং সিএসএস এর মাধ্যমে।"