انیمیشن ورود برای تصاویر سایت: سلام و درود به همراهان عزیز رایا وردپرس 👋 امروز قراره با هم یه کار خیلی باحال و خلاقانه تو المنتور انجام بدیم. از اون انیمیشن های تکراری و ساده‌ی ورود تصاویر خسته شدی؟ دلت می‌خواد وقتی کاربر صفحه سایتت رو میبینه، با دیدن افکت‌های ورود تصاویرت، دهنش باز بمونه؟ 😮

تو این آموزش قراره یه تکنیک برگ ریزون😁 یاد بگیری که باهاش هر ویدیویی رو تبدیل به یه انیمیشن ورود خاص برای تصاویرت کنی. افکت‌هایی مثل دود، پیکسل، جوهر و هرچی که فکرشو بکنی!

آماده‌ای؟ بزن بریم! 🚀

🎬 قدم اول: پیدا کردن ویدیوی ترنزیشن (انتقال)

اولین کاری که باید بکنی اینه که یه ویدیوی ترنزیشن خوب پیدا کنی. منظورم از ترنزیشن، اون ویدیوهای کوتاهیه که مثلاً از رنگ سیاه به سفید تغییر می‌کنن.

• چرا سیاه به سفید؟ 🤔 چون قراره از این ویدیو به عنوان ماسک استفاده کنیم. قسمت‌های سیاه، تصویر اصلی ما رو مخفی نگه می‌دارن و هر جا که ویدیو سفید می‌شه، تصویر ما نمایان می‌شه. جادوی کار همینه!
• از کجا پیدا کنیم؟ یه سایت عالی و رایگان برای این کار vecteezy هست. برو تو این سایت و عبارت smoke transition رو جستجو کن تا کلی ویدیوی خفن پیدا کنی.

ویدیوی مورد نظرت رو دانلود کن و بیا سراغ مرحله بعد.

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

✂️ قدم دوم: ویرایش ویدیو و تبدیلش به GIF

حالا باید اون ویدیویی که دانلود کردی رو آماده و به گیف تبدیل کنیم. نگران نباش، خیلی ساده‌ست!

مراحل کار در این سایت به شرح زیر است:

1. ورود به سایت: وارد وب‌سایت ezgif.com بشو.
2. انتخاب ابزار: از منوی بالای سایت، گزینه “Video to GIF” رو انتخاب کن.
3. آپلود ویدیو: فایل ویدیویی رو که در مرحله قبلی دانلود کردی رو در سایت آپلود کن.
4. تنظیمات کلیدی GIF: پس از آپلود، صفحه‌ای برای تنظیمات باز میشه. در این بخش تنظیمات زیر رو با دقت انجام بده:
   • Loop Count (تعداد تکرار): تیک گزینه “loop” رو بردار یا تعداد تکرار رو روی ۱ تنظیم کن. انیمیشن ورود فقط باید یک بار اجرا بشه.
   • Frame Rate (نرخ فریم): برای اینکه انیمیشنت نرم و روان باشه، نرخ فریم (FPS) رو تا جای ممکن روی بالاترین عدد تنظیم کن اینکار حجم ویدیو رو افزایش میده برای حالت منطقی و نرمال روی 10 بزار باشه 🙂
