جهت ورود به تالار گفتمان سایت کلیک کنید


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

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

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

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

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

و اما آموزش :

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

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

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

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

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

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

نکات مهم : 

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

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

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

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

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

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

پخش اختصاصی

  • امتیاز شما به این مقاله ؟
    خیلی بدبدمعمولیخوبخیلی خوب (لطفا رای بدید)
  • جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

    2 پاسخ به “افکت پارالاکس جابجایی تگ مورد نظر با تغییر مکان ماوس”

    1. علی گفت:

      خیلی عالی بود با تشکر

    2. کاظمی گفت:

      سلام
      وای مثل همیشه فوق العاده
      پراوو

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *