تغییر رنگ هدر سایت با اسکرول

قدم دوم در  تغییر رنگ هدر سایت با اسکرول: ثابت کردن هدر

هدری هایی که در سایت ها هست می تونن به صورت ثابت(fixed) طراحی بشن. با این کار محتوای داخل هدر سایتمون همیشه جلوی چشم کاربر حضور داره و کاربر به راحتی می تونه به قسمت های مختلف سایتمون دسترسی داشته باشه.

برای اینکه هدر سایتمون رو به صورت ثابت در بیاریم، کافیه که بعد از اینه بخش موردنظر (که هدر درون این بخش طراحی شده) رو انتخاب کردیم، از “قسمت پیشرفته”، قسمت “موشن افکت” رو انتخاب کنیم. در این بخش می تونیم تنظیمات مختلف مربوط به حرکت بخشمون رو تنظیم کنیم.

برای ثابت نگه داشتن هدر گزینه sticky رو  روی Top تنظیم می کنیم تا هدرمون در بالای صفحه ثابت بمونه و همراه اسکرول مثل بقیه المان های صفحه اسکرول نشه و به پایین بیاد.

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

حالا که هدر سایتمون به صورت ثابت طراحی شد، نوبت به نکته نهایی کار یعنی تغییر رنگ هدر هنگام اسکرول کردن می رسه. برای اینکار در قسمت “استایل” گزینه “scrolling effects” رو فعال می کنیم.

بعد از اینکه این گزینه رو فعال کردیم، از طریق قسمت “Transparency”  با تغییر میزان شفافیت هدر کاری می کنیم که تغییر رنگ موردنظر اتفاق بیفته. بنابراین روی این قسمت کلیک می کنیم.

بعد از کلیک، پنجره ای مانند تصویر زیر باز میشه که توی این قسمت می تونیم مشخص کنیم که در کجای صفحه افکت اسکرولی که اعمال کردیم عمل بکنه. اینکار رو با استفاده از تنظیم “viewport” می تونیم تنظیم کنیم.

در این تنظیم دو مقدار وجود داره. با تنطیم مقدار Top می تونیم مشخص کنیم که چه میزان از صفحه از قسمت بالا اسکرول بشه افکت اعمال عمل بکنه. همچنین با تنظیم مقدار Bottom میتونیم مشخص کنیم که مدت زمان رسیدن به این افکت چه مقداری باشه.

بنابراین میتونیم با قرار دادن مقدار Bottom روی مقدار Top مدت زمان اعمال این افکت رو بلافاصه لعد از اسکرول کنیم.

به همین سادگی در چندین مرحله تونستیم بدون استفاده از هیچ افزونه ی جانبی و فقط به کمک امکانات خود صفحه ساز المنتور، این امکان جذاب و کاربردی رو برای سایت خودمون ایجاد کنیم و لذت ببریم!

امیدواریم که با این آموزش تونسته باشین سایتتون رو جذاب تر بکنین و یکی دیگر از نیاز های طراحی سایتتون رو برطرف کرده باشین.