پلاگین jquery – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Wed, 20 Apr 2016 10:53:50 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 آموزش افکت های اسکرولی با پلاگین Animate Scroll Effect https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a7%d9%81%da%a9%d8%aa-%d9%87%d8%a7%db%8c-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84%db%8c-%d8%a8%d8%a7-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-animate-scroll-effect.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a7%d9%81%da%a9%d8%aa-%d9%87%d8%a7%db%8c-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84%db%8c-%d8%a8%d8%a7-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-animate-scroll-effect.html#comments Sun, 20 Mar 2016 17:08:20 +0000 http://www.xn--mgbguh09aqiwi.com/?p=16959 افکت اسکرولی چیست ؟

یکی از جدیدترین افکت هایی که بسیاری از وب سایت های فانتزی از آن استتفاده میکنند , پلاگین افکت اسکرولی می باشد .

شما با کمک این پلاگین میتوانید تعیین کنید که اسکرول وب سایت وقتی به باکس مورد نظر میرد , باکس شما با افکتی خاص و زیبا نمایان شود .

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

آموزش افکت های اسکرولی با پلاگین Animate Scroll Effect

و اما آموزش :

1 – در ابتدا شما نیاز به کتابخانه جی کوئری دارید که میتوانید از سایت رسمی جی کوئری به نشانی www.jquery.com , آخرین نسخه را دانلود نمایید .

2 – سپس باید آخرین نسخه پلاگین Animate Scroll Effect را ار وب سایت رسمی آن دانلود نمایید . برای دانلود کلیک کنید .

در فایل دانلودی بالا , 2 فایل وجود دارد ( یک css به نام animate.css و یک js به نام viewportchecker.js ) که با یک فایل jquery سه فایل می باشد که باید به وب سایت خود ضمیمه نمایید .

به صورت زیر :

<script src="آدرس فایل جی کوئری"></script>
<script src="آدرس فایل viewportchecker"></script>
<link rel="stylesheet" href="آدرس فایل animate.css">

3 – حال باید کد های زیر را در css سایت خود اضافه نمایید :

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}

4 – و در آخر کد های جی کوئری زیر را به وب سایت خود اضافه نمایید ( ترجیحا قبل از بسته شدن تگ </body> ) :

jQuery(document).ready(function() {
    jQuery('selector').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated vms',
        offset: 100
       });
});

نکته 1 : به جای selector در کد بالا , باید آی دی , کلاس یا انتخابگر دیگری از css را وارد نمایید . مثلا اگر میخواهید تمامی div های دارای این حالت بشوند , بنویسید (div) . یا مثلا اگر میخواهید فقط تگ هایی که کلاس vms دارند , این حالت را داشته باشند , بنویسید (vms.)

نکته 2 : به جای کلمه vms , باید یکی از کلمات زیر را وارد نمایید که هر کدام یک حالت افکت می باشد .

fadeIn : حال نمایش آهسته .
bounceInLeft : حرکت انیمیشنی از سمت چپ
bounceInRight : حرکت انیمیشنی از سمت راست 
bounceInUp : حرکت انیمیشنی از سمت پایین به بالا
fadeInDown : حرکت انیمیشنی آهسته از بالا به پایین 
fadeInUp : حرکت انیمیشنی آهسته از پایین به بالا 
lightSpeedIn : حرکت انیمیشنی سریع از راست 
flipInX : حالت انیمشنی کتابی

دموی پلاگین Animate Scroll Effect

پخش اختصاصی

آموزش و گرداوری : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a7%d9%81%da%a9%d8%aa-%d9%87%d8%a7%db%8c-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84%db%8c-%d8%a8%d8%a7-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-animate-scroll-effect.html/feed 2 دانلود پلاگین اسکرول بار حرفه ای جی کوئری + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html#comments Thu, 23 Jan 2014 10:48:11 +0000 http://xn--mgbguh09aqiwi.com/?p=991 حتما براتون پیش اومده که قسمتی از سایتتون دارای اسکرول باشد و میدونید که اسکرول بار های پیش فرض مرور گرها , بسیار ساده و قطعا کل دیزای سایت شمارو بهم زده و از بین میبرند .

پلاگین های زیادی در این باره در محیط وب قرار داده شده که متاسفانه خیلی از اونها خراب و تعداد کمی هم که سالم هستند اما به دلیل عدم آشنایی بعضی از وبمستران عزیز با Jquery , آموزش نصفه نیمه ای در مورد پلاگین بیان میکنند و قطعا به درد کاربر نمیخورد .