5. ساخت و بهینه‌سازی GIF:
   • روی دکمه “Convert to GIF” کلیک کن.
   • پس از ساخته شدن GIF، ابزارهای بهینه‌سازی در پایینش نمایش داده میشه.
   • حذف پس‌زمینه (Optimize): یکی از مهم‌ترین قدم‌ها، حذف پس‌زمینه سیاهه تا GIF ات شفاف (Transparent) بشه. این کار حجم فایل رو به شدت کاهش میده. روی گزینه Optimize در نوار ابزار پایین گیف بزن از قسمت more tools در زیر گیف گزینه Remove Background رو بزن. یه پنل تنظیمات برات باز میشه رنگی که باید حذف بشه از ویدیو رنگ مشکی هست. انتخابش کن و مقدار “Fuzziness” رو روی 10 تنظیم کن. این مقدار یک تعادل خوب برای حذف رنگ مشکیه، به طوری که طیف‌های خاکستری نزدیک به مشکی نیز تا حد مناسبی حذف میشن و لبه‌های انیمیشن صاف و تمیز باقی میمونه.
   • فشرده‌سازی (Compression): با استفاده از دکمه submit روند فشرده‌سازی، گیف آغاز میشه و حجمش تا جای ممکن کم میشه. ممکنه لازم باشه چند بار این کار رو با درصدهای مختلف امتحان کنی تا به بهترین نتیجه برسی.

نتیجه نهایی این قدم، یک فایل GIF سبک، شفاف و بدون تکراره که آماده است تا در قدم بعدی به عنوان یک افکت ورود خیره‌کننده در المنتور استفاده بشه.

حالا یه فایل GIF بهینه‌سازی شده و آماده داری. دمت گرم! 💪

فایل گیفی که من در این آموزش استفاده کردم رو برات قرار دادم دانلودش کن و در کتابخانه وردپرس خودت آپلود کن 🙂

🔒

محتوای ویــــژه

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

عضو ویژه شوید 🙂

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

🚀 قدم سوم: پیاده‌سازی انیمیشن ورود تصویر در المنتور

اینجاست که جادوی المنتور و گیف ترنزیشین خودنمایی میکنه!

1. ساخت سکشن: یه کانتینر (Container) به صورت فلکس باکس بساز، عرضش رو بذار روی تمام عرض یا Full Width.
2. اضافه کردن تصاویر: دو تا ویجت تصویر (Image) بنداز تو کانتینر.
3. دادن کلاس CSS: به هر دو تا تصویرت یه کلاس CSS یکسان بده. برو به تب پیشرفته (Advanced) و در قسمت کلاس‌های CSS عبارت RayaWp-mask-animated رو وارد کن.
4. تنظیم ماسک (Mask):
   • برای هر تصویر، تو همون تب پیشرفته، گزینه Mask رو فعال کن.
   • شکل (Shape) ماسک رو روی Custom بذار.
   • حالا اون فایل GIF خفنی که ساختی رو آپلود و انتخاب کن. 🥳
   • اندازه (Sizing) رو روی Full و موقعیت (Position) رو Center تنظیم کن.
5. اضافه کردن کد: یه ویجت HTML پایین صفحه بنداز و کد جاوا اسکریپتی که پایین گذاشتم برات رو داخلش Paste کن. این کد باعث می‌شه انیمیشن به درستی اجرا بشه.

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗   ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║   ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

تمام! برای اینکه نتیجه رو ببینی، یه کم پدینگ (فاصله داخلی) از بالا به کانتینرت بده تا تصاویر اولش دیده نشن. حالا صفحه رو منتشر کن و از دیدن انیمیشن ورود بی‌نظیری که خودت ساختی لذت ببر!

🛠️ ابزارهایی که لازم داری

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

• vecteezy: برای پیدا کردن ویدیوهای ترنزیشن رایگان و باکیفیت.
• ezgif.com: یک ابزار آنلاین عالی برای تبدیل ویدیو به GIF و بهینه‌سازیش.

امیدوارم از این آموزش لذت برده باشی و باهاش سایت‌های خیلی پویاتر و جذاب‌تری طراحی کنی. اگه سوالی داشتی، حتماً بپرس! 😉

ساخت هاور افکت ترسیم خطوط حاشیه دکمه یا باکس در المنتور

مطالعه

اضافه کردن فونت دلخواه به المنتور (+ویدیو آموزشی)

مطالعه

ایجاد انیمیشن چیدمان کارت‌ ها روی هم هنگام اسکرول

مطالعه