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

POST ICON
  • پیش گفتار این مقاله
  • سید ابوالفضل حسینی در 1399/03/29

دانلود مجموعه آیکون متحرک درود بر همراهان همیشگی بیت بنگ با توجه به اینکه یکی از مهم ترین نکات در طراحی، تعامل با کاربر می باشد. ما بر آن شدیم تا در این پست مجموعه ای از آیکون های متحرک را برای شما آماده کنیم. زمانی می توانیم به یک طرح بگوییم ، طرحِ خوب

POST ICON

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

درود بر همراهان همیشگی بیت بنگ

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

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

به عنوان نمونه یک دکمه باید طوری طراحی شود که وقتی کاربر روی آن Hover  کند ، رنگ آن تغییر کند.

یک رابط کاربری که در تعامل با کاربر است باید نسبت به کلیک یا hover  کردن کاربر واکنش نشان دهد.

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

ما هم امروز با دانلود آیکون های متحرک که با فرمت SVG آماده شده اند در خدمت شما هستیم .

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

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

می توانید از این آیکون ها در adobe xd نیز استفاده کنید.

سبک طراحی آیکون های این مجموعه Lineral  می باشد.

پکیج آیکون

فرمت این آیکون ها SVG  می باشد.

ویژگی که فرمت SVG دارد این است که از آن می توان در تمامی سایز ها بدون افکت کیفیت استفاده نمود.

برای ساخت این مجموعه از پلاگین Bodymovin  استفاده شده است .

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

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

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

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

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

 

<script src=”./js/titanic.min.js”></script>

<script src=”./js/bodymovin.min.js”></script>

 

سپس قبل از بسته شدن تگ body  کد زیر را قرار دهید.

تا پلاگین مدنظر را فراخوانی و فعال کند.

 

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

خب تقریبا چیزی نمانده ، فقط شما باید با استفاده از کلاس های داخل فایل index.html آیکون مورد نظر را در صفحه وب استفاده کنید.

به عنوان نمونه کد زیر برای استفاده از آیکون سبد می باشد.

 

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

بطور کلی هر آیکون درون یک div  با دو کلاس قرار می گیرد.

کلاس اول titanic و کلاس دوم نام آیکون را می نویسید.

 

یاد گیری نهایت ندارد ما باید دائما در حال یادگیری باشیم….