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

تمامی این توابع دارای افکت های css3 و Jquery میباشند که زیبایی دو چندانی به آن بخشیده .

با ما در ادامه مطلب همراه باشید .

در ابتدا باید فایل های این پلاگین را از اینجا دانلود نمایید .

در فایل دانلودی , یک فایل css و یک فایل js می باشد که باید با دو تگ link و script آنها را به وب سایت خود ضمیمه نمایید .

<script src="آدرس فایل"></script>
<link href="آدرس فایل" rel="stylesheet">

حال میتوانید از توابع زیر برای نمایش استفاده نمایید :

مدل ساده پیغام

swal("اسکریپت دات کام")

مدل ساده پیغام با توضیحات

swal("اسکریپت دات کام", "وحید مجیدی")

مدل حرفه ای پیغام با توضیحات و انیمیشن موفقیت آمیز بودن کار

swal("Good job!", "You clicked the button!", "success")

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

swal({
	title: "اسکریپت دات کام",
	text: "وحید مجیدی", 
    type: "warning",
	showCancelButton: true,
	confirmButtonColor: "#DD6B55",
	confirmButtonText: "بله",
	cancelButtonText: "خیر",   
	closeOnConfirm: false,   
	closeOnCancel: false
	}, 
function(isConfirm){
	if (isConfirm){
		swal(
			"موفقیت آمیز", 
			"موفقیت آمیز",
			"success");
		} else {     
		swal("ناموفق",
			"ناموفق", 
			"error");   
		}
	});

مدل ساده پیغام با توضیحات و عکس دلخواه

swal({ 
	title: "اسکریپت دات کام",
	text: "وحید مجیدی",
	imageUrl: "images/vms.jpg"  // آدرس عکس اینجا وارد شود
});

مدل پیغام ساده با توضیحات و اجازه وارد کردن تگ های اچ تی ام ال در آن

swal({
	title: "<h1>اسکریپت دات کام</h1>",
	text: "وحید <span style="color:red">مجیدی<span> صدر",
	html: true
});

مدل پیغام ساده با توضیحات و بسته شدن اتوماتیک بعد دو ثانیه

swal({
	title:"اسکریپت دات کام",
	text: "صفحه به صورت خودکار بسته میشود",   
	timer: 2000,  
    showConfirmButton: false
});

مدل پرامت یا همان سوال پرسیدن از کاربر

swal({
	title: "اسکریپت دات کام",
	text: "وحید مجیدی",
	type: "input",
	showCancelButton: true,
	closeOnConfirm: false,
	animation: "slide-from-top",
	inputPlaceholder: "در اینجا وارد نمایید" },
function(inputValue){
	if (inputValue === false) return false;
	if (inputValue === "") {
		swal.showInputError("حتما باید وارد شود");
		return false
	}
	swal("Nice!", "شما نوشته اید : " + inputValue); });

توجه : توابع بالا به محض باز شدن سایت باز میشوند . طبیعتا باید آنها را در رویدادهای جی کوئری قرار دهید . مثلا اگر میخواهید بعد از کلیک نمایش داده شود :

$(document).ready(function(){
    $("button#vms").click(function(){
        یکی از توابع بالا در اینجا قرار بگیرد
    });
});

نکته : در تمام کد های بالا , نوشته های فارسی را میتوانید با توجه دلخواه خود تغییر نمایید .

برای مشاهده بقیه پارامتر ها به این لینک مراجعه فرمایید .

پخش اختصاصی

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

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

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

نحوه ی استفاده از این پلاگین بسیار راحت میباشد .

ابتدا باید دو فایل Jquery مربوطه را از این لینک دانلود نمایید و با استفاده از تگ script به وب سایت خود اضافه نمایید .

حال باید کد جی کوئری زیر را در وب سایت خود وارد نمایید ( ترجیحا در انتهای وب سایت )

$(document).ready(function(e) {
    $(".vms").faceCursor({
	perspective:"6rem"
    });
});

توجه : در کد بالا میتوانید به جای مقدار 6 , عددی کمتر و یا بیشتر وارد نمایید . ( این عدد مشخص کننده مقدار حالت سه بعدی می باشد )

نکته بسیار مهم : در کد بالا فرض بر این قرار داده شده که اشیایی که میخواهید به حرکت در بیایند , دارای کلاس vms میباشند . طبیعتا میتوانید به جای آن , هر انتخابگر دیگری از css را وارد نمایید . مثلا آی دی test که میشود test# و یا …

دموی پلاگین

دانلود فایل آماده دموی پلاگین

پخش اختصاصی

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

همان طور که میدانید , یک رمز قوی شامل فاکتور هایی از جمله حروف بزرگ , کارکترهای ویژه , عدد و تعداد رشته ی بالا می باشد که تمامی این موارد در این کد لحاظ شده .

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

