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

درود دوستان ؛ همیشه دوست داشتم یک کتابخانه جذاب برای راحتی کارم کدنویسی کنم و بالاخره انجامش دادم . ?

موضوع چیه ؟

روز جمعه بود و تعطیلی همه چیز ??

به دنبال موضوعی برای فعالیت بودم کمی گذشت ، ناگهان به سایتی بر خوردم که داخلش از موشن های جذابی استفاده شده بود. با یک inspect متوجه شدم از کتابخانه AOS استفاده شده . قبلا زیاد با این کتابخانه دست و پنجه نرم کرده بودم و به فکر این بودم که چرا خودم چیزی مانند این کتابخانه طراحی نکن ؟!

و شروع به کدنویسی کردم . ??

پیش نمایش کد :

برای مشاهده کد و پروژه اینجا کلیک کنید .

کدنویسی :

نکته 1: پروژه زیر در حال توسعه است و بر روی بستر گیت هاب قرار دارد ؛ می توانید برای دسترسی به آن ،

اینجا کلیک کنید .

با کد های html شروع به کار می کنیم . ?

ابتدا یک section برای هر باکس ، متن یا هر محتوای دیگری تعریف می کنیم .

<div class=&quotbefore_load&quot data-arm=&quotmodel-top&quot data-time=&quot1.5&quot>
<span>This is a Test</span>
</div>

داخل section باکس ها را مشاهده می کنیم که والد هر باکس کلاسی با محتوای before_load دارد .

در ادامه دو data Attribute را مشاهده می کنید .

داخل data Attribute اول : مدل یا حالتی که دوست داریم آن را نمایش بدهیم قرار می گیرد؛ به این صورت که بعد از لغت model با یک خط تیره حالت مورد نظر را می نویسیم .

نکته 2 : arm مخفف اسم و فامیلی بنده هست.

دومین data Attribute ، زمان است : همان زمانی که می خواهیم طول بکشد تا باکس ، متن یا هر محتوای دیگری در صفحه هنگام اسکرول یا اجرا انتقال پیدا کند .

نکته 3 : زمان بر حسب ثانیه است .!

کارمان در اینجا تمام است به سمت کد های css می رویم . ?

ابتدا یکسری کلاس های کلی برای نمایش باکس ها که وابسته به کار شما ، می تواند تغییر کند .

حال نوبت به استایل دهی با data Attribute می رسد . ?

همانطور که مشاهده می کنید ابتدا data Attribute مورد نظر را می نویسیم و بعد استایل هایی که قبل از رسیدن اسکرول به آن باکس مورد نظر می خواهیم داشته باشیم را برایش می نویسیم .

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

در اصل ما ابتدا باکس مورد نظرمان را در یک جای صفحه قرار میدهم و می گوییم با اسکرول با کلاس model-top به جای اصلی خود بازگردد.

نکته 4 : حتماً حتماً به این مورد توجه داشته باشید کلاسی که می خواهید بنویسید باید با آن data مورد نظر یکی باشد .

نکته 5 : بنده تا به الان 10 حالت را کدنویسی کرده ام ، که عبارت اند از :

• top ==> data-arm="model-top";
• right ==> data-arm="model-right";
• bottom ==> data-arm="model-bottom";
• left ==> data-arm="model-left";
• zoom in ==> data-arm="model-zoom-in";
• zoom out ==> data-arm="model-zoom-out";
• rotate right ==> data-arm="model-rotate-right";
• rotate bottom right ==> data-arm="model-rotate-bottom-right";
• rotate left ==> data-arm="model-rotate-left";
• rotate bottom left ==> data-arm="model-rotate-bottom-left";

در این قسمت نیز کار تمام است .

حال نوبت به قسمت آخر یعنی کد های javascript می رسد .

هنگام لود وبسایت

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

پس باید در ابتدا کد از رویداد onload استفاده و یک فانکشن به آن پاس دهیم تا به محض اجرای کامل صفحه فانکشن مورد نظر ما اجرا شود .

قبل از این امر باید باکس های دارای کلاس arm را انتخاب کرده و در هنگام لود آن ها را با حلقه for از هم تفکیک نمود و مدیریت کرد .

let arm = document.querySelectorAll('.arm');

نکته 6: حلقه باید به اندازه تعداد دفعات تکرار کلاس arm تکرار شود ، یا بهتر است بگویم به تعداد هر تگ (باکس) باید تکرار شود .

پس در نتیجه اینگونه می نویسیم ?

for (let index = 0; index < arm.length; index++) {
// get data Attribute
let data_time = arm[index].getAttribute('data-time');
let data_model = arm[index].getAttribute('data-arm');
// condition boxs
let condition = (arm[index].offsetTop);
if (window.innerHeight > condition) {
// add class
arm[index].classList.add(data_model);
// add style transition Duration
arm[index].style.transitionDuration = data_time + &quots&quot
}
}

بعد از آن باید data Attribute ، زمان و نوع را دریافت کرده و در متغیری نگه داری کنیم .

نکته : data Attribute نوع یا همان data-arm و data Attribute زمان یا همان data-time کمی پایین تر در داخل شرط استفاده شده است؛ که اولی دقیقا همان کلاسی است که در داخل کدهای css تعریف کرده ایم.

