کدنویسی و طراحی با لبخند

بخندید و برنامه نویسی یاد بگیرید!

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

هدف ما اینست که سهم هر چند کوچک در آموزش طراحی و برنامه نویسی داشته باشیم و همراه با خنده و تفریح آموزش بدیم!

مشاهده آموزش ها
کل آموزش ها
25
نظرات و عقیده
11
وردپرس
8
آموزش طراحی
5

مراحل طراحی یک قالب وردپرس

طراحـــــی ، قدرت تخیلی در قالب کد

در این مقاله آموزش snap to scroll با سی اس اس خالی را خواهیم داشت؛ اگر چند سالی باشد که در حوزه وب فعالیت می‌کنید، حتما قالب های خارجی یا ایرانی را دیده‌اید که با مقداری اسکرول کردن، اسکرول به صورت روان و خود‌به‌خودی حرکت می‌کند تا کاملا به هدف طراح و چیزی که قرار است کاربر ببیند هم‌تراز شود. به این موضوع Snap to scroll گفته می‌شود؛ به عبارت دیگری، هم‌تراز سازی به اسکرول. قبل از معرفی شدن پراپرتی(خاصیت)، برای این داستان، شما باید با استفاده از جاوا اسکریپت خالی و یا با استفاده از جی‌کوئری و سایر کتابخانه‌های جاوا اسکریپتی این کار را انجام می‌دادید؛ و خب اگر بخواهیم روراست باشیم این موضوع اگرچه زیاد هم سخت نیست ولی از شما، انرژی و زمان معینی را خواهد گرفت. در این مقاله آموزشی از استودیو ابافت، مرجع طراحی وب در تبریز، می‌خواهیم یک خاصیت جالب سی‌اس‌اس را معرفی کرده و راهکاری ارائه دهیم که بدون صرف وقت و انرژی، این مورد را در پروژه ها و یا سایت خود پیاده‌سازی کنید؛ پس با ما همراه باشید.

هم‌تراز سازی به اسکرول با سی اس اس

هم‌تراز سازی به اسکرول با سی اس اس

 

خاصیت scroll-snap-type  در سی اس اس چیست و چگونه استفاده کنیم؟

پراپرتی scroll-snap-type تایپ و مدل تراز شدن اسکرول را به المنت و البته محور آن را تعیین می‌کند و در واقع این خاصیت را برای یک المنت برای شما فعال می‌نماید؛ قاعدتا در یک فضای دو بعدی هستیم و محور افقی ما محور x ها و محور عمودی ما، محور y ها خواهد بود. این پراپرتی بعد از محور مربوطه، حالت و تایپ را می‌گیرد که باید یکی از دو حالت mandatory یا proximity باشد.

تفاوت حالت mandatory با proximity در پراپرتی scroll-snap-type در چیست؟

این دو حالت، در واقع تفاوت بسیار ریزی دارند که بهتر است به صورت عملی این مورد را بازگو کنیم که در ادامه‌ی مقاله، حتما این‌کار را انجام خواهیم داد؛ ولی اگر به طور کلی بخواهیم توضیح دهیم؛ در حالت mandatory شما با اسکرول کمی به تارگت یا المنت هدف بعدی منتقل می‌شوید و این فرایند بسیار نرم خواهد بود؛ در عوض حالت proximity شما را تا آخرین لحظه در المنت مبدا نگه می‌دارد و در نهایت به المنت هدف هدایت می‌نماید؛ توجه داشته باشید در این حالت اگر با غلتک موس، صفحه را خیلی بیشتر از مقدار مورد نیاز برای رسیدن به المنت هدف اسکرول کنید، اسکرول دقیقا به المنت هدف فیکس خواهد شد و بیشتر از آن صفحه اسکرول نمی‌شود مگر بعد از تکمیل فرایند هم‌ترازی؛ اما در حالت mandatory اگر با غلتک موس اندکی اسکرول کنید، به المنت هدف به صورت خیلی نرم هدایت می‌شوید.

آموزش snap to scroll با سی اس اس خالی

آموزش snap to scroll با سی اس اس خالی

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

