با استفاده از این قطعه کدها، مسیر انیمیشن خود را شکل دهید

به چندین صورت مختلف به نظر می‌رسد که ما در عصر طلایی انیمیشن بر روی وب هستیم. در درجه اول هم به این خاطر که گزینه‌های زیادی برای پیاده‌سازی آن در پروژه‌های خود وجود دارد.

قطعا شما می‌توانید از برخی کتابخانه‌های JavaScript قدرتمند برای ساخت یک چیز جهانی بهره ببرید. اما شما همچنین می‌توانید از افکت‌هایی که از پیش در CSS ساخته شده‌اند هم برای اضافه کردن جنبش به وبسایت خود استفاده کنید. در هر صورت، کاربر نهایی لزوما نیازی به یک سخت‌افزار فانتزی یا پلاگین‌های مرورگر برای دیدن ساخته شما ندارد.

این مسئله ما را به موضوع امروزی مسیرهای انیمیشن می‌آورد. ما با استفاده از یک مسیر می‌توانیم به تعداد زیادی افکت جذاب دست بیابیم. ما می‌توانیم داستان بگوییم، به خوبی یک طرح را سازمان‌دهی کنیم یا به سادگی مقداری خصیصه خلاقانه به طراحی‌های خود اضافه کنیم.

بیایید برخی از راه‌های خاص که توسعه دهندگان می‌توانند شروع به استفاده از مسیرها برای انجام انیمیشن‌های وب بیشتر نمایند را بررسی کنیم.

Sign Your Name

ایده ساخت یک امضای پویانمایی شده به یک چیز، جدید نیست. ما برای سال‌ها آن را در تلویزیون و فیلم‌ها دیده‌ایم. همچنان همانطور که در این مثال می‌بینیم، این افکت هنوز هم پروژه ما را با کلاس می‌کند. در این قطعه کد، SVG با JavaScript ترکیب شده است تا یک افکت بسیار نرم و تیز را بسازد.

Rainbows

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

Shattered Dreams

این که انیمیشن را به عنوان ابزاری برای جمع‌بندی چیزی در نظر داشته باشیم، ساده است. اما ما همچنین می‌توانیم از آن برای شکستن استفاده کنیم. برای مثال این قطعه کد از GSAP برای اضافه کردن یک افکت خرد شده به متن استفاده می‌کند. حتی بهتر این که بردن موس بر روی متن به همه چیز اجازه می‌دهد تا در سرعت پایین بشکنند.

Side Along My Path

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

Is That Menu Following Me?

اغلب مواقع یک مسیر، چیزی است که توسط یک طراح برای کنترل یک انیمیشن طراحی شده است. همینطور که شما نشان‌گر موس خود را به بالا و پایین حرکت می‌دهید، یک منوی hamburger در نوار چپی آن را دنبال می‌کند. این نشان می‌دهد که مسیرها می‌توانند برای توابع هم به مانند فرم‌ها استفاده شوند.

Draw Your Own Treasure Map

خطوط راه راه، انیمیشن‌های ساده‌ای را می‌سازند و این نمایش از پلاگین GSAP DrawSVG نگاهی به نحوه پیاده‌سازی برخی موارد استفاده رایج برای این تکنیک را ارائه می‌دهد. همچنان، این انیمیشن همچنین می‌تواند به عنوان تخته‌ای برای کارهای بیشتر عمل می‌کند.

Skull Candy

انیمیشن جمجمه می‌تواند به همان قدر که شما می‌خواهید زیبا و پیچیده باشد. جزئیات سطح بالای تصویر SVG به همراه زمان‌بندی و دقت انیمیشن، یک افکت مسحور کننده را می‌سازند. خوشبختانه، شما می‌توانید با شامل کردن دکمه DRAW AGAIN، هر چند بار که می‌خواهید آن را تماشا کنید.

The Dark Side of the Animation

این افکت منشور تمام صفحه می‌تواند یک پس‌زمینه شگفت‌انگیز را بسازد. این افکت از Lengthy استفاده می‌کند، که ساخت انیمیشن‌های بر پایه SVG که از متغیرهای CSS استفاده می‌کنند را آسان‌تر می‌کند. ترکیب تکنیک‌های خط‌کشی مختلف برای ساخت این نمایش نور استفاده شده است. بدرخش، ای الماس دیوانه.

شما کدام مسیر را انتخاب می‌کنید؟

مسیرهای انیمیشن به تنهایی شاید خیلی شگفت‌انگیز نباشند. گرچه چیزی که آن‌ها فراهم می‌کنند، راهی است برای آوردن نظم به آشوب (یا برعکس) جنبش وبسایت شما.

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

منبع