چگونه با display:table-cell اسکرول افقی ایجاد نماییم
توسط مجید احدی
از زمانی که اسکرول افقی را در برخی از وب سایت ها میبینیم, بسیاری از بازدیدکنندگان وب سایت و حتی طراحان وبسایت شگفت زده شده اند. خودمان هم شاید دقیقا ندانیم که چرا مجذوب چنین وب سایت هایی میشویم. شاید بیشتر ماها بگوییم که امروزه صفحات وب سایتی که اسکرول افقی دارند منسوخ و از رده خارج شده است.
اما همین جا میخواهم به شما بگویم که در شرایطی میتوانیم از چنین تکنیکی استفاده نماییم. همان طور که میدانیم امروز دستگاه های لمسی یا همان touch گسترش نموده اند و برای استفاده کنندگان آن سخت میباشد که از بالا به پایین و یا بالعکس حرکت نمایند و بهترین گزینه حرکت به سمت راست و چپ میباشد. قراردادن آبجکت ها و چیدمان آنها از راست و چپ بسیار متداول تر میباشد.
بسیاری از طراحان و حتی کاربران و استفاده کنندگان وب سایت هرگز از وجود داشتن اسکرول افقی ناراحت نخواهند شد. اما یکی از مسائلی که ممکن است باعث ناراحتی کاربران وب سایت گردد وجود منوی کاربری یا همان Navigation میباشد.
کدهای مورد نیاز
<div class=“horizontal”>
<div class=“table”>
<article> <h3>Project Title</h3>
</article>
<!– Repeat this part as many times as necessary. –>
</div>
</div>
// table-layout: fixed does a lot of the magic, here. It makes sure that the “table cells” retain the pixel dimensions you want.
.table {
display: table;
table-layout: fixed;
width: 100%;
}
// Arranging your content inside the “cells” is as simple as using the vertical-align and text-align properties. Floats work, too.
article {
width: 400px;
height: 400px;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
}
// Some styling for contrast.
article:nth-child(2n+2)
{
background: #d1d1d1;
}
آن را full screen نمایید
<div class=“horizontal”>
<div class=“table”>
<section>
<h1>Full-Screen Horizontal Layouts</h1>
<p>Made with <code>display: table-cell;</code></p>
<p>By Ezequiel Bruni</p>
</section>
<!– Repeat this part as necessary. –>
</div>
html, body</div>
.Don‘t touch this part. It helps//
{ width: ۱۰۰%;
height: ۱۰۰%;
overflow: hidden; }
// In this case, I didn‘t want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do. div.horizontal
{ display: block;
width: ۱۰۰%;
height: ۱۰۰%;
overflow: hidden;
position: static; }
} table.
display: table;
table-layout: fixed;
width: ۱۰۰%;
height: ۱۰۰%;
}
.table > section }
width: ۱۶۰۰px; // The width is based on my monitor. It’s replaced by jQuery anyway. Percentage widths do not work.
height: ۱۰۰%;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
} ()(window).load(function()$
;()var vWidth = $(window).width
;()var vHeight = $(window).height
;(‘.table > section’).css(‘width’, vWidth).css(‘height’, vHeight)$
;{(
} (window).resize(function()$
;()var vWidth = $(window).width
;()var vHeight = $(window).height
;(‘.table > section’).css(‘width’, vWidth).css(‘height’, vHeight)$
;({
مجید احدی
مجید احدی هستم، تولید کننده محتوا برای سایت، قبلا در زمینه تعمیرات موبایل و مدتی هم در زمینه دوربین های مداربسته فعالیت داشتم. در حال حاضر مدتی هست که به حوضه فناوری اطلاعات علاقه مند شدم در حال حاضر به عنوان تولید کننده محتوا و ویرایشگر سایت فعالیت می کنم.
مطالب پیشنهادی
روش هایی جهت حفظ رتبه در موتورهای جستجو
25 مهر 1396