نحوه طراحی یک افکت ساده برای هدر سایت

شاید شما هم سایت هایی را دیده باشید که از افکت Collapsing استفاده کرده اند. در واقع این افکت باعث می شود تا با اسکرول کردن، هدر یا بنر به تدریج کوتاه و ناپدید شود. بهتر است که یک نگاه کوتاه به این افکت جالب که قرار است از آن بعدا در طراحی های خود استفاده کنید بیاندازید. افکت Collapsing هدر در حقیقت فقط با چند خط ساده و کوتاه CSS ایجاد می شود. تمام چیزی که به آن نیاز داریم، یک ویژگی ساده Position است که برای هدر یا بنر تعریف می شود. سپس یک مقدار z-index برای عناصر صفحه تنظیم می شود تا به محتوای صفحه این اجازه را بدهد تا روی عناصر دیگر اسکرول شود. در واقع در اینجا با اسکرول کردن، بنر زیر محتوای اصلی سایت فرو می رود.

بهتر است به جای توضیح بیشتر یک نگاه به دموی آماده شده بیاندازید:

افکت Collapsing را بصورت زنده مشاهده کنید

  چگونه یک افکت ساده برای هدر سایت ایجاد کنیم

به منظور ایجاد این افکت شما نیاز به یک طرح ساده برای سایت شامل حداقل یک هدر و یک محیط برای محتوای سایت نیاز دارید. در این نمونه ما یک نوار هدر کوچک در بالای سایت ایجاد می کنیم که بصورت ثابت در بالای سایت قرار دارد و با اسکرول کردن ثابت می ماند و همیشه در دسترس است. در زیر منو ما یک بنر ایجاد کردیم که قرار است افکت Collapsing روی آن اجرا شود و در نهایت یک محدوده برای محتوای اصلی سایت.

دموی آنلاین افکت Collapsing در یک قالب ساده


header {
    height: 100px;
    background: #bdbdbd;
    position: fixed;
    width: 100%;
    z-index: 10;
}

شروع به طراحی کدهای CSS می کنیم تا موقعیت هدر را ثابت کنیم. این افکت زمانی زیباتر می شود که شامل کل صفحه بشود، پس عرض صفحه را 100% قرار می دهیم. جایگاه ثابت در صفحه خیلی ساده با کد ;position: fixed بوجود می آید (که با اسکرول صفحه منو در جایگاه خود ثابت می ماند). برای آنکه مطمئن شویم که محتوای صفحه زیر هدر به حرکت در می آید مقدار خصوصیت z-index آن را روی عدد 10 قرار می دهیم. همچنین رنگ آن را خاکستری و عرض آن را 100px قرار می دهیم.


#banner{
    width: 100%;
    height: 300px;
    position: fixed;
    top: 100px;
    background: #707070;
}

بخش دوم از طرح بندی صفحه ما بنر است. این همان قسمتی است که افکت Collapsing را می گیرد. این عنصر صفحه نیز با افزودن خصوصیت ;position: fixed در جایگاه خود ثابت می ماند. اما برای آنکه بخشی از تصویر زیر منو قرار نگیرد از بخش بالای صفحه 100px فاصله ایجاد می کنیم. همچنین رنگ آن را نوک مدادی و ارتفاع آن را 300px قرار می دهیم.


#content {
    width: 100%;
    position: relative;
    top: 400px;
    background: #ebebeb;
    height: 1500px;
}

در نهایت محدوده محتوای صفحه را تکمیل می کنیم تا افکت را کامل کنیم. موقعیت عناصر قبلی صفحه (هدر و بنر) ثابت بود بنابراین موقعیت این عنصر باید نسبی باشد تا بتواند روی عناصر دیگر صفحه قرار گیرد و محتوای آن با اسکرول کردن جابجا شود و به سمت بالا برود. به همین دلیل ;position: relative به کدهای بالا اضافه شده است. بصورت پیش فرض مقدار خصوصیت z-index بیشتر از عنصر بنر در صفحه است (به همین دلیل آن را نمی نویسیم) و چون این عنصر در صفحه ثابت نیست با اسکرول صفحه روی بنر قرار می گیرد و هنگامی که به هدر می رسد به دلیل اینکه مقدار z-index هدر خیلی بیشتر از محتوای انتخاب شده است بنابراین زیر هدر قرار خواهد گرفت.

 چگونه یک افکت ساده برای هدر سایت ایجاد کنیم

هنگامی که کدهای بالا را وارد کردید مشکل بالا برای شما پیش خواهد آمد. برای رفع آن کد زیر را نیز به کدهای خود اضافه کنید.


body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}
body {
    text-align: center;
}

هنگامی که پایه افکت را ایجاد کردید می توانید با نوشتن کد بیشتر آنرا زیباتر کنید. در اینجا برای زیباتر شدن یک تصویر برای بک گراند انتخاب کردیم و خصوصیت ;background-size: cover را برای آن ایجاد کردیم تا کل قسمت را بپوشاند و سپس چندین متن درون صفحه قرار دادیم. با مشاهده دو نمونه سایت زیر، خواهیم دید که این افکت چقدر به زیبایی سایت ها کمک کرده است: سایت fhoke.com

fhoke.com

سایت seedspot.org

seedspot.org

0







از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)