ডিভি বিল্ডারের সাহায্যে, আমরা অনেক অনন্য এবং সৃজনশীল ডিজাইন করতে পারি। আজ আমরা দেখব কিভাবে Divi ভিজ্যুয়াল পেজ বিল্ডার ব্যবহার করে একটি ডাইনামিক 3D অ্যানিমেশন তৈরি করা যায় যা মাউস কার্সারের গতিবিধির সাথে ইন্টারেক্টিভ। সাধারণত, আমরা একটি বস্তুর উপর হভার বা অ্যানিমেশন ক্লিক করি কিন্তু এখানে, আমরা এমন একটি বস্তুকে অ্যানিমেট করব যা মাউসের গতিবিধির সাথে বিভিন্ন দিকে চলে যাবে। এছাড়াও, আপনি ’ দেখতে পাবেন কিভাবে একটি অবজেক্টে একটি হোভারিং 3D ইফেক্ট যোগ করা যায় যা ইন্টারেক্টিভ অ্যানিমেশন করে এবং ডিজাইনে প্রাণ আনে!
আমরা ডিজাইনের জন্য ডিভি বিল্ডার ব্যবহার করব এবং পরবর্তীতে, অ্যানিমেশন কার্যকারিতা তৈরি করতে আমরা কিছু CSS এবং jQuery কোড যোগ করব যা ডিজাইনটিকে জীবন্ত করে তুলবে! আপনি আপনার দর্শকদের কাছে আপনার পণ্যগুলিকে একটি নতুন উপায়ে প্রদর্শন করতে এই নকশাটি ব্যবহার করতে পারেন!
চূড়ান্ত নকশা
যদি আমাদের পরিকল্পনা অনুযায়ী সবকিছু ঠিকঠাক হয়, তাহলে আমাদের চূড়ান্ত নকশা অনেকটা সেরকম দেখাবে।
Divi-এ একটি ডাইনামিক 3D মাউসমুভ ইফেক্ট তৈরি করা
টাস্ক 1: পৃষ্ঠা সেটআপ
যেহেতু আপনি আপনার ওয়েবপৃষ্ঠায় এই প্রভাব তৈরি করতে চান, আমরা বিশ্বাস করি আপনি ইতিমধ্যেই Divi-এর সর্বশেষ সংস্করণ ইনস্টল করেছেন। এখন, ড্যাশবোর্ড থেকে “A একটি পৃষ্ঠা” যোগ করুন, আপনার প্রয়োজন অনুসারে এটিকে শিরোনাম করুন এবং Divi নির্মাতার সাথে এটিকে প্রসারিত করুন।
আশ্চর্যজনক ওয়েবসাইট তৈরি করুন
সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে
এখুনি শুরু করুন
এখন Scratch” থেকে “Build বেছে নিন এবং শুরু করুন।
টাস্ক 2: একটি হোভার কন্টেইনার & কার্ড তৈরি করা
হোভারে 3D অ্যানিমেশন সক্রিয় করতে, আমরা সারিটিকে লক্ষ্য করব। আমরা একে “Hover কন্টেইনার ” বলব। অন্যদিকে, কলামটি একটি কার্ড হিসাবে কাজ করবে, যা সারির উপর ঘোরাঘুরি করার সময় চাইল্ড উপাদানগুলির সাথে অ্যানিমেট করবে।
বিভাগ স্টাইলিং
ডিফল্ট বিভাগ সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন
- পটভূমির রঙ - RGBA(68,55,99,0.1)। এখানে 0.1 হল অপাসিটি।
- উপরে এবং নীচে উভয়ই "7vh" প্যাডিং যোগ করুন।
হোভার কন্টেইনার
এখন প্রস্তুত বিভাগে একটি এক-কলাম সারি যোগ করুন।
এখন নিম্নলিখিত পরিবর্তনগুলির সাথে সারি সেটিং আপডেট করুন।
- "কাস্টম নর্দমার প্রস্থ" সক্ষম করুন এবং মানটি 1 এ পরিবর্তন করুন৷
- প্রস্থ 100%
- সর্বোচ্চ প্রস্থ: 70% (ডেস্কটপ), 60% (ট্যাবলেট), 50% (মোবাইল)
- প্যাডিং: উপরে এবং নীচে 7vh, বাম এবং ডানদিকে 5vw।
উন্নত ট্যাবের অধীনে, একটি কাস্টম CSS ক্লাস যোগ করুন।
- CSS ক্লাস: et-hover-container
এছাড়াও, প্রধান উপাদানে CSS কোড যোগ করুন।
display:flex;
align-items:center;
justify-content:center;
কার্ড
সারি আপডেট শেষ করার পরে, কার্ডটি স্টাইল করার জন্য কলামের সেটিংটি খুলুন।
- পটভূমির রঙ #ffffff
- প্যাডিং: 7vh শীর্ষ, 7vh নীচে, 5% বাম, 5% ডান
- গোলাকার কোণ: 30px
- বক্স শ্যাডো: স্ক্রিনশট দেখুন
- বক্স শ্যাডো উল্লম্ব অবস্থান: 0px
- বক্স শ্যাডো ব্লার শক্তি: 80px
- ছায়ার রঙ: rgba(0,0,0,0.2)
উন্নত ট্যাবের অধীনে, একটি কাস্টম CSS ক্লাস যোগ করুন।
- CSS ক্লাস: et-mousemove-card
এছাড়াও, প্রধান উপাদানের অধীনে এই CSS কোড যোগ করুন।
max-width: 600px;
এখন ওভারফ্লো বৈশিষ্ট্যগুলিকে অনুভূমিক এবং উল্লম্ব ওভারফ্লো উভয়ের জন্য দৃশ্যমান হিসাবে সেট করুন।
টাস্ক 3: কার্ড এলিমেন্ট তৈরি করা
লোগো সহ সার্কেল পটভূমি
আমাদের কার্ডের প্রথম উপাদানটির জন্য, আমরা একটি বৃত্তের পটভূমি যোগ করতে যাচ্ছি যাতে আমাদের লোগো অন্তর্ভুক্ত থাকে যা আমাদের প্রধান পণ্যের চিত্রের পিছনে থাকবে।
এখন কলামে "টেক্সট" যোগ করুন এবং বডি খালি রাখতে ডিফল্ট টেক্সটটি সরিয়ে দিন।
এটি একটি গ্রেডিয়েন্ট পটভূমি যোগ করার সময়.
- গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড বাম রঙ #443763
- গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড ডান রঙ #EA3900
- গ্রেডিয়েন্ট ডিরেকশন 90 ডিগ্রীতে সেট করুন
গ্রেডিয়েন্ট রঙের সাথে, একটি পটভূমি চিত্র হিসাবে একটি লোগো যোগ করুন। ছবির সাইজ 60px x 60px হওয়া উচিত এবং ব্যাকগ্রাউন্ড ইমেজ সাইজ মান "প্রকৃত সাইজ" এ সেট করুন
"ডিজাইন" ট্যাবে, "সাইজিং" বিভাগে নিম্নলিখিত মানগুলি পরিবর্তন করুন। ডেস্কটপের জন্য প্রস্থের মান 160px, ট্যাবলেটের জন্য 150px এবং স্মার্টফোনের জন্য 80px সেট করুন।
এছাড়াও, উচ্চতা মান প্রস্থ হিসাবে একই সেট করুন। পরিশেষে, "সীমান্ত" বিভাগের অধীনে 80% মানের বৃত্তাকার কোণগুলি সেট করুন৷
"অ্যাডভান্সড" ট্যাবে, নিচের মত পজিশন আপডেট করুন।
- অবস্থান: পরম
- অবস্থান: শীর্ষ কেন্দ্র
- উল্লম্ব অফসেট: 15%
কার্ড ইমেজ
এখন, আমাদের লোগো অংশের কাজ শেষ, কার্ডে পণ্যের ছবি যোগ করা যাক। আমরা আগের টেক্সট মডিউলের অধীনে একটি নতুন ইমেজ মডিউল যোগ করব।
এখন পণ্যটির একটি ছবি আপলোড করুন। নিশ্চিত করুন যে ছবিটি স্বচ্ছ এবং এটি Png ফর্ম্যাটে রয়েছে। এখানে, আমরা একটি লাল ফেরারির ছবি ব্যবহার করছি।
"ডিজাইন" ট্যাবে, নীচে উল্লিখিত মানগুলি পরিবর্তন করুন৷
- চিত্র প্রান্তিককরণ: কেন্দ্র
- প্রস্থ: 90%
- মার্জিন: 12vh উপরে এবং 5vh নীচে (আপনার প্রয়োজন অনুসারে মানগুলি সামঞ্জস্য করুন)
"উন্নত" ট্যাব বিভাগে, ছবির জন্য একটি কাস্টম CSS ক্লাস যোগ করুন।
- CSS ক্লাস: et-card-image
গাড়ির শিরোনাম
এখন আমরা কার্ডের জন্য একটি শিরোনাম তৈরি করব। আমাদের গাড়ির ইমেজ অবস্থানে থাকায়, আমাদের কার্ড শিরোনাম তৈরি করতে ছবির নিচে একটি টেক্সট মডিউল যোগ করা যাক।
মূল অংশে, ডিফল্ট পাঠ্যটি সরান এবং নীচে দেওয়া HTML এর H2 শিরোনাম যোগ করুন।
<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>
এখন, ডিজাইন বিভাগে নিম্নলিখিত মানগুলি পরিবর্তন করুন:
- শিরোনাম 2 ফন্ট: Bebas Neue
- শিরোনাম 2 পাঠ্য প্রান্তিককরণ: কেন্দ্র
- শিরোনাম 2 পাঠ্যের রঙ: #443763
- শিরোনাম 2 পাঠ্যের আকার : ডেস্কটপের জন্য 75px, ট্যাবলেটের জন্য 60px এবং মোবাইলের জন্য 45px।
- শিরোনাম 2 অক্ষর ব্যবধান: 0.05em
- মার্জিন: নীচে 4vh
"উন্নত বিভাগে" একটি কাস্টম CSS ক্লাস যোগ করুন
- CSS ক্লাস: et-card-heading
কার্ড তথ্য
এখন আমরা কার্ড সম্পর্কে তথ্য যোগ করব। আমরা তথ্যের জন্য আরেকটি টেক্সট মডিউল যোগ করব কারণ এটি আমাদের তাদের প্রতিটিতে বিভিন্ন 3D অ্যানিমেশন প্রভাব যুক্ত করার অনুমতি দেবে। শিরোনাম টেক্সট মডিউল অধীনে একটি নতুন টেক্সট মডিউল যোগ করা যাক.
এখন শরীরে নিম্নলিখিত পাঠ্য বিষয়বস্তু যোগ করুন।
<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>
ডিজাইন ট্যাবের অধীনে, নিম্নলিখিত আপডেট করুন:
- টেক্সট ফন্ট ওজন: আধা বোল্ড
- পাঠ্যের আকার: 18px (ডেস্কটপ) এবং 16px (ট্যাবলেট এবং ফোন।)
- টেক্সট লাইনের উচ্চতা: 1.8em
- পাঠ্য প্রান্তিককরণ: কেন্দ্র
- মার্জিন: 4vh
এখন এই মডিউলে একটি কাস্টম CSS ক্লাস যোগ করুন।
- CSS ক্লাস: et-card-info
বোতামটি
এখন তথ্য পাঠ্য মডিউলের অধীনে একটি নতুন বোতাম মডিউল যোগ করুন। এটি কার্ডে একটি বোতাম যোগ করবে।
বোতাম সেটিংসের "সামগ্রী" ট্যাবে, বোতামের পাঠ্য পরিবর্তন করুন।
- বোতাম পাঠ্য: একটি অফার করুন।
"ডিজাইন" ট্যাবে, নীচে উল্লিখিত বোতামটি স্টাইল করুন।
- বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
- বোতাম পাঠ্যের আকার: 25px (ডেস্কটপ), 20px (ট্যাবলেট), 16px (ফোন)
- বোতাম পাঠ্যের রঙ: #ffffff
- বোতামের পটভূমির রঙ: #443763
- বোতাম সীমানা প্রস্থ: 0px
- বোতাম সীমানা ব্যাসার্ধ: 30px
- বোতাম অক্ষর ব্যবধান: 0.1em
- বোতাম ফন্ট: বেবাস নিউই
- প্যাডিং (ডেস্কটপ): 0.5em উপরে, 0.5em নীচে, 3em বাম, 3em ডান
- প্যাডিং (ফোন): 0.5em উপরে, 0.5em নীচে, 2em বাম, 2em ডান
এখন একটি কাস্টম CSS ক্লাস যোগ করুন
- CSS ক্লাস: et-card-buton
এখন পর্যন্ত ফলাফল
এখানে অ্যানিমেশন ছাড়াই আমাদের চূড়ান্ত ডিজাইন আউটপুট।
এখন আমরা এই ডিজাইনে প্রাণ আনতে কিছু কাস্টম কোড যোগ করব।
টাস্ক 4: CSS & JQuery কাস্টম কোড যোগ করা
যেহেতু আমাদের ডিজাইন সম্পূর্ণ, আমরা এখন আমাদের নতুন তৈরি কলাম এবং কার্ড উপাদানগুলিকে একটি গতিশীল 3D মাউস মুভ অ্যানিমেশন প্রভাব দেওয়ার জন্য CSS এবং JQuery কোড যোগ করব।
এটি করতে, বোতাম মডিউলের অধীনে একটি নতুন কোড মডিউল যোগ করুন।
বক্সে প্রদত্ত কাস্টম CSS কোড পেস্ট করুন এবং "স্টাইল" ট্যাগে কোডটি মোড়ানো নিশ্চিত করুন৷
<style>
/*add perspective to row for 3d perspective of child elements*/
.et-hover-container {
perspective: 1000px;
}
/*preserve-3d needed for 3d effect on card elements*/
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
/*transition timing function and duration for card elements*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}
</style>কোড মডিউলের বিষয়বস্তু ট্যাবের অধীনে CSS কোডটি এরকম দেখাবে।
CSS এর নীচে, নিম্নলিখিত JQuery যোগ করুন এবং নিশ্চিত করুন যে কোডটি "স্ক্রিপ্ট" ট্যাগের ভিতরে রয়েছে।
<script>
jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});
</script>
নিম্নলিখিত কোড কোড প্যানেলে এই মত দেখা উচিত.
এখন পুরো কাজটি সংরক্ষণ করুন এবং একটি লাইভ পৃষ্ঠায় পুরো কাজটি পরীক্ষা করুন।
চূড়ান্ত আউটপুট
তাই আমাদের সম্পূর্ণ নকশা এই মত দেখায়. শীতল হাহ!
চূড়ান্ত শব্দ
আজকের টিউটোরিয়ালে আমরা যে 3D অ্যানিমেশন দেখেছি তা শিখতে খুব সহজ এবং মজাদার। এটি একটি অনন্য এবং উন্নত অ্যানিমেশন প্রভাব যা মাউস চলাচল দ্বারা নিয়ন্ত্রিত হতে পারে। আমরা কিছু সাধারণ CSS এবং JQuery কোডিংয়ের মাধ্যমে এটি ডিজাইন করতে পারি। নিঃসন্দেহে, ডিভি একজন শক্তিশালী পৃষ্ঠা নির্মাতা এবং কাস্টমাইজড কোডিংয়ের মাধ্যমে ওয়েবসাইটগুলিতে একটি জাদুকরী ডিজাইন আনা সম্ভব।
