آموزش ساخت و استفاده از آیکون های زنده

آموزش ساخت و استفاده از آیکون های زنده

آیکون های زنده،پدیده ی جدیدی هست که احتمالا در برخی اط سایت ها و وبلاگ ها دیده باشین!این آیکون ها به نحوی ساخته و کدنویسی شدن که با hover شدن حرکت میکنن(وقتی نشانگر موس روی اونها قرار میگیره).

آیکون های امروز از سایت livicons.com انتخاب شدن و رایگان در اختیار شما قرار خواهند گرفت.با استفاده از آموزش امروز،شما هم یک وب زنده که به حرکات موس توی صفحاتش جواب میده خواهید داشت!

  • ابتدا از لینک دانلودی که در پایین این صفحه وجود داره،بسته ی آیکون های زنده رو دانلود کنید و فایلcustomizer.html را از مسیرLivicons/Customizer/customizer.html را بازکنید.در صفحه ای که باز میشه،آیکون هایی رو که دوست دارید توی وبتون استفاده کنید رو با زدن تیک اونها انتخاب کنید!اسم هر آیکون زیر آیکون نوشته شده،به خاطر بسپارید.
  • بعد از انتخاب آیکون های مورد نظرتون،صفحه رو به سمت پایین بیاید تا به قسمت Step 2 – Set the default parameters برسید.
    در این قسمت میتونید تنظیماتی برای آیکون هاتون انجام بدید! یکی از این تنظیمات،تنظیم کردن سایز آیکون ها است! از اونجایی که فرمت این آیکون ها Svg هست،با تغییر اندازه هیچ تاثیر منفی توی کیفیت آیکون ها ایجاد نمیشه.
    گزینه ها رو براتون ترجمه میکنم!:
    Default icons size : سایز آیکون ها!به پیکسل
    Default icons color : رنگ پیشفرض آیکون ها
    Change color on hover : تغییر رنگ آیکون ها هنگامی که نشانگر موس روی اونها قرار میگیره
    Are icons animated by default : در حالت عادی آیکون ها انیمیشنی باشن؟
    Is animation looped by default : انیمیشن آیکون ها تکرار شه؟ اگه این گزینه رو false کنید، انیمیشن اون آیکون فقط یک بار رخ میده ولی اگه true باشه بینهایت ادامه پیدا میکنه.
    Default event type=hover or click : حرکت آیکون ها در چه صورتی رخ بده؟وقتی نشانگر موس میره رو آیکون یا وقتی که رو آیکون کلیک میشه؟
    Default active class name for icons : نام پیشفرض class برای آیکون های فعال
    Default active class name for icons’ parents = نام class پیشفرض برای ریشه ی آیکون ها!!پدر و مادر آیکون ها
  • بعدش به قسمت Step 3 – Get the code برید و روی دکمه ی Get the code کلیک کنید تا کدی که نیاز دارید ساخته بشه! کل کدهایی که ساخته شده رو کپی کنید و با فرمت js و به کمک notepad ذخیره کنید!

سپس دو فایل jquery-1.9.1.min.js و raphael-min.js را ازپوشه Livicons\Upload\minified به همره فایلی که ایجاد کردید و با فرمت js ذخیره کردید رو آپلود میکنید و آدرس اونهارو توی قالبتون قبل از تگ هد قرار میدید!به صورت زیر:

<script type=”text/javascript” src=”java address“></script>

به جای java address در کد بالا،باید آدرس هارو تک تک بذارید!
یعنی باید سه تا از اون کد داشته باشید که در قسمت java address هر کدوم،آدرس یکی از اون فایل هایی که آپلود کردید رو بذارید.

برای فراخوانی در وردپرس از کدهای زیر استفاده کنید:

<script type=”text/javascript” src=”<?php bloginfo( ‘template_url’ ); ?>java address“></script>

<script type=”text/javascript” src=”<?php bloginfo( ‘template_url’ ); ?>java address“></script>

بعد از اون برای هر قسمتی که میخواید از آیکون های زنده استفاده کنید از کدهای زیر در اون قسمت استفاده کنید:

<span class=”livicon” data-n=”name of icon” data-c=”#fff” data-size=”20″></span>

در کد بالا به جای name of icon باید اسم آیکونی که قبلا تیکشو زده بودید رو بزارید! یادتونه اسم آیکون هارو کجا دیدید؟

پایان!
آموزشی که قرار دادم یکی از کامل ترین آموزش های اینترنت در این مورد هست!امیدوارم ازش استفاده کنید برای زیباتر شدن وب های ایران!
میدونم که کپی رایت رو هم رعایت میکنید….

پی نوشت

برای تکمیل این نوشته از سایت www.mycrosite.ir و www.livicons.com استفاده شده است.

 


 


 

نویسنده

00mostafa00
سلام مصطفی خرمی هستم مدیر جدید سایت بزرگ بنر ساز تسلط کامل بر html,html5,css,css3 دارم و کمی هم گرافیک بلدم

پست های مرتبط

بدون پست مرتبط یافت نشد.

10 نظر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *