ترفند المنتور: ساخت هاور افکتی که حرکت ماوس را دنبال می‌کند!

ترفند المنتور: ساخت هاور افکتی که حرکت ماوس را دنبال می‌کند! – سلام به همه وبمسترهای خفن و خلاق! 👋

اگه دنبال یه راهی هستی که سایتت نه‌تنها زیبا باشه، بلکه یه تجربه خاص و به‌یادموندنی بسازه، این مقاله دقیقاً برای توئه! 😍

بذار یه چیزی رو بهت رُک بگم: طراحی خوب فقط چیدن ویجت‌ها کنار هم نیست. گاهی یه ترفند ساده اما خلاقانه می‌تونه کاری کنه که بازدیدکننده‌ها با دهن باز به صفحه خیره بمونن 😲 و بگن: “اوه، این سایت یه چیز دیگه‌ست!”

امروز قراره با هم یه هاور افکت خاص و متفاوت بسازیم — یه نور متحرک که درست مثل یه سایه، با حرکت ماوس کاربر جابه‌جا می‌شه و بهش حس پویایی می‌ده 🔥

پس اگه آماده‌ای یه ترفند المنتور خفن یاد بگیری که یه دنیا تفاوت بسازه، این مطلبو به هیچ وجه از دستش نده و تا پایان مقاله منو با نگاه قشنگ و جذابت دنبال کن 🙂

×

چک‌ باکس‌ ها و دکمه‌ های رادیویی فرم‌ ها رو حرفه‌ای استایل بده!

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

چرا این افکت خاصه و باید ازش استفاده کنی؟ 🤔

ببین رفیق، این افکت فقط یه جلوه بصری ساده نیست، بلکه یه تکنیک فوق‌العاده ظریف و کاربردی برای درگیر کردن ذهن کاربره. وقتی برای مثال این افکت رو روی یه باکس جذاب قرار میدی و ماوس کاربر شروع به حرکت روی اون باکس می‌کنه و اون افکت نوری هم درست مثل یه سایه دنبالش می‌کنه، مخاطب ناخودآگاه جذب سایت می‌شه و یه حس “وای، این چقدر باحاله!” بهش دست می‌ده. 😍 این یعنی زمان بیشتری تو صفحه می‌مونه، تعاملش با محتوا بیشتر می‌شه، و خب… گوگل هم از این قضیه خوشحال می‌شه و به سایتت ارزش بیشتری میده😉👌

ابزارهایی که لازم داریم!🧰

خب رفیق، برای اینکه بتونی این ترفند المنتوری رو روی سایتت پیاده کنی و همه رو انگشت به دهن بذاری، به چند تا چیز کوچیک نیاز داریم:

• افزونه المنتور پرو (Elementor Pro): بله، برای اینکه بتونیم آزادانه کدها رو اضافه کنیم و از قابلیت‌های پیشرفته المنتور بهره ببریم، داشتن نسخه پرو الزامیه. 😉
• یه ذره حالِ کدنویسی (در حد خیلی کم): نگران نباش، قرار نیست برنامه‌نویس بشی یا کلی کد بنویسی. فقط در حد کپی و جایگذاری چند خط کد ساده‌ست که من قدم به قدم راهنماییت می‌کنم. پس استرس نداشته باش و با من پیش برو.

آموزش ساخت هاورافکت دنبال‌کننده ماوس

قبل از اینکه بریم سراغ اصل مطلب و دست به کار بشیم، یه نکته مهم رو بهت بگم که تو ذهنت داشته باشی: ما تو این مقاله قراره روی باکس‌ها یا همون کارت‌های المنتوری، این هاور افکت جذاب رو پیاده کنیم. یعنی هر جایی که یه “باکس” یا “کارت” تو سایتت داری و می‌خوای با حرکت ماوس، یه نور جذاب اون رو دنبال کنه، این آموزش دقیقاً به کارت میاد! 📦✨ البته اینو هم بگم که دستت بازه و فقط محدود به کارت‌ها نیستی؛ می‌تونی این ترفند رو روی هر المان دیگه‌ای که دوست داری هم پیاده کنی، فقط کافیه خلاق باشی و روند کار رو که در ادامه بهت کامل توضیح میدم، خوب یاد بگیری. 🤩

