کدهای جذاب و دیدنی ( Ocean ) : ساخت انیمیشن زیبا با SVG و Anime

در این قسمت میخوام یک کد ( Ocean ) جالب رو در اختیارتون بزارم.

دمو

توضیحات مربوط به کد Ocean

همونطور که دیدید تعدادی سه ضلعی وجود دارد که در کنار یکدیگر یک دلفین رو به وجود آوردند و بعد از اون به زیبایی تبدیل به یک متن Ocean میشن. این سه ضلعی ها با استفاده از SVG به وجود اومدن و با استفاده از ابزار Anime.js اونا رو بصورت انیمیشنی در میاریم.

برای مشاهده کدهای این نمونه میتونین وارد بخش View Source بشید.

برای اینکار بصورت تصادفی یکی از المنتهای SVG رو انتخاب میکنیم و مسیر اون رو تغییر میدیم و در جای مورد نظرمون قرارش میدیم.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

لینک دانلود

Source

attractive beauty code CSS‏ idea inspire Ocean