رفتن به مطلب

منبع jquery های زیبا و کاربردی


پست های پیشنهاد شده

اسلایدر Skitter

screenshot-5.jpg?r=658560

  • اسلایدر نمایش تصاویر با جی کوئری
  • گزینه های متعدد سفارشی سازی
  • قابل استفاده آسان همراه با نصب افزونه وردپرس
  • دارای تصاویر بند انگشتی و شماره اسلاید ها
  • نوار زمان loading اسلاید بعدی
  • افکت های بیشمار نمایش اسلاید ها
  • دارای دکمه توقف و ادامه نمایش اسلایدها
  • پیمایش اسلاید قبلی و بعدی با دکمه ها
  • دارای گزینه نمایش تمام صفحه اسلاید

Skitter-Slideshow-thumb.png?1340895481skitter.jpg

  • سایت های استاتیک:


http://www.skitter-slider.net/

  • مخزن github :


https://github.com/thiagosf/SkitterSlideshow

  • افزونه سایت اصلی وردپرس (wordpress.org):


http://wordpress.org/extend/plugins/wp-skitter-slideshow/

لینک به ارسال
  • 4 ماه بعد...

ایجاد تصاویر ۳ بعدی با CSS3

این بار میخواهیم توسط یک خاصیت از css3 به همراه جی کوئری، چگونگی ایجاد نصاویر سه بعدی را یاد بدهیم. پس از اعمال این استایل، وقتی که تصویر در حالت hover قرار میگیرد، به صورت ۳ بعدی، تا میشود که همین تا شدن ۵ حالت دارد که در پیش نمایش نیز قابل مشاهده است. همچنین از این جی کوئری، در قسمت طرح نمایشگاه سایت گوگل استفاده شده است.

3dThumbnailHoverEffects.jpg

لینک منبع فارسی

لینک به ارسال

با FlipClock یک شمارنده زیبا بسازید!

یک پلاگین جی کوئری به همراه انیمیشن CSS3 میباشد که بیشتر به منظور شمارش معکوس مورد استفاده قرار میگیرد.

flipclock-js-jquery-plugin-counter-timer-clock-flip-effect.jpg

با FlipClock یک شمارنده زیبا بسازید!

ویژگی های این شمارنده:

  • قابل استفاده برای ساعت و شمارش معکوش
  • قابل تغییر استایل توسط CSS
  • هماهنگی کامل بین اجزا

لینک منبع

ویرایش شده توسط سعید حسینی
آدرس سایت منبع ذکر نشده بود
لینک به ارسال
  • 2 هفته بعد...

باز هم قوانین فیزیک و جی کوئری http://cdpn.io/fhjvk

این یکی واقعا قابل تحسین هست

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

شبیه سازی اکوسیستم زمین با جی کوئری http://codepen.io/stuffit/full/lJDqa

به درخت ها آب بدید تا میوه کنند و نگذارید زمین خشک بشه

لینک به ارسال
  • 4 هفته بعد...

طراحی موبایل واقعی با طعم HTML5 !

می خواهیم یک موبایل htc با ویژگی canvas و البته HTML5 معرفی کنیم. این موبایل برای ماکت و برای سایت های معرفی و فروش موبایل بسیار مناسب میباشد. موبایلی که انگار در پیش روی شماست و می توانید آن را به ۳۶۰ درجه مختلف بچرخانید و کاربران سایت خود را در حیرت فرو برید!

htc.png

سرچ باکس ضربان دار با CSS3 !

معمولا در وبسایت های مدرن و شیک، یک Search box جهت جستوجو در مطالب سایت قرار میدهند. ولی می توان به همین سرچ باکس، استایلی بخشید که کاربر را درخود جذب کند. این بار استایلی به سرچ باکس میدهیم که مثل نئون، درخشان و همچنین همراه با تنفس انسان، خاموش و روشن شود!

search-box.jpg

لینک به ارسال

طراحی مک‌بوک ایر متحرک، فقط با CSS !