در ابتدا شما نیاز به یک input یا اصطلاحا همان TextBox دارید و همچنین یک تگ خالی دکه در کنار این TextBox قرار میگیرد تا نتیجه سنجش در آن نمایان شود :

<input type="password" id="vms_pass">
<span id="resultVms"></span>

حال نوبت درج کد های جی کوئری مربوطه می باشد …

نکته : کاملا بدیهی است که شما باید دارای فایل کتابخانه Jquery باشید که میتوانید به راحتی از وب سایت www.jquery.com به رایگان دانلود نموده و به سایت خود ضمیمه نمایید .

بعد از ضمیمه نمودن فایل جی کوئری , میبایست کد های زیر را در قالب وب سایت خود کپی نمایید :

$('#vms_pass').keyup(function(e) {
     var strong_vms = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var medium_vms = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enough_vms = new RegExp("(?=.{6,}).*", "g");
     if (false == enough_vms.test($(this).val())) {
             $('#resultVms').html('بسیار ضعیف');
     } else if (strong_vms.test($(this).val())) {
             $('#resultVms').className = 'ok';
             $('#resultVms').html('قوی !');
     } else if (medium_vms.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#resultVms').html('متوسط !');
     } else {
             $('#resultVms').className = 'error';
             $('#resultVms').html('ضعیف !');
     }
     return true;
});

دموی آماده کد های بالا

پخش اختصاصی

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

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

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

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

و اما آموزش :

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

پخش اختصاصی

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

اگر وب سایت awwwards.com که مخصوص وب سایت های جهانی می باشد که از نظر طراحی دارای مقام هستند را نگاهی بیاندازیم , این افکت را به وفور پیدا خواهیم کرد .

افکتی که باعث میشود زمانی که کاربر ماوس را به حرکت در می آورد , یک یا چند نوشته , عکس یا … به صورت مخالف با آن حرکت میکنند که حالت زیبا و کاربر پسندی را ایجاد میکند .

و اما آموزش :

شما میتوانید یک یا چند تگ را با سرعت های مختلف دارای این افکت بکنید …

ابتدا کافیست به تگ یا تگ های مورد نظر خاصیت ID داده و امی برای آن انتخاب کنید :

به عنوان مثال :

<h1 id="vms1">Vahid Majidi Sadr</h1>
<img id="vms2" src="test.jpg">

سپس کد زیر ار به فایل css اضافه نموده :

body{
	overflow-x:hidden;
}
.center_vms{
	text-align:center;	
}

حال باید کد جی کوئری زیر را در قالب خود اضافه نمایید :

نکته مهم : کاملا واضح هست که برای استفاده و اجرای کد های جی کوئری , نیازمند کتابخانه Jquery میباشید که میتوانید آخرین نسخه آن را از وب سایت رسمی آن به نشانی www.Jquery.com دانلود نمایید .

$(document).ready(function () {
    $('body').mousemove(function (e) {
        parallax_vms(e, document.getElementById('vms1'), 5);
        parallax_vms(e, document.getElementById('vms2'), 3);
    });
});
function parallax_vms(e, target, layer) {
    var layer_all = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_all;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_all;
    $(target).offset({ top: y ,left : x });
};

نکات مهم : 

1 – در خط های 6 و 7 کد های بالا دو تابع parallax_vms تعریف شده است که برای دو تگ در نظرگرفته شده h1 و img با آی دی های vms1 و vms2 میباشد که شما میتوانید با حذف یا اضافه کردن آن ها , تعداد پارالاکس ها رو بیشتر یا کمتر نمایید .

2 – در همان خط 6 و 7 , دو آرگومان آخر که در بالا عدد های 5 و 3 میباشد , به معنی سرعت حرکت میباشند که میتوانید با تغییر آن , سرعت حرکت را کمتر یا بیشتر نمایید .

3 – در خط 5 کد های بالا ( کلمه body ) به معنی تگی هست که کاربر روی آن ماوس را حرکت میدهد و حرکات انجام میشود . طبیعتا body به معنی کل وب سایت میباشد . مثلا اگر میخواهید با حرکت ماوس بر روی یک تگ یا آی دی یا کلاس خاصی , این حرکات اتفاق بیافتد , میتوانید به جای کلمه body , انتخابگر مورد نظر خود را وارد نمایید . مثلا header#

4 – 3 نکته بالا , کلیات این اسکریپت میباشد . کاملا بدیهی است که شما میتوانید با تغییر دیگر خط ها ( به شرط آشنایی با جاوا اسکریپت و جی کوئری ) تغییرات اساسی خود را اعمال نمایید .

دموی آنلاین افکت

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

پخش اختصاصی

پلاگینی بسیار حرفه ای که دارای افکت های سه بعدی و دو بعدی می باشد . این پلاگین به صورت html5 و css3 میباشد و دارای بیش از 9 افکت منحصر به فرد می باشد .