خب بریم سراغ مراحل انجام کار:

×

آموزش ساخت دکمه مشاهده بیشتر و کمتر با المنتور

مطالعه

• گام اول: اول از همه، یه برگه جدید تو وردپرس بساز و روی “ویرایش با المنتور” کلیک کن تا وارد محیط ویرایشگر بشی. حالا که المنتور برات باز شده، تو نوار ابزار بالای صفحه، دنبال آیکون “چرخ‌دنده” ⚙️ بگرد (نماد تنظیمات صفحه). روی اون کلیک کن و برو به تب “استایل“. اینجا، رنگ پس‌زمینه صفحه رو روی کد #10151B تنظیم کن. شاید بگی چرا این رنگ؟ 🤔 چون این رنگ تیره و جذاب باعث می‌شه هم باکس‌هایی که قراره روشون کار کنیم، هم اون افکت نوری خفنی که می‌سازیم، فوق‌العاده بهتر و چشم‌نوازتر به نظر بیان و حسابی خودنمایی کنن!

• گام دوم: در وسط صفحه، روی نماد + (اضافه کردن سکشن/کانتینر جدید) کلیک و یه کانتینر به صورت فلکس باکس و با چیدمان مشابه تصویر زیر اضافه کن.

برای اینکه کارمون مرتب باشه و بعداً گیج نشیم، بهتره اسم کانتینری که اضافه کردیم رو تغییر بدیم. از نوار ابزار بالای صفحه، روی آیکون “ساختار” (Navigator) کلیک کن. این بخش تمام المان‌های صفحه‌ات رو نشون میده. حالا، کانتینری رو که همین الان اضافه کردی، پیدا کن (معمولاً اسمش “Container” هست). روش دوبار کلیک کن و اسمش رو به “card section” تغییر بده. (درست مثل تصویر زیر)✨

• گام سوم: تو این مرحله، یه کانتینر جدید به اسم Card رو داخل کانتینر card section که تو مرحله قبل اضافه کردی، بنداز. این Card قراره اون باکسی باشه که تمام محتوای جذاب ما رو در بر می‌گیره و البته، همون جاییه که اون افکت نوری خفنمون روش اعمال میشه. پس حواست باشه که این کانتینر Card رو دقیقاً “درون” card section قرار بدی. 😉

• گام چهارم: حالا که “Card” اصلی رو داریم، وقتشه که المان‌های داخلیش رو بچینیم. داخل همین کانتینر “Card” که در مرحله قبلی اضافه کردی، یه کانتینر جدید بنداز. تو منوی “ساختار” (Navigator) المنتور پیداش کن، روش کلیک راست کن و دو بار گزینه “تکثیر” (Duplicate) رو بزن. به همین راحتی! حالا باید سه تا کانتینر مجزا، دقیقاً داخل کانتینر “Card” اصلیت داشته باشی. این سه تا کانتینر، قراره نقش‌های مهمی رو توی پیاده‌سازی افکت ما بازی کنن. 😉

• گام پنجم: الا که سه تا کانتینر داخلی داریم، وقتشه به هر کدوم یه اسم یونیک بدیم! 🧐 تو پنل “ساختار” (Navigator) المنتور، روی اولین کانتینر از اون سه تایی که داخل “Card” ساختی، کلیک راست کن و اسمش رو به content تغییر بده. این همون جاییه که محتوای اصلی کارتت (مثل عنوان، متن، تصویر و…) قرار می‌گیره. برای دومی، همین کار رو تکرار کن و اسمش رو بذار glow این المان قراره اون نور جذاب متحرک ما باشه و در نهایت، اسم کانتینر سومی رو هم به glow tracker تغییر بده. این “ردیاب نور” بهمون کمک می‌کنه تا موقعیت دقیق ماوس رو روی کارت تشخیص بدیم و نور رو دنبالش حرکت بدیم.

