loading...

ابزارها قالب

ایجاد پس زمینه ی متحرک با استفاده از جی کوئری

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 2623 پنجشنبه 24 ارديبهشت 1394 نظرات (3)

اگر بخواهید این مطلب را متوجه شوید باید با css و jquery آشنایی داشته باشید.

هر کلمه ی جدیدی که می بنید در پایین توضیح داده شده است.

حتما شما هم تا به حال با صفحاتی که تصویر پس زمینه ی آن ها به نسبت حرکت اسکرول (scroll) ، حرکت می کند روبرو شده اید. این صفحات با یک رویداد از jquery به نام scroll کار می کنند. این رویداد هنگامی است که کاربر ، صفحه را به سمت بالا و پایین و یا چپ و راست می برد (یعنی اسکرول را حرکت می دهد). حال اگر ما با استفاده از این رویداد ، حالتی را ایجاد کنیم که همزمان با بالا و پایین رفتن صفحه ، پس زمینه ی ما نیز مقدار حرکت کند ، می تواند حالت زیبایی به صفحه ی ما بدهد. شاید درست متوجه نشده باشید: در حالتی که پس زمینه ی ما با استفاده از css در حالت fixed قرار داده شده است ، پس زمینه هیچ حرکتی نمی کند و همیشه در جالی خود ثابت است. و هنگامی هم که پس زمینه با استفاده از css در حالت scroll قرار داده شده است ، پس زمینه کاملا هم سرعت و هم زمان با حرکت اسکرول ، حرکت می کند. اما چیزی که ما می خواهیم در اصل یک حالت بین این دو حالت است. یعنی حرکتی نه به سرعت scroll و نه به ثابتی fixed. این حالت در زیبایی صفحه کمک زیادی می کند.

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

در بالا چند کلمه ای آوردم که شاید برای بعضی ها ناآشنا باشد. fixed و scroll در پس زمینه ی css: این دو کلمه در قسمتی از css به کار می رود که حالت پس زمینه نسبت به حرکات صفحه را مشخص می کند. در سی اس اس با استفاده از خاصیت background-attachment می توان حالت پس زمینه نسبت به صفحه را مشخص کرد.

برای آزمایش کد های خود از این لینک استفاده کنید

علامت // در کد ها نشان دهنده ی توضیحات است.

ابتدا استفاده از رویداد scroll در جی کوئری: توجه داشته باشید که این رویداد خود باید در رویداد ready صفحه قرار بگیرد تا کارایی صحیح را داشته باشد.

<<<code>>>

$(document).scroll( function() { // این قسمت مروبوط به رویداد اسکرول است

      .....

} );

$(document).ready( function() { // این قسمت مروبوط به رویداد آماده شدن صفحه است

      ..... // بهتر است رویداد اسکرول در اینجا قرار بگیرد

} );

<<</code>>>

نکته: فراموش نکنید که اجرا شدن کد های jquery با قرار گرفتن آن ها در تگ script و یا دیگر روش های درج کد جاوا اسکریپت امکان پذیر است.

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

ما قبل از این باید تصویر پس زمینه ی خودمان را در css و برروی تگ body ایجاد کرده باشیم:

<<<code>>>

background: url('http://up.toolstheme.ir/view/153214/url.jpg') no-repeat #000;

background-position: 50% 0;

<<</code>>>

در خط دوم این دو خاصیت ، ما از background-position که برابر backgroundPosition در جی کوئری است استفاده کرده ایم. در اینجا معلوم کردیم که تصویر از چپ و راست در مکان 50% (یعنی وسط) باشد و از جهت بالا و پایین در بالا ترین نقطه ی ممکن (یعنی 0) باشد. این مقادیر می توانند با px و دیگر متغیر های موجود نیز تعیین شوند.

و اما کد های جی کوئری: برای این کار ما باید به مرورگر بگوییم که هر وقت اسکرول حرکت کرد ، پس زمینه را به نسبت (درصد) مکان اسکرول ، تغییر مکان بده. پس یعنی ما با backgroundPosition کار داریم:

<<<code>>>

