افکت پارالاکس جابجایی تگ مورد نظر با تغییر مکان ماوس

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

اگر وب سایت 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 نکته بالا , کلیات این اسکریپت میباشد . کاملا بدیهی است که شما میتوانید با تغییر دیگر خط ها ( به شرط آشنایی با جاوا اسکریپت و جی کوئری ) تغییرات اساسی خود را اعمال نمایید .

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

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

پخش اختصاصی