پنهان کردن عناصر صفحه در php
اگر بخواهید این مطلب را متوجه شوید باید با 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 که یک مقدار ثابت بود ، متغیر خودمان را قرار دادیم. علامت های + هم برای پیوستن قسمت های مختلف مقدار در حالت رشته ای است.
آموزش سریع جاوا اسکریپت - دریافت ورودی از فرم 
آموزش سریع جاوا اسکریپت - دریافت ورودی 
آموزش سریع جاوا اسکریپت - شروع کد نویسی 
آموزش سریع جاوا اسکریپت - مفاهیم پایه 
آموزش سریع جاوا اسکریپت - اجرای کد ها 
آموزش سریع جاوا اسکریپت - مقدمه 
کد کاراکتر (char code) چیست؟ 
مرحله 1 بازی رمزگشایی 
بازی رمزگشایی 
آموزش مبهم کردن کد های جاوا اسکریپت 
مقدمه ای بر رمزگذاری و مبهم کردن کد 
انیمیشن در جی کوئری 
قالب ورود و عضویت در سایت به سبک ویندوز 10
قالب تماس با ما ریسپانسیو برای رزبلاگ
قالب تفریحی گرافیکی برای رزبلاگ
ایجاد خودکار لینک داخلی عناوین صفحه
انواع سیستم عامل و ماشین
تعریف سیستم عامل
قالب سایت ابر دانلود برای رزبلاگ
بنر تلگرام جذب اعضا full css
آموزش استفاده از افزونه جاوا اسکریپت wow
قالب حرفه ای گرافیکی برای رزبلاگ
اجرای انیمیشن css با حرکت اسکرول
آموزش ایجاد چرخش مداوم با css
کدَک تغییر پس زمینه ی سایت و وبلاگ
معرفی چند باگ معروف و پچ آن ها در php
کدَک نمایان و مخفی کردن شی
آموزش ساخت تصویر تصادفی امنیتی در php
آموزش C# قسمت پنجم | انواع عملگر ها
قالب واکنشگرای حرفه ای برای رزبلاگ 
تصویر سه ستاره - برای امتیاز دهی در سایت ها و وبلاگ ها
foreach در جاوا اسکریپت
کد کم کردن مشخصات لازم برای تماس با مای رزبلاگ
ابزار اسکن اطلاعات اعضای رزبلاگ
شيوه ي نمايش پيام مدير در بالای صفحه - با امکان معلوم کردن انواع حالات
شیوه ی بزرگنمايي تصوير با انيميشن زيبا + امکان اشتراک گذاری تصویر
نمایش آنلاین درصد سئوی سایت 
کدَک اسلایدر ساده ی پس زمینه
سه عنوان جدید EA در سه ماه اخیر