• گام ششم: حالا که ساختار پایه‌ای رو چیدیم، وقتشه محتوا رو بهش اضافه کنیم! از منوی “ساختار” (Navigator) المنتور، روی کانتینر content کلیک کن تا انتخاب بشه و مطمئن بشی که دقیقاً داخل همین کانتینر هستی. حالا از بخش ویجت‌های المنتور، ویجت “آیکون باکس” (Icon Box) رو بردار و بکش داخل کانتینر content. ✨ این ویجت یه عنوان، متن و یه آیکون داره که می‌تونی بعداً اونا رو شخصی‌سازی کنی. فعلاً همین که تو جای درست قرار بگیره کافیه. این همون فضاییه که قراره محتوای جذاب کارتت رو نمایش بدی! ✍️

متن، آیکون و… هر چیزی که تو ویجت آیکون باکس هست رو می‌تونی کاملاً طبق سلیقه و طرح خودت شخصی‌سازی کنی. این قسمت واقعاً کار سختی نیست و خیلی هم آسونه، برای همین به خودت می‌سپارمش تا با خلاقیتت یه طرح جذاب بسازی! بعد از اینکه این بخش رو هم انجام دادی و کارتت جون گرفت، ادامه مراحل زیر رو با دقت دنبال کن. 🤩

گام هفتم: خیلی خب، برای اینکه افکت نوری ما بتونه آزادانه توی کارت حرکت کنه و ماوس کاربر رو دنبال کنه، باید یه تنظیم مهم رو برای دو تا کانتینر اصلیمون یعنی glow و glow tracker انجام بدیم. پس، یکی‌یکی این دو کانتینر رو از پنل “ساختار” انتخاب کن، به تب “پیشرفته” (Advanced) برو. اونجا، تو قسمت “موقعیت” (Positioning)، گزینه “موقعیت” (Position) رو از حالت “پیش‌فرض” به “مطلق” (Absolute) تغییر بده. حواست باشه که بعد از این کار، فیلدهای “افست افقی” و “افست عمودی” (Horizontal Offset و Vertical Offset) رو که معمولاً روی صفر هستن، کاملاً خالی کنی. این تنظیمات حیاتیه چون به ما اجازه می‌ده با جاوا اسکریپت، موقعیت این نور و ردیابش رو دقیقاً کنترل کنیم و افکت جادویی‌مون به درستی کار کنه. ✨

×

افکت تغییر رنگ متن به صورت پویا در المنتور

مطالعه

• گام هشتم: حالا وقتشه یه سری تنظیمات تکمیلی روی کانتینرهامون انجام بدیم تا هم ظاهر بهتری داشته باشن و هم افکت نوری ما قشنگ‌تر به نظر بیاد. پس، کانتینر اصلی (card section) و کانتینر card رو انتخاب کن و به تب “پیشرفته” برو، بعد “فاصله داخلی” (Padding) رو 2 پیکسل تنظیم کن. حالا برای کانتینر content هم همین کارو تکرار کن، با این تفاوت که این بار فاصله داخلی رو 3 پیکسل تنظیم کن. در نهایت، به تب “استایل” هر چهار کانتینر card، content، glow و glow tracker برو و از بخش “حاشیه” (Border)، “شعاع مرز” (Border Radius) رو 16 پیکسل در نظر بگیر تا لبه‌هاشون گرد و جذاب بشه. 🤩 روی کانتینر card بزن. در قسمت تنظیمات بخش طرح بندی به پایین اسکرول کن و سرریز (overflow) رو مخفی کن. سپس به تب استایل برو و رنگ پس‌زمینه کارت رو به کد #0000001C تغییر بده.

• گام نهم: برای اینکه بتونیم توی کدهای جاوا اسکریپت به المان‌ها دسترسی پیدا کنیم و افکت نوری رو پیاده‌سازی کنیم، باید به هر کدوم از کانتینرهای اصلی‌مون یه کلاس CSS اختصاص بدیم. پس، یکی‌یکی کانتینرهای card، content، glow، و glow tracker رو انتخاب کن. برای هر کدوم، به تب “پیشرفته” (Advanced) برو و تو بخش “کلاس‌های CSS” (CSS Classes)، به ترتیب کلاس‌های card، mycontent، glow و glowtrack رو بنویس. این نام‌گذاری دقیق، کلید جادوی ما برای کنترل این المان‌هاست! 🔑✨