کمی بالاتر تذکر دادم که این کلاس حتماً با data Attribute خود یکی باشد . این کلاس را به تگی (باکسی) که می خواهیم موشن دار شود Add می کنیم تا آن حالت اجرا شود ؛ و در data Attribute دوم یعنی زمان ، دقیقا همان عددی است که داخل data-time نوشته شده و آن را به علاوه ی واحد مورد نظر می کنیم .

حال باید یک متغیر دیگر تعریف کنیم که وضعیت یا موقعیت آن تگ یا باکس مورد نظر که در حلقه است را بیابیم . ?

let condition = (arm[index].offsetTop);

و پس از آن یک شرط تعریف کنیم که آیا موقعیت مکانی باکس از سمت بالای آن کمتر از ارتفاع مانیتور کاربر است یا خیر ؟

if (window.innerHeight > condition)

توضیحات :
window.innerHeight {
ارتفاع مانیتور یا تب فعال شما را برمی گرداند.
ویژگی innerHeight فقط خواندنی است.
}

برای مثال :

موقعیت یک تگ (باکس) 128 در مکان فعلی خودش است و مانیتور شما مثلا 500px ارتفاع دارد خب در نتیجه پاسخ مثبت می شود .

اگر پاسخ true باشد ، که به راحتی در زمان لود وبسایت به آن تگ که کلاس arm داده ایم ، کلاس مورد نظری را که از data گرفته ایم نیز اضافه می شود و آن تگ یا تگ ها را به زیبایی نمایش می دهیم .

درغیر این صورت کاربر باید اسکرول کرده و به سمت پایین رود تا باکس را مشاهده کنده که در ادامه خواهم گفت. ??

هنگام اسکرول کاربر

ابتدا باید ویژگی onscroll را صدا زد و یک فانکشن به آن پس داد تا بتوانیم با هر تغییر وضعیت و اسکرول کاربر موقعیت تگ هایی (باکس هایی ) که کلاس arm دارد را متوجه شویم .

در داخل این فانکشن باید مثل زمان لود با حلقه ایی ساده ، تک تک تگ های داری کلاس arm را یافت ؛ بعد از آن نیز همانطور که گفتم باید با data Attribute ، زمان و نحوه نمایش را گرفته و داخل متغیر ذخیره کرد .

علاوه بر آنها باید موقعیت مکانی تگ ها را نیز داشته باشیم تا با اسکرول صفحه بتوان آن ها را نمایش داد . ?

let condition = (arm[index].offsetTop + arm[index].offsetHeight / 2);

• ویژگی offsetTop موقعیت بالا (بر حسب پیکسل) را نسبت به والد برمی گرداند.
• ویژگی offsetHeight ارتفاع قابل مشاهده یک عنصر (بر حسب پیکسل)، از جمله padding، border و نوار اسکرول را برمی‌گرداند اما margin را بر نمی گرداند .

بد نیست که کمی درباره این خط صحبت کنیم .
ما با این کار می توانیم نقطه وسط تگ یا باکس خود را بیابیم و در ادامه بگوییم تا زمانی که به آن نقطه رسید باکس را به ما نمایش دهد

در پایان نیاز به یک شرط داریم تا بتوانیم بگویم زمانی که کاربر با اسکرول در قسمت عمودی به موقعیت مکانی آن تگ (باکس) رسید آن را نمایش دهد .

// show content
if (window.pageYOffset + window.innerHeight >= condition) {
// add class
arm[index].classList.add(data_model);
// add style transition Duration
arm[index].style.transitionDuration = data_time + &quots&quot
} else {
// remove class
arm[index].classList.remove(data_model);
// add style transition Duration
arm[index].style.transitionDuration = data_time + &quots&quot
}

توضیحات :
pageYOffset {
این ویژگی وضعیت اسکرول در محور عمودی را بر می گرداند .
برابر با ویژگی scrollY است.
ویژگی pageYOffset فقط خواندنی است.
}
window.innerHeight {
ارتفاع مانیتور یا تب فعال شما را برمی گرداند.
ویژگی innerHeight فقط خواندنی است.
}

در قطعه کد بالا و در قسمت اول شرط وضعیت اسکرول در محور عمودی را بر می گرداند.
و در قسمت دوم شرط condition یعنی همان متغیر که موقعیت وسط تگ ها (باکس ها) را در روی صفحه بر می گرداند.
حال می گویم اگر شرط برقرار بود، آن ها را نمایش بده و کلاس data_model را به کلاس های باکس مورد نظر اضافه کن ؛ اما در غیر اینصورت (else) کلاس data_model را از کلاس های باکس ما حدف کن .

لازم به ذکر است که مجدد بگویم : transitionDuration برای زمان انتقال باکس ها است .

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

و در آخر سپاسگزارم که تا به اینجا همراه من بوده اید . ??

اگر این نوع مطالب را دوست دارید خوشحال می شوم که افتخار داشته باشم که شما من را دنبال کنید .??

اگر دوست داری با من ارتباط بگیری :?

?لینکدین : https://www.linkedin.com/in/alireza-moghilan-673a55263

?گیت هاب : https://github.com/alireza-moghilan

?اینستاگرام :

https://instagram.com/moghilan_web?utm_source=qr&igshid=MzNlNGNkZWQ4Mg%3D%3D

?کارلنسرم : https://www.karlancer.com/review/g84202731