ویژگی پلاگین Bee3D Slider : 

به صورت html5 و css3

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

دارای 9 افکت حرفه ای سه یعدی

قابلیت پشتیبانی Ajax

دارای افکت های پارالاکسی

دارای قابلیت تغییر با Mouse Wheel , Key Arrow و AutoPlay Loop

استفاده از Sass Css

بسیار کم حجم و دارای کد نویسی ساده

و …

دموی پلاگین

آموزش کامل پلاگین

دانلود پلاگین جی کوئری اسلایدر فوق حرفه ای Bee3D Slider نسخه 2

پخش اختصاصی

گرداوری : وحید مجیدی

پلاگینی بسیار کاربردی جهت درج یک تایمر یا شمارش معکوس در وب سایت . طبیعتا نیازی به توضیح زیادی در مورد این پلاگین نیست . کاربرد این پلاگین میتواند در زمان آغاز کار یک وب سایت و یا شمارش معکوس یک آغاز یک مسابقه و … باشد .

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

دموی پلاگین

دانلود پلاگین جی کوئری شمارش معکوس در 8 استایل

پخش اختصاصی

گرداوری :‌ وحید مجیدی

از قابلیت دیگر این اسکریپت می توان به نمایش نظراتی و لایک مطالبی که در اینستاگرام قرار داده شده است نیز اشاره کرد.

این پلاگین به صورت ریسپانسیو و دارای 3 رنگ میباشد که هم اکنون میتوانید جدیدترین نسخه آن را که 4.1 می باشد از اسکریپت دات کام دانلود نمایید .

جهت آموزش به فایل pdf موجود در فایل دانلود شده مراجعه فرمایید .

دموی پلاگین

دانلود پلاگین جی کوئری نمایش گالری تصاویر اینستاگرام InstaMax نسخه 4.1

این پلاگین ها باعث می شوند فقط عکس هایی بارگذاری شوند که کاربر در حال نمایش آنها هستند .

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

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

پایه طراحی این قالب بر اساس Bootstrap و طبیعتا ریسپانسیو می باشد . ضمنا این قالب دارای 3 نوع Effect برای Lazy Load میباشد .

دموی قالب و پلاگین

دانلود قالب و پلاگین جی کوئری به صورت LazyLoad با 3 Effect

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

 1 – برای این کار ابتدا باید باید آخرین نسخه کتابخانه jquery را از اینجا دانلود نموده و به سایت خود اضافه نمایید .

برای لینک کردن یک فایل جی کوئری به سایت , میبایست از کد زیر در داخل تگ head استفاده نموده :

<script src="آدرس فایل جی کوئری" type="text/javascript" language="javascript"></script>

2 – حال باید کد زیر را در قالب سایت خود کپی کنید . ( ترجیحا قبل از بسته شدن تگ <body/> )

<script type="text/javascript">
$(window).load(function(){  
      $("#vmsLoading,#vmsLoadingBack").fadeOut();  
})  
</script>

3 – حالا باید کد های زیر را در html و css خود قرار دهید :

3-1 : این کد باید در html شما و حتما بعد از باز شدن تگ <body> قرار گیرد .

<div id="vmsLoadingBack">
    <div id="vmsLoading">
        <h3>در حال بارگذاری </h3>
        <h4>لطفا صبر کنید ...</h4>
    </div>
</div>

3-2 : این کد هم باید در css خود قرار دهید .

#vmsLoadingBack{
	position:fixed;
	background-color:rgba(0,0,0,0.8);
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	width:100%;
	height:100%;
        z-index:1001;   
}
#vmsLoading {  
	position:absolute;  
	width:300px; 
	height:auto; 
	top:30px;  
	left:50%;  
	margin-left:-150px;  
	text-align:center;  
	padding:10px; 
	box-sizing:border-box;
	background-color:#fff;
	border-radius:3px;
	direction:rtl;
	font-family:tahoma;
	font-size:13px;
        z-index:1002;
}

نکته مهم  1 : اگر میخواهید این عمل برای تمامی صفحات سایت انجام شود , طبیعتا باید در تمامی صفحات کپی نمایید یا مثلا اگر از وردپرس استفاده میکنید کار شما آسان تر میشود و فقط کافیست در فایل footer.php قالب خود کپی نمایید تا در تمامی صفحات انجام شود .

نکته مهم  2 : در داخل div با آی دی vmsLoading شما میتوانید از تگ های دیگری استفاده نمایید . یعنی مثلا به جای h3 و h4 هایی که در حال حاضر قرار دارد , از یک عکس استفاده نمایید تا کاربر قبل از بارگذاری کامل سایت , یک عکس مشاهده نماید . ضمنا میتوانید برای داشتن تصاویر متناسب این کار به این پست مراجعه فرمایید .

دموی آماده آموزش

دانلود فایل آماده آموزش

پخش اختصاصی

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