ফ্রি এলিমেন্টর পেজ বিল্ডার ব্যবহার করে মুভিং ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেশন তৈরি করুন

ফ্রি এলিমেন্টর পেজ বিল্ডার ব্যবহার করে একটি চলমান ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেশন তৈরি করা এখন আমার কাছে খুব সহজ বলে মনে হচ্ছে। এখানে আপনাকে পৃষ্ঠার মধ্যে কিছু CSS কোড যোগ করতে হবে। CSS কোড ফ্রি এলিমেন্টর যোগ করার একটি উপায়ও আছে।

আমি ব্যাকগ্রাউন্ড ইমেজের সাথে আশ্চর্যজনক কিছু শেয়ার করতে যাচ্ছি। এটি সত্যিই মজার কিছু তৈরি করা ছিল যা নজরকাড়া বলে মনে হয়। এখানে বিভিন্ন ধরনের দুটি উৎস আছে এলিমেন্টর পৃষ্ঠার পটভূমি এবং এলিমেন্টর তির্যক পটভূমি আপনি যদি আপনার উপাদান বা বিভাগগুলির পটভূমিকে সৃজনশীল উপায়ে সাজাতে চান তবে এটি পরীক্ষা করা নিশ্চিত করুন৷। 

একটি চলমান ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেশন কি?

ক মুভিং ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেশন এটি একটি লুপিং CSS অ্যানিমেশন যা ধীরে ধীরে আপনার পৃষ্ঠার বিষয়বস্তুর পিছনে একটি প্রশস্ত পটভূমি চিত্র স্লাইড করে, তাই একটি ভিডিও ফাইল লোড না করেই বিভাগটি জীবন্ত বোধ করে৷ Elementor-এ আপনি এটিকে একটি পূর্ণ-উচ্চতা বিভাগ দিয়ে তৈরি করেন, CSS আইডি বহনকারী দুটি স্পেসার বিজি এবং ওভারলে, এবং একটি ছোট ব্লক CSS @keyframes একটি HTML উইজেটে কোড পেস্ট করা হয়েছে কোনও এলিমেন্টর প্রো লাইসেন্স নেই এবং জাভাস্ক্রিপ্টের প্রয়োজন নেই৷ এটি সবচেয়ে হালকা এক এলিমেন্টর অ্যানিমেশন প্রভাব আপনি যোগ করতে পারেন, কারণ ব্রাউজার মিডিয়া চালানোর পরিবর্তে একটি একক রূপান্তর অ্যানিমেট করে।

প্রথমে নিচের ভিডিওতে দেখা যাক কেমন লাগে।

এই বিভাগে উপলব্ধ মাস্টার অ্যাডঅন টেমপ্লেট লাইব্রেরি বিনামূল্যে। আপনি সহজেই আপনার ওয়েবপৃষ্ঠার মধ্যে এটি আমদানি করতে পারেন যদি আপনি একটি হন মাস্টার অ্যাডঅনস 1 এলিমেন্টর পেজ বিল্ডার অ্যাডন প্লাগইন ব্যবহারকারী। 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

চেক করুন কিভাবে ইনস্টল এবং সক্রিয় মাস্টার অ্যাডঅন প্লাগইন

একটি পৃষ্ঠা বা পোস্ট তৈরি করুন এবং এলিমেন্টর ব্যবহার করে এটি সম্পাদনা করুন। আপনি মাস্টার অ্যাডঅন টেমপ্লেট লাইব্রেরি আইকন দেখতে পাবেন। 

MA Tempalte লাইব্রেরিতে ক্লিক করুন এবং ডেটা লোড করতে কয়েক সেকেন্ড অপেক্ষা করুন। আপনি “Ready Page” এবং “ections” দেখতে পাবেন। বিভাগ ট্যাবে ক্লিক করুন এবং কয়েক সেকেন্ড অপেক্ষা করুন। এখন আপনি "মুভিং ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেশন" দেখতে পাবেন। 

এখন এটির পূর্বরূপ দেখতে জুম আইকনে ক্লিক করুন। তারপর আপনি একটি সন্নিবেশ বোতাম দেখতে পাবেন। এই টেমপ্লেটটি এক ক্লিকে পেতে এই “insert” বোতামে ক্লিক করুন। এর পরে আপনি সামগ্রী সম্পাদনা করতে পারবেন।