اگر از آن دسته از افرادی باشید که یک وبسایت فروش محصولات اپل داید، مطمئنا این ابزار برای شما مناسب است. این ابزار یک ماکت مک بوک ایر را به صورت گرافیکی و زیبا نشان میدهد. ماکتی که به طور خودکار به همه طرف می چرخد و باز و بسته نیز میشود تا کاربر بتوانید به خوبی آن را تماشا کند.

CSS-Only-Macbook-Air.jpg

لینک به ارسال

طراحی پروفایل جذاب (بنفش)

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

این تنها چند خط css است که صفحه شما را دلربا میکند.

profile-b.jpg

لینک به ارسال

گالری عکس ۳ بعدی شبیه ویترین!

یک ویترین بسازید و در آن محصولات و عکس های خود را به نمایش بگذارید! با این ابزار که بر پایه‌ی css3 میباشد، میتوانید یک گالری سه بعدی بسازید و در هر وجه آن یک تصویر دلخواه قرار دهید. اگرهم فروشگاه اینترنتی دارید، برای شما سودمند است. چرا که میتوانید در هر وجه آن یک محصول تبلیغ کنید و در یک مکان ۶ تبلیغ قرار دهید (۱ تیر و ۶ نشان!!)

gallery.jpg

لینک به ارسال

چک‌باکستان را دوست داشتنی کنید!

در حالت عادی چک باکس یک تیک داخ کادر است که ممکن است ظاهر آن مورد پسند شما نباشد یا بخواهید آن را جذاب کنید. پس بهتر است که از این چت خط سی اس اس برای زیباسازی آن استفاده کنید.

چک‌باکسی متحرک که در هنگام فعال کردن، تیک سبز رنگ و هنگام غیرفعال کردن، ضربدر قرمز رنگ میشود.

checkbox-l1.jpg

در این ابزار از خاصیت transition استفاده شده است.

لینک به ارسال

با سی اس اس موبایل هوشمند بسازید!

این بار هم با سی اس اس شما را متعجب میکنیم! میخواهیم یک گوشی هوشمند بسازیم که شباهت بسیار زیادی به گوشی htc One X دارد! اگر سایت شما به صورت تخصصی درباره موبایل (بررسی و اخبار موبایل، ارائه بازی و نرم افزار موبایل …) میباشد، این ابزار برای شما کاربرد بهتری دارد.

smart-phone1.jpg

لینک به ارسال

ایجاد جعبه هشدار (Alert box)

گاهی اوقات مسئله ای در سایت رخ میدهید که باید همه کاربران از این مسئله مهم باخبر شوند؛ مثلا تغییر سرور و ایجاد مشکلات، تخفیف ویژه برای محصولات، تبریک و… که برای این کار راه های مختلفی برای سیستم های مختلف وجود دارند. اما روشی که معرفی میکنیم، آسان و آسان است، همچنین برای همه کاربران چشم‌گیر میباشد.

alertbox.jpg

لینک به ارسال

افزونه سر خط خبر

افزونه ای ساده برای نمایش مطالب خبری ( فید - آر اس اس - ... )‌ بر پایه گوگل ای پی آی ....

post-1230-0-52353700-1376508797_thumb.jp

لینک به ارسال

ساعت دیجیتالی ۳بعدی

شاید در برخی مکان‌ها (مخصوصا در مغازه‌های الکتریکی) ساعت‌های دیجیتالی بزرگی دیده باشید.

با این جی‌کوئری میتوانید یک ساعت دیجیتالی زیبا مثل ساعت‌های مغازه‌ها برای وبتان آماده کنید. ساعتی بسیار زیبا که با ساعت کامپیوتر کاربر هماهنگ میباشد.

clock.jpg

لینک به ارسال

برای هر فیلد آیکن اختصاصی تعیین کنید!

برای جاهای مختلفی از وبسایت، فیلد(هایی) مورد نیاز است. مثلا برای فرم تماس، فرم نظرات، جستوجو و… حال اگر بخواهید به این فیلدها آب و رنگ بدهید، بهتر است از این آموزش استفاده کنید.

