دانلود مجموعه آیکون های متحرک SVG

دسته:
توضیحات مختصر محصول

دانلود مجموعه آیکون های متحرک SVG

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

نشان دهد. مثلا یک دکمه می بایست به گونه ای طراحی شود که زمانی که کاربر روی آن Hover کند، رنگ آن تغییر کند.

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

آیکون های متحرک با فرمت SVG در خدمتتان هستیم.مجموعه آیکون های متحرک titanic کلکسیونی از رایج ترین و زیباترین آیکون های متحرک مورد استفاده از عموم پروژه

ها هستند.

سبک طراحی این آیکون ها Lineal می باشد و فرمت اصلی آنها SVG می باشد که باعث می شود در تمامی سایزها بدون افت کیفیت قابل استفاده باشند.این آیکون ها

در تمامی پروژه های طراحی رابط کاربری وب و اپلیکیشن قابل اجرا هستند و برای تولید آنها از پلاگین bodymovin استفاده شده است.

 مجموعه آیکون های متحرک SVG

نحوه استفاده از سورس کد

برای استفاده از آیکون های متحرک می بایست محتویات پوشه js را به اینصورت در تگ Head به صفحه وب خود معرفی کنید:

<script src="./js/titanic.min.js"></script>
<script src="./js/bodymovin.min.js"></script>

سپس قبل از بسته شدن تگ body صفحه، با استفاده از کد زیر پلاگین را فراخوانی و فعال کنید.(کد زیر را قبل از بسته شدن تگ body قرار دهید.):

<script>
    var titanic = new Titanic('https://rawgit.com/icons8/titanic/master/src/icons/');
</script>

تقریبا کار تمام شده است. کافی است با استفاده از کلاس هایی که داخل فایل index.html موجود است آیکون مدنظر خود را در صفحه وب استفاده کنید.مثلا برای استفاده از ایکون سبد خرید در فایل Html از کد زیر استفاده کنید:

<div class='titanic titanic-shopping'></div>

در واقع هر آیکون درون یک div با دو کلاس قرار خواهد گرفت. کلاس اول titanic و کلاس دوم نام آیکون خواهد بود.

نمایش بیشتر