$(document).ready( function() {

   $(document).scroll( function() {

      var BGposition = scrollY * 100 / scrollMaxY;

      $('body').css( 'backgroundPosition' , '50% 20%' );

   } );

} );

<<</code>>>

قسمت قرمز رنگ: در جاوا اسکریپت دو متغیر به نام های scrollY و  scrollMaxY وجود دارد. همان طور که از اسمشان پیداست scrollY مکان عمودی اسکرول را بر می گرداند و با هر بار بالا و پایین رفتن در صفحه تغییر می کند. scrollMaxY حداکثر مقداری که اسکرول در حالت عمودی می تواند داشته باشد را بر می گرداند. این دو مقدار بر حسب پیکسل هستند.

نکته: این مقدار ها از بالا تا مکان اسکرول محاسبه می شوند.

قسمت آبی رنگ: در این قسمت ما از تابع css در جی کوئری استفاده کرده ایم که مخصوص تغییر خاصیت های css در المنت های (اشیاء) صفحه است. در آرگومان اول این تابع ما باید قسمتی که باید تغییر کند را وارد کنیم (backgroundPosition) و در آرگومان دوم مقداری که می خواهیم به این خاصیت نسبت داده شود را وارد می کنیم ( مثلا 20% 50% )

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

در آرگومان دوم css ما از مقداری ثابت استفاده کرده ایم و از متغیر BGposition هیچ بهره ای نبرده ایم. حال ما مقداری که در BGposition برحسب درصد به دست آورده ایم را در این کد می گنجانیم:

<<<code>>>

$(document).ready( function() {

   $(document).scroll( function() {

      var BGposition = scrollY * 100 / scrollMaxY;

      $('body').css( 'backgroundPosition' , '50% ' + BGposition + '%' );

   } );

} );

<<</code>>>

ما در کد بالا به جای 20 که یک مقدار ثابت بود ، متغیر خودمان را قرار دادیم. علامت های + هم برای پیوستن قسمت های مختلف مقدار در حالت رشته ای است.

خروجی ساز - کد ها را امتحان کنید

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط فاطمه در تاریخ 6 سال پیش و 23:28 دقیقه ارسال شده است

سلام و عرض خسته نباشید.
یه سایت در محیط ویژوال استدیو دارم طراحی میکنم که خیلی خیلی دوست دارم از این قابلیت تو سایتم استفاده کنم.
کدهای جی کوِیری رو داخل یه فایل با پسوند .js ریختم و لینکش رو به همراه فایل css بالای سایت گذاشتم ولی قفط عکس رو نمایش داد!
یه دنیا ممنون اگه بتونید راهنمایی کنید.
پاسخ : سلام
به نظر میاد با جی کوئری آشنایی نداشته باشید!
جی کوئری یک کتابخانه از جاوا اسکریپته که کلی تابع و امکان رو در اختیار طراح قرار میده. پس شما لازم دارید که فایل جاوا اسکریپت مربوط به کتابخانه ی جی کوئری رو هم توی صفحه لود کنید.
آدرس فایل جی کوئری در سایت ما http://www.toolstheme.ir/js/jquery.js
اون رو دانلود کنید و روی صفحه با تگ script استفاده کنید.

این نظر توسط رقــــیـــه یـــون در تاریخ 7 سال پیش و 12:55 دقیقه ارسال شده است

مشکلی نیست.
با توضیحات فهمیدم.
من گفتم خیلی دوست داشتم بدونم که با خوندن توضیحات فهمیدم و هیچ مشکلی نیست.

این نظر توسط رقــــیـــه یـــون در تاریخ 7 سال پیش و 12:32 دقیقه ارسال شده است

سلام.
قشنگ بود.
خیلی دوست داشتم بدونم چجوری میشه اینکار رو کرد
پاسخ : سلام
من توضیح کامل دادم. اگر مشکلی در قسمتی هست که شما متوجه نمیشید ، دقیق تر بگید تا بتونم کمک کنم.


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3196
  • آی پی امروز : 40
  • آی پی دیروز : 115
  • بازدید امروز : 319
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,932
  • بازدید ماه : 10,429
  • بازدید سال : 101,799
  • بازدید کلی : 1,788,234
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص