پنهان کردن عناصر صفحه در php
حتما تا به حال با صفحاتی مواجه شده اید که وقتی به قسمتی از آن ها می رسید ، چیزی در آن جا نمایش داده می شود. حالا این نمایش هم می تواند به صورت ساده باشد ، هم با انیمیشن خاصی از css. من در این مطلب می خواهم به شما طرز کار این صفحات را بگویم و بنویسم که چگونه می توانید به سادگی و بدون استفاده از هیچ گونه افزونه ای از جاوا اسکریپت این امکان را در سایت خود ایجاد کنید. برای این که بهتر متوجه منظور من از این نوع نمایش هنگام رسیدن اسکرول صفحه شوید ، لینک زیر را ببینید. این لینک ، آدرس یک افزونه ی جاوا اسکریپت است که امکان ایجاد انیمیشن های مختلف را ، هنگامی که اسکرول صفحه به مکان شی ما می رسد ، ایجاد می کند. در آینده طرز استفاده از این افزونه را نیز آموزش خواهم داد. اما امروز می خواهم فقط با استفاده از jquery ، javascript و css این امکان را یاد بدهم.
اگر این نمونه را ببینید منظور من را به خوبی می فهمید. خب! شروع می کنیم. اول یک کد html را می نویسیم.
برای دیدن خروجی کد های خود می توانید از این ابزار استفاده کنید
کد های html
<<<code>>>
<div data-animation="aCssClassName" data-timeout="400" class="showOnScroll">
محتوایی که می خواهید نمایش داده شود ...
</div>
<<</code>>>
در بالا من از تگ div استفاده کرده ام. می توانید از هر تگ دیگری هم استفاده کنید. فقط نکته این است که باید class برابر با showOnScroll یا هر نام اختیاری دیگری که می خواهید باشد.
قسمت قرمز رنگ ، نام کلسی است که انیمیشنی برای آن مشخص شده است. برای به دست آوردن اطلاعات بیشتر در مورد انیمیشن ها در css این مطلب را مطالعه کنید.
قسمت آبی رنگ ، مشخص کننده ی زمانی است که باید طول بکشد تا انیمیشن شروع به اجرا شدن بکند. (بر حسب میلی ثانیه)
قسمت سبز رنگ ، این قسمت نمایانگر تمام اشایی است که باید بعد از رسیدن اسکرول به آن ها نمایش داده شوند.
کد های جاوا اسکریپت و جی کوئری
حتما ما برای این که بتوانیم انیمیشن ها را در زمان رسیدن صفحه به آن ها اجرا کنیم ، نیاز به جاوا اسکریپت و جی کوئری داریم.
<<<code>>>
var $window = $(window) ,
winHeighPadded = $window.height() * 1.1; // تعریف متغیر های اولیه
$window.on('scroll', revealOnScroll); // مشخص کردن رویداد
function revealOnScroll() // تابعی که هنگام حرکت اسکرول اجرا می شود
{
var scrolled = $window.scrollTop()
$(".showOnScroll:not(.animated)").each(function () {
var $this = $(this) ,
offsetTop = $this.offset().top;
if (scrolled + winHeightPadded > offsetTop) {
if ($this.data('timeout')) { // آیا data-timeout هست
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
<<</code>>>
برای به دست آوردن اطلاعاتی در مورد رویداد ها در جاوا اسکریپت این مطلب را مطالعه کنید. رویداد های جاوا اسکریپت و جی کوئری تماما یکی هستند و فقط در طرز استفاده با هم متفاوت اند.
در قسمت قرمز رنگ ، مشخص می شود که روی یک شی فقط یک بار این اعمال انجام شود.
در قسمت آبی رنگ ، بررسی می شود که آیا صفحه به شی مورد نظر رسیده است یا نه.
متد data در جی کوئری
با استفاده از این متد می توان ، صفت های اختیاری ای که دوست دارید در تگ خود داشته باشید را دریافت کنید. این صفت ها باید با data- شروع شوند. مثل data-animation و data-timeout
با استفاده از متد data که بعد از شی جی کوئری می آید می توان به این شکل صفتی را دریافت کرد:
<<<code>>>
$('anElement').data( 'timeout' ); // get data-timeout attribute
<<</code>>>
قسمت قرمز رنگ مقداری اختیاری است که می توانید در صفت شی مورد نظر مشخص کنید.
با وارد کردن کد های بالا در صفحه ، هنگامی که اسکرول صفحه توسط کاربر پایین بیاید و به شی مورد نظر برسد ، نام یک کلاس Css (مقدار صفت data-animation) به همراه نام کلاس animated به شی اضافه می شود. این کلاس باعث اجرای انیمیشنی روی شی می شود. همچنین این کار می تواند با وقفه صورت گیرد. این وقفه با مقدار data-timeout قابل تعیین است.
اگر سوالی در مورد این موضوع دارید در بخش نظرات بپرسید. حداکثر بعد از 12ساعت جواب میدم.
امیدوارم این مطلب به دردتون خورده باشه. 
آموزش سریع جاوا اسکریپت - دریافت ورودی از فرم 
آموزش سریع جاوا اسکریپت - دریافت ورودی 
آموزش سریع جاوا اسکریپت - شروع کد نویسی 
آموزش سریع جاوا اسکریپت - مفاهیم پایه 
آموزش سریع جاوا اسکریپت - اجرای کد ها 
آموزش سریع جاوا اسکریپت - مقدمه 
کد کاراکتر (char code) چیست؟ 
مرحله 1 بازی رمزگشایی 
بازی رمزگشایی 
آموزش مبهم کردن کد های جاوا اسکریپت 
مقدمه ای بر رمزگذاری و مبهم کردن کد 
انیمیشن در جی کوئری 
قالب ورود و عضویت در سایت به سبک ویندوز 10
قالب تماس با ما ریسپانسیو برای رزبلاگ
قالب تفریحی گرافیکی برای رزبلاگ
ایجاد خودکار لینک داخلی عناوین صفحه
انواع سیستم عامل و ماشین
تعریف سیستم عامل
قالب سایت ابر دانلود برای رزبلاگ
بنر تلگرام جذب اعضا full css
آموزش استفاده از افزونه جاوا اسکریپت wow
قالب حرفه ای گرافیکی برای رزبلاگ
آموزش ایجاد چرخش مداوم با css
کدَک تغییر پس زمینه ی سایت و وبلاگ
معرفی چند باگ معروف و پچ آن ها در php
کدَک نمایان و مخفی کردن شی
آموزش ساخت تصویر تصادفی امنیتی در php
آموزش C# قسمت پنجم | انواع عملگر ها
قالب واکنشگرای حرفه ای برای رزبلاگ 
ابزار تغییر اسکرول بار صفحه به شکل دلخواه
قالب 4 برای رزبلاگ - طرح هندزفری 
کدَک اسلایدر ساده ی پس زمینه
نمایش آخرین نظرات رزبلاگ به صورت رایگان
نمایش آنلاین درصد سئوی سایت 
توابع اسلاید در جی کوئری
قالب فلت و واکنش گرای سبزینه برای رزبلاگ
شيوه ي نظرسنجي - طرح گوگل
منوی کاربری رزبلاگ - طرح گوگل
قالب سه ستونه رزبلاگ طرح بازی های کامپیوتری