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

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

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

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

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

استفاده از این آیکون ها در پروژه های برنامه نویسی رابط کاربری بسیار آسان می باشد که به صورت مختصر و مفید آموزش داده شده است.

برای استفاده از آیکون های متحرک می بایست محتویات پوشه 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 و کلاس دوم نام آیکون خواهد بود.