در این آموزش شما توسط جی کوئری چگونگی نعیین آیکن برای هرفیلد را یاد میگیرید که البته آموزش آن بسیار آسان است و نیازی به آپلود عکس و دردسر ندارد! آیکن‌ها در سه حالت رنگی، پسوندی و پیشوندی هستند.

field.jpg

لینک به ارسال
  • 4 ماه بعد...

میشه یه سایت بذارید که فرمهای تماس با گرافیکی داشته باشه

ممنون میشم

http://www.sanwebe.com/2013/10/css-html-form-styles

لینک به ارسال
  • 4 هفته بعد...

سلام

میخواستم چطوری میتونم با جی کوئری یک اسکرول نرم واسه سایتم بسازم به طوری اسکرول از یک کلاس تا کلاس بعدی به صورت نرم حرکت کنه

لینک به ارسال

سلام

میخواستم چطوری میتونم با جی کوئری یک اسکرول نرم واسه سایتم بسازم به طوری اسکرول از یک کلاس تا کلاس بعدی به صورت نرم حرکت کنه

سلام بفرما این لینک رو برید :

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

ویرایش شده توسط Mekaeil Andisheh
لینک به ارسال

من هر کاری کردم نونستم بفهمم چطوری باید استفاده کرد کل صفحه رو زیرو رو کردم

توی سایت های خارجی هم کلی گشتم اما همشون فقط اسکرول نرم رو واسه لینک ها گذاشته بودند یعنی با کلیک روی اون کار میکرد و یا به بالا اسکرول میشد

من میخوام کل صفحه بدون اینکه بخوام روی چیزی کلیک کنم اسکرول نرم داشته باشه مثل اسکرول فایرفاکس .....

لینک به ارسال

این تاپیک برای سوال نیست

لطفا دوستان سوال را در بخش مربوطه مطرح کنند

لینک به ارسال
  • 4 هفته بعد...

همه نوع سایتی معرفی کردیم ولی نمونه وطنی جی کوئری رو فراموش نکنیم که به صورت کاملا فارسی و با دمو نمونه های زیبایی از جی کوئری رو ارائه میده:

http://www.ijquery.ir/

لینک به ارسال
  • 6 ماه بعد...

دکمه‌های اشتراک گذاری با استایلی متفاوت و زیبا

http://codepen.io/HugoGiraudel/pen/lDuBK

---------

ساخت صفحه شخصی (کارت ویزیت!)

http://codepen.io/nakome/pen/pgshr

--------

افکت‌های مختلف حالت hover که گاهی اوقات کاربرد دارند

http://codepen.io/Droldan/pen/knvxy

-------

نمایش توضیحات یک عکس/آبجکت به طرزی متفاوت و زیبا

http://davidwalsh.name/css-flip

-------

یه استایل جالب برای دکمه‌ها در حالت hover

http://codepen.io/Hornebom/pen/HfjDu

http://codepen.io/Hornebom/pen/zCfBi

-------

متحرکسازی border با svg

http://codepen.io/giorga8/pen/GFxoC

-------

طراحی ریسپانسیو منو

http://codepen.io/sutterlity/pen/LDJwr

------

طراحی منو با خط دنبال کننده

http://codepen.io/RavingAPD/pen/CLsmj

------

طراحی منویی متفاوت با آیکن

http://codepen.io/codeandcam/pen/LnlvD

------

عنوانشو نمیدونم چی بذارم! ولی توی اکثر سایتای مدرن این قابلیت دیده میشه :)

http://codepen.io/Ovoce/pen/jucIg

-------

متن آنلاین بنویسید با فرمت txt ذخیره کنید!

http://codepen.io/davidelrizzo/pen/cxsGb

-------

دکمه تنظیمات

http://codepen.io/georgealways/pen/qiyvb

لینک به ارسال
  • Morteza unpinned this موضوع

به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...