برای این ساعت از سایت اسکریپت دات کام , پلاگین بسیار حرفه ای , کامل و زیبایی رو در اختیار شما عزیزان قرار میدهم که از این پس نیازی به پلاگین های سایت های دیگر نداشته باشید .

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

برای این کار ابتدا شما نیاز به 1 فایل Css و 4 فایل Jquery دارید . من برای راحتی و زیبایی کار این 5 فایل رو در پوشه های مخصوص با موضوع خودشون قرار دادم . یعنی فایل Css در پوشه Css و 4 فایل Jquery رو در پوشه ی Jquery قرار دادم.

ابتدا این دو پوشه رو از اینجا دانلود کنید و سپس در روت سایت خود قرار دهید . (طبیعتا تمامی آدرس دهی ها به نسبت Root سایت انجام شده و اگر شما بخواهید در پوشه های دیگر استفاده کنید , باید آدرس های فایل رو تغییر دهید . البته پیشنهاد میشود این کار رو انجام ندهید )

حال نوبت آموزش می باشد …

در ابتدا شما باید در صفحه ویا صفحاتی که میخواهید این اسکرول بار رو استفاده کنید , این 5 فایل رو بهش بشناسونید .

برای این کار ابتدا در بین دو تگ <head> و <head/> , باید با کد زیر, Css رو بشناسونید .

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

حال نوبت شناسایی فایل های Jquery به صفحه میباشد .

در 2 تا مانده به آخرین خط صفحه ( یعنی قبل از دو تگ <html/> و <body/> ) , کد های زیر رو کپی کنید .

	<script src="jquery/jquery-1.7.2.min.js"></script>
	<script src="jquery/jquery-ui-1.8.21.custom.min.js"></script>
	<script src="jquery/jquery.mousewheel.min.js"></script>
	<script src="jquery/jquery.mCustomScrollbar.js"></script>
	<script>
		(function($){
			$(window).load(function(){
				$(".content").mCustomScrollbar({
					scrollButtons:{
						enable:false
					}
				});
			});
		})(jQuery);
	</script>

طبیعتا برای اعمال این پلاگین بر روی سایت خود , باید یک Div بسازید تا باکس ساخته شده رو با آی دی و یا کلاس , به این پلاگین متصل کنید .

برای این کار یک Div به عنوان نمونه با کلاس content بسازید . برای این کلاس حتما یک Height مشخص بدهید . این کار برای اینست که با زیاد کردن اطلاعات و نوشیته های داخل Div , از یک ارتفاعی به بعد , اسکرول  بار لحاظ و نمایش داده شود . چون اگر یک ارتفاع مشخص ندهید , به میزان اطلاعات داخل , Div هم کشیده میشود و اصلا اسکرول نمی اندازد .

نکته مهم : برای Div خود هر کلاس و یا آی دی که انتخاب میکنید , حتما باید نام آن را جایگزین نام فعلی $(“content.”) که در بالا نوشته شده است بکنید . بدیهی است اگر آی دی انتخاب کردید , باید

$("#content").mCustomScrollbar({

و اگر به مانند مثال بالا از کلاس استفاده کردید , باید

$(".content").mCustomScrollbar({

را جایگذین کنید .

آموزش های مربوط به دیزاین :

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

برای این کار , پس از نصب پلاگین , وارد فایل Css با آدرس زیر شوید :

css/jquery.mCustomScrollbar.css

این فایل رو با NotePad و یا DreamWeaver باز کنید . حال با توجه به اطلاعات زیر , دیزاین را تغییر دهید :

1 – فاصله از سمت راست Div = خط 3

2 – پهنا و ارتفاع خط کمرنگ و زمینه اسکرول بار = خط 29 و 30

2 – پهنا و ارتفاع خط ضخیم و اصلی اسکرول بار = خط 43 و 44

4 – شفافیت حالت معمولی و حالت Hover = خط 137 و 140

5 – تغییر رنگ ها = خطهای 143 و 147 و 151 و 156

توجه : 5 نکته ی بالا فقط مهمترین خصوصیات قسمت های Css این پلاگین میباشد . طبیعتا اگر با کدهای Css آشنایی کامل دارید , میتوانید تغییرات بسیار بیشتری در دیزاین بدهید .

پخش اختصاصی

آموزش : وحید مجیدی 

دانلود نمونه آماده این پلاگین , جهت آشنایی بیشتر

[sdm-download id=”997″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%d9%88%d9%84-%d8%a8%d8%a7%d8%b1-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c.html/feed 12