আপনার বিভাগটি দেখতে কেমন হবে। আমি আমার লোকালহোস্টে ওয়ার্ডপ্রেস ডিফল্ট থিম ব্যবহার করছি। বিষয়বস্তু সম্পাদনা করতে শুধু শিরোনাম বা অনুচ্ছেদ বা সামাজিক ক্লিক করুন। 

আপনি যদি আপনার নিজের ইমেজ এবং ওভারলে প্রভাব যোগ করতে চান তাহলে আপনাকে যেতে হবে বিজি এবং ওভারলে ইমেজ বিভাগ পরিবর্তন করা হচ্ছে এখন।

মুভিং ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেশন টিউটোরিয়াল

সংক্ষিপ্ত উত্তর: "স্ক্রিনে ফিট" সেট করা একটি এক-কলামের এলিমেন্টর বিভাগ তৈরি করুন, CSS আইডির সাথে একটি স্পেসার যোগ করুন বিজি আপনার বিষয়বস্তুর উপরে এবং আইডি সহ একটি দ্বিতীয় স্পেসার ওভারলে এটির নীচে, তারপরে একটি HTML উইজেটে নীচের CSS অ্যানিমেশন কোডটি পেস্ট করুন এবং আপনার নিজের ছবির URLগুলিতে অদলবদল করুন৷ আপনার তিনটি সম্পদের প্রয়োজন (একটি প্রশস্ত ব্যাকগ্রাউন্ড ইমেজ, একটি PNG ওভারলে এবং একটি SVG ওভারলে • এবং সম্পূর্ণ বিল্ডটি বিনামূল্যে এলিমেন্টর পৃষ্ঠা নির্মাতাকে প্রায় দশ মিনিট সময় নেয়৷।

আপনার প্রয়োজনীয় সম্পদ: 

1. 1500 বাই 500 পিক্সেল মাত্রা বিশিষ্ট একটি ছবি
2. একটি PNG ওভারলে চিত্র
3. একটি SVG ওভারলে চিত্র

এখন একটি কলামের কাঠামো যোগ করুন এবং এটির উচ্চতা তৈরি করুন “ স্ক্রিনের জন্য উপযুক্ত"৷। 

শুধু এখন আপনার বিষয়বস্তু যোগ করুন। আমি এখানে ডেমো বিষয়বস্তু টাইপোগ্রাফি তথ্য শেয়ার করতে যাচ্ছি। 

শিরোনাম (ব্যবহৃত এলিমেন্টর ডিফল্ট শিরোনাম উপাদান): ফন্ট ফ্যামিলি: সোর্স সানস প্রো, ফন্ট সাইজ: 120px, ফন্টের ওজন: 900, লাইনের উচ্চতা: 140, অক্ষরের ব্যবধান: -5, রঙ: কালো

পাঠ্য (ব্যবহৃত এলিমেন্টর ডিফল্ট টেক্সট এডিটর এলিমেন্ট): ফন্ট ফ্যামিলি: সোর্স সানস প্রো, ফন্ট সাইজ: 30px, ফন্টের ওজন: 400, লাইনের উচ্চতা: 40, রঙ: কালো

সামাজিক (ব্যবহৃত এলিমেন্টর ডিফল্ট সোশ্যাল এলিমেন্ট): আকৃতি: বৃত্ত, প্রান্তিককরণ: কেন্দ্র, রঙ: কাস্টম, প্রাথমিক কালো: rgba(175,175,175,0), সেকেন্ডারি রঙ: কালো, আকার: 40, স্থান: 30, সীমান্তের ধরন: কঠিন, সীমানা প্রস্থ: 2, সীমানা রঙ: কালো

নিম্নলিখিত GIF অ্যানিমেশনটি দেখুন এবং আপনি বুঝতে পারবেন কীভাবে আপনার উপাদান উপাদানের মধ্যে এই সমস্ত সম্পত্তি প্রয়োগ করতে হয়। 

উন্নত ট্যাব ব্যবহার করে প্রতিটি উপাদানে z-index=1 রাখুন। শুধু প্রতিটি উপাদানে ক্লিক করুন এবং উন্নত ট্যাবে নেভিগেট করুন। নিম্নলিখিত ছবিটি পরীক্ষা করুন। 

(যদি আপনি এটি মিস করেন তবে আপনি চলমান ব্যাকগ্রাউন্ড ইমেজ CSS কোড যোগ করার পরে উপাদান সামগ্রী সম্পাদনা করতে সমস্যার সম্মুখীন হবেন। আপনি যদি এখানে z-সূচক না রাখেন তবে সামগ্রী সম্পাদনা করতে আপনাকে এলিমেন্টর নেভিগেটর সিস্টেম ব্যবহার করতে হবে।)

এখন দুটি স্পেসার যোগ করুন। একটি শিরোনামের শীর্ষে এবং অন্যটি সোশ্যাল মিডিয়া আইকনের নীচে। 

উপরের স্পেসারে আইডি হিসাবে “BG” রাখুন। এবং নীচের স্পেসারে আইডি হিসাবে “overlay” রাখুন। 

টপ স্পেসারে বিজি আইডি যোগ করা হচ্ছে

নিচের স্পেসারে ওভারলে আইডি যোগ করা হচ্ছে

“ যোগ করুনএইচটিএমএলসোশ্যাল মিডিয়া আইকনের নীচে বা দ্বিতীয় স্পেসারের শীর্ষে ” উপাদান৷। 

বিজি ইমেজ এবং ওভারলে ইমেজ লিঙ্ক পরিবর্তন করা হচ্ছে

আপনি কি আমাদের মুভিং বিজি ইমেজ অ্যানিমেশন সম্পদ সম্পর্কে মনে রাখবেন? এখন আপনার ওয়েবসাইটে সেগুলি আপলোড করার সময়। ব্যাকগ্রাউন্ড ইমেজ, পিএনজি ওভারলে এবং এসভিজি ওভারলে ইমেজ আপলোড করুন। তারপর এই 3টি লিঙ্ক কপি করুন এবং আপনার কোড এডিটর বা নোটপ্যাডে তালিকাভুক্ত করুন। 

আপনার কোড এডিটরে নিম্নলিখিত কোডটি অনুলিপি করুন। এবং ব্যাকগ্রাউন্ড ইমেজ লিঙ্ক, PNG এবং SVG ইমেজ ওভারলে লিঙ্ক পরিবর্তন করুন। আমি দুটি স্ক্রিনশট যোগ করেছি যেখানে আপনি সহজেই খুঁজে পেতে পারেন কোন লিঙ্কগুলি পরিবর্তন করা উচিত। 

উচ্চ রেজোলিউশন সংস্করণ দেখতে প্রতিটি ছবিতে ক্লিক করুন। 

ব্যাকগ্রাউন্ড ইমেজ ইউআরএল পরিবর্তন করুন

ওভারলে ইমেজ URL পরিবর্তন করুন

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

এখন আপনার সম্পাদিত কোড Bg এবং ওভারলে ইমেজ দিয়ে কপি করুন। তারপর এটি HTML উপাদানে পেস্ট করুন। আপনি অবিলম্বে ফলাফল দেখতে পাবেন। আপনি যদি CSS এর সাথে কাজ করতে জানেন তবে আপনি অ্যানিমেশনটিও কাস্টমাইজ করতে পারেন।

আমি আপনাকে যেভাবে দেখিয়েছি ঠিক সেই চেহারাটি দেখতে আসুন পাঠ্যের রঙ এবং সোশ্যাল মিডিয়ার রঙকে সাদাতে পরিবর্তন করি।

এলিমেন্টর পেজ বিল্ডার প্লাগইন ব্যবহার করে মুভিং ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেশন তৈরি করার বিষয়েই। আপনি আমাদের ব্যবহার করে আপনার বিষয়বস্তু স্টাইল করতে পারেন মাস্টার অ্যাডনের প্লাগইন খুব। এটি আপনার পৃষ্ঠার জন্য স্থির পটভূমি হবে। আপনি যদি একটি বিভাগের জন্য চলমান পটভূমি সেট করতে চান তবে অবস্থানটি “ এ পরিবর্তন করুনপরম“. 

আপনি কোন সমস্যার সম্মুখীন হলে এখানে মন্তব্য করতে নির্দ্বিধায়। আমি আপনাকে আপনার চলমান বিজি ইমেজ অ্যানিমেশন কাস্টমাইজ করার জন্য গাইড করব।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী