استفاده از آیکون های چرخشی در جوملا (وارپ)

[farshadf 10]

با سلام دوستان و خدمت جناب طاهری

میخواستم ببینم این ایکون هایی که افکت های jquery دارن چطوری وارد جوملا میشن افزونه خاصی داره یا باید کد زده بشه که اگر کد هست کجا و چطوری باید این کد هارو وارد کرد.

دو تا دمو اینجا قرار میدم که ببینید

دمو1 تو این دمو اسلاید شو widgetkit افکت ی روش هست که با رفتن موس روی اون باز میشه و ایکون های زیرش

دمو2

با تشکر از دوستان

[amir_seddighi 146]

درود

این مورد رو بررسی کنید : هدیه نوروز93 ▼▲منتشرشد ▼▲ Responsive FavEffects نمایش حالت های css3 واکنش گرا

[farshadf 10]

درود

ماجول زیبا و کار آمدی بود اما خیلی کم امکان شخصی سازی داشت و دست کاربر و بسته بود من بیشتر دنبال یه چیزی هستم که بشه کد زد داخلش و اون عکس اون افکت رو بگیره حالا نمیدونم همچین چیزی وجود داره یا نه البته حدس میزنم سایت نمونه هم همین کار رو کرده حالا نمیدونم که با افزونه ای اینکار رو کردن یا مستقیم داخل هسته جوملا کد زدن

باز هم تشکر از معرفی ماجول

[Vahid Taheri 74]

چیزی خیلی خاصی نیست. نمیدونم چقدر با Css3 و خاصیت hover آشنا هستید. اما یه توضیح مختصر و مفید درباره ساخت چنین افکتی رو بهتون میدم.

اول از همه باید توجه داشته باشید که تصاویر استفاده شده برای این کار ، با فرمت png و زمینه transparent هستند. نکته ی مهمش اینه که این تصاویر دو تیکه هستند. یک تیکه تصویر در حالت عادی ( که سفید هست ) و تیکه ی دیگه تصویر در حالت hover یا وقتی موس روی اون بخش هست ( که سیاه هست ). نمونه : این تصویر.

برای اینکه تصویر رو در سایت قرار بدین ، حتما باید از css و کد background-image استفاده کنید.

برای اینکه وقتی رفتید روی تصویر ، بصورت نرم ، تغییر کنه از کد transition استفاده کنید.

برای اینکه وقتی رفتید روی تصویر ، تصویر تغییر کنه ، برای حالت hover ، با استفاده از background-position مختصات تصویر جدید رو وارد کنید.

سورس یه نمونه از این افکت به صورت زیر هست :

کد html بصورت زیر :

<span class="example"> </example>

کد css برای حالت عادی بصورت زیر :

.example {
background-image: url('http://pardisban.ir/images/icons/newicon08.png');
background-repeat: no-repeat;
background-position: 0 0;
transition: all linear 0.5s;
width: 48px;
height: 48px;
}

کد css حالت hover:

.example:hover {
background-position: 50% -48px;
}

موفق باشید

[farshadf 10]

درود جناب طاهری

یه سوال دیگه و مشکل اصلی اینکه این ایکون هارو فرض کنیم از یه custom html وارد کردیم با همون span که فرمودید بعد باید css هارو داخل فایل custom.css قالب وارد کرد ؟؟ یعنی از داخل ماجول کلاس های custom.css رو میخونه ؟؟؟

[Vahid Taheri 74]

درود جناب طاهری

یه سوال دیگه و مشکل اصلی اینکه این ایکون هارو فرض کنیم از یه custom html وارد کردیم با همون span که فرمودید بعد باید css هارو داخل فایل custom.css قالب وارد کرد ؟؟ یعنی از داخل ماجول کلاس های custom.css رو میخونه ؟؟؟

باید توی فایل css که در سایت توسط قالب لود میشه قرار بدین. مثلا template.css .