• گام دهم: تا اینجای کار، کارت یا باکس اولمون ظاهرش ردیف شده. حالا دیگه وقتشه بریم سراغ اون بخش اصلی که قراره اون هاور افکت جذاب رو اضافه کنه: یعنی اضافه کردن کد جاوا اسکریپت! 🚀 اما قبل از اینکه اون کدهای جادویی رو وارد کنیم، یه مرحله کوچولوی دیگه مونده که حسابی تو کیفیت نهایی کارمون تأثیر داره: باید رنگ و مشخصات بصری اون نور دنبال‌کننده ماوسمون رو تعیین کنیم. 🎨 از پنل “ساختار” (Navigator)، کانتینر glow رو انتخاب کن. بعد به تب “استایل” (Style) برو. تو بخش “پس‌زمینه” (Background)، یه رنگ روشن با شفافیت 25% انتخاب کن. من خودم یه رنگ سبز نئونی مثل #0CE967 رو پیشنهاد میدم، اما خودت می‌تونی با شفافیتش (Opacity) بازی کنی تا به اون جلوه نوری دلخواهت برسی. 💫 این تنظیم باعث میشه وقتی موس روی کارت میاد، یه هاله نورانی جذاب اون رو دنبال کنه. 🎨

الان که باکس اولمون کامل شده، اگه می‌خوای چند تا از این کارت‌های جذاب رو کنار هم داشته باشی (درست عین من)، کافیه از منوی “ساختار” روی کانتینر card کلیک راست کنی و گزینه “تکثیر” رو بزنی. به همین راحتی یه کپی از تمام تنظیمات و المان‌هاش ساخته میشه. تازه، برای اینکه هر باکس یه جلوه بصری منحصربه‌فرد داشته باشه، می‌تونی بعد از تکثیر، برای هر card جدید به تب “استایل” کانتینر glow مربوط به خودش بری و یه رنگ متفاوت با شفافیت مناسب انتخاب کنی تا رنگ اون سایه دنبال کنننده ماوس و هاور افکت اون باکس متفاوت از باکس کناریش باشه✨

• گام یازدهم: حالا در مرحله آخر دیگه وقتشه جادوی اصلی رو اضافه کنیم: کد جاوا اسکریپت. برای این کار، یه کانتینر جدید زیر کانتینر اصلی card section اضافه کن. داخل این کانتینر جدید، ویجت “HTML” رو بنداز و تمام کدهای جاوا اسکریپتی که پایین برات قرار دادم رو کپی کن و اونجا قرار بده. به همین سادگی! حالا صفحه رو ذخیره کن و برو از افکت نوری جذاب و تعاملی‌ت لذت ببر! ✨

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

📽️ویدیوی آموزش کامل ساخت باکس با هاور افکت جذاب که حرکت ماوس را دنبال میکند!

🔒

محتوای VIP+

این محتوا فقط برای اعضای ویژه قابل مشاهده است. برای دسترسی به تمام آموزش‌های اختصاصی رایا وردپرس، عضو ویژه شوید.

×

ایجاد افکت منحصر به فرد و چشم‌ نواز روی متن با المنتور

مطالعه

ویژه شوید 🙂

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

حرف آخر

خب رفقا، دیدین که با یه ترفند المنتور و چند خط کد ساده، چقدر می‌تونیم سایت رو جذاب‌تر و پویاتر کنیم؟ ✨ این جور افکت‌ها نه تنها برای کاربر جذابه، بلکه باعث میشه سایت شما از بقیه رقبا متمایز بشه و یه تجربه کاربری فوق‌العاده رو رقم بزنه. پس دیگه بهونه‌ای برای یه سایت خشک و بی‌روح ندارین! 💪

حالا نوبت شماست که دست به کار بشین و این افکت جذاب رو به سایتتون اضافه کنید. اگه سوالی داشتین یا به مشکلی خوردین، حتماً تو بخش نظرات بپرسین. من اینجا هستم که کمکتون کنم. 😉 موفق باشین و تا یه آموزش دیگه، فعلاً! 👋

×

چک‌ باکس‌ ها و دکمه‌ های رادیویی فرم‌ ها رو حرفه‌ای استایل بده!

مطالعه