ظاهر شدن عناصر صفحه هنگام اسکرول

ظاهر شدن عناصر صفحه هنگام اسکرول

سلام خدمت همراهان همیشگی ماهنامه طراحی وب

یکی از پرطرفدار ترین افکت هایی که امروزه در صفحات وب پیاده میشه، ظاهر شدن عناصر به هنگام اسکرول صفحه هست. در این مقاله میخوام نحوه ی پیاده سازی این افکت ها در صفحه ی وب رو خدمتتون آموزش بدم.

کار بسیار بسیار ساده ای هست، کافیه یک css و یک js رو در صفحتون لود کنید و به هر عنصر یک کلاس خاص اختصاص بدید.

آماده اید تا یک پروژه ی کوچیک و باهم انجام بدیم؟

خوب ابتدا فایل های مورد نیاز رو از این لینک دانلود کنید.

در پوشه ای که دانلود کردید دو تا فایل وجود داره، animate.css و wow.js. این فایل رو همراه با پوشه های css و js در پوشه ی اصلی خودتون کپی کنید. ساختار ما به شکل زیر خواهد بود:

1

animate.css افکت های خاصی رو در عناصر بوجود میاره، wow.js عناصر رو پنهان میکنه تا زمانی که صفحه در ابتدا لود شد و یا اسکرول خورد با افکتی که animate.css به اونها میده ظاهر بشن.

 

خوب از html شروع میکنیم. یک صفحه ایجاد کنید و نام این صفحه رو index.html قرار بدید.

فایل animate.css رو در عنصر head و فایل wow.js رو انتهای صفحه فراخوانی کنید:

 

از کد زیر استفاده کردیم تا روی تمامی عناصر موجود در صفحه wow.js اعمال بشه:

 

تا اینجا شما ۸۰ درصد راه رو اومدید، برای تکمیل راهتون باید به عناصرتون کلاس های خاص اختصاص بدید. حالا یک باکس در نظر میگیریم که قراره با افکت در صفحه ظاهر بشه. چون ابتدای صفحه قرار داره بدون اسکرول با افکت نمایان میشه. اگر تعداد عناصر بیشتر باشه و مجبور باشیم با اسکرول اونهارو ببینیم، عناصر پنهان میشن و هنگامی که اسکرول به پایین حرکت کرد عناصر تک به تک با افکت ظاهر میشن.

باکسی که مد نظرمون هست رو به شکل زیر ایجاد میکنیم:

 

یک DIV کاملا ساده ، حالا با css اون رو تبدیل به یک باکس آبی رنگ میکنیم:

 

اگر خاطرتون باشه گفتم wow.js برای این منظور در نظر گرفته شده که عنصر رو پنهان کنه و با افکت اون رو نمایش بده پس کلاس wow رو به همه ی عناصر اختصاص بدید:

 

برا اعمال افکت شما میتونید یکی از افکت های animate.css رو به عنصر اختصاص بدید.

برای مشاهده لیست کامل افکت ها با دموی آنلاین به این لینک مراجعه کنید.

خوب با توجه به افکت هایی که دیدید، ما میخوایم باکسمون از سمت چپ به راست نمایان بشه پس از bounceInLeft استفاده میکنیم:

 

تا اینجا عنصر ما پنهان هست و زمانی که صفحه لود میشه با افکت bounceInLeft ظاهر میشه و اگر به اسکرول نیاز باشه با اسکرول صفحه ظاهر میشه.

علاوه بر این کلاس ها شما میتونید خصوصیاتی رو برای عنصرتون در نظر بگیرید، این خصوصیات شامل موارد زیر میشه:

data-wow-duration: این خاصیت مدت زمان اجرای افکت رو مشخص میکنه مثلا افکت عنصر طی ۰.۲ ثانیه اجرا بشه.

data-wow-delay: این خاصیت مدت زمان تاخیر در اجرای افکت رو مشخص میکنه، مثلا بعد از ۰.۵ ثانیه یا بعد از ۱ ثانیه افکت اجرا بشه.

data-wow-iteration: این خاصیت تعداد دفعات تکرار افکت رو مشخص میکنه، مثلا عنصر ۲ بار پنهان بشه و با افکت ظاهر بشه.

data-wow-offset : این خصوصیت رو با مثال خدمتتون توضیح میدم. فرض کنید این خصوصیت رو به عنصرتون اختصاص دادید؛ مرورگر شما ۹۰۰ پیکسل ارتفاع داره، برای این خصوصیت مقدار ۸۵۰ رو در نظر میگیرید، ۸۵۰ پیکسل از پایین مرورگر شما محاسبه میکنه تا بالا، ۵۰ پیکسل میمونه تا ارتفاع مرورگر شمارو پر کنه. عنصر نمایش داده نمیشه تا زمانی که اسکرول ۵۰ پیکسل به طرف پایین کشیده بشه یعنی ۵۰ پیکسل به سمت پایین طی کنه. بعد از این عنصر شما با افکت مورد نظر نمایش داده میشه.

پس این خاصیت هارو هم به باکسمون اضافه میکنیم:

 

حالا باکس ما در زمان لود صفحه با افکت نمایان میشه، هرچقدر تعداد باکس هارو بیشتر کنید با اسکرول صفحه زیبایی افکت ها بیشتر مشخص میشه.

میتونید پروژه ی کامل این آموزش رو در انتهای مطلب دانلود کنید و بررسی کنید.

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

موفق و پاینده باشید.

منتشر شده در شماره پنجم ماهنامه طراحی وب

دریافت فایل

منبع این نوشته

مطالب مرتبط

شما هم در بحث شرکت نمایید...

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