چگونه از پراپرتی scroll-snap-type استفاده کنیم؟

برای اینکار ابتدا یک سند اچ‌تی‌ام‌ال ایجاد می‌کنیم؛ می‌خواهیم ۳ باکس فول اسکرین داشته باشیم تا بتوانیم هم‌تراز شدن اسکرول را با المنت ببینیم و لمس کنیم؛ برای همین ما به سه section نیاز داریم؛ البته می‌توانید از div هم استفاده کنید و قاعدتا این موضوع فرقی نخواهد داشت؛ برای استایل دهی نیز یک فایل سی‌اس‌اس را به صورت خارجی به سند اچ‌تی‌ام‌ال خودمان متصل می‌کنیم. درون section ها یک هدینگ و یک پاراگراف ایجاد می‌کنیم که این مورد نیز تفاوتی ندارد و صرفا به خاطر ارائه‌ی پیش‌نمایش است؛ در نهایت کد های ما بدین صورت خواهد بود:

در این مرحله باید ببینیم پدر المنت های هدف ما کدام تگ است؟ بسیار خوب section های ما مستقیما درون تگ body قرار گرفته‌اند؛ یعنی پدر آن‌ها تگ body است؛ ما برای پیاده سازی snap to scroll دقیقا باید به پدر المنت‌های مورد نظر خود پراپرتی scroll-snap-type را ست کنیم؛ اما توجه کنید، نکته‌ی بسیار مهم این است که مثل پراپرتی scroll-behavior دقیقا پراپرتی scroll-snap-type را هم نمی‌توانید به تگ body نسبت دهید! پس چاره چیست؟ دوباره می‌توانید راه حل پراپرتی scroll-behavior را در پیش بگیرید و پراپرتی scroll-snap-type را به html نسبت دهید.

آموزش مرحله به مرحله استفاده از پراپرتی scroll-snap-type در سی‌اس‌اس

آموزش مرحله به مرحله استفاده از پراپرتی scroll-snap-type در سی‌اس‌اس

توجه کنید: پراپرتی scroll-snap-type را نمی‌توانید به سلکتور body اختصاص دهید.

 

چون پدر section های ما تگ body است، باید scroll-snap-type را به تگ html بدهیم؛ و البته حتما باید در راستای محور y ها اسکرول داشته باشیم و قاعدتا طول المنت باید auto باشد.

بعد از این به خود section ها می‌رسیم؛ مهم‌ترین نکته این است که پراپرتی scroll-snap-align را مشخص کنیم؛ در واقع این پراپرتی نوع ترازسازی را تعیین می‌کند که ما اینجا برابر با start قرار می‌دهیم؛ یعنی از جایی که المنت ما شروع می‌شود؛ بقیه پراپرتی‌ها برای دادن رنگ و استایل برای پیش‌نمایش کمی بهتر است و کاربرد دیگری ندارد. پس در واقع با کمی چاشنی استایل اضافی فایل سی‌اس‌اس ما بدین صورت خواهد بود:

می‌توانید در حالت mandatory پیش‌نمایش را ببینید؛ کافیست با غلتک موس به پایین اسکرول کنید:

 

See the Pen
by EhsanAbafat (@ehsanabafat)
on CodePen.

در سورس کد بالا اگر از لینک خود کدپن استفاده کنید می‌توانید mandatory را به proximity تغییر داده و تفاوت را ببینید.

توجه داشته باشید: با همین پراپرتی ساده و ترکیب آن با کتابخانه‌ی کوچکی مانند animeJs می‌توانید قالب های فوق‌العاده‌ای خلق کنید؛ در‌واقع چیز‌های کوچک و ساده دست به دست هم می‌دهند و یک چیز بزرگ و خارق‌العاده را می‌سازند.

به نظر می رسد که شما نوتیفیکیشن را مسدود کرده اید!
اشتراک گذاری
شاید این مطالب را نیز بپسندید
دیدگاه یا سوال خود را مطرح کنید
guest
0 نظر/ سوال و جواب
Inline Feedbacks
View all comments
0
اگر سوال یا دیدگاهی دارید ، مطرح کنید!x
()
x