img

ساختِ باکس بازشو متحرک، برای نمایشِ اطلاعاتِ بیشتر از دل یک متن

/
/
/

۱- سند HTML
اولینِ اقدامِ لازم تعریف سندِ HTML می باشد. این کار به نوشتنِ ظرف (container) HTML، که قسمت های head و body را در خود می گنجاند خلاصه می شود. قسمت سر، جایی است که درآن آدرسِ برگه‌های استایلِ CSS، یا stylesheet گذارده می شود، تا صفحه بداند آنها را از کجا بارگذاری کند، و بدنه نیز جایی است که برای گنجانیدنِ محتوای قابل مشاهده توسط مخاطب مورد استفاده قرار می گیرد. توضیحاتِ راجع به بدنه در گام‌های دوم وسوم تشریح می شود.

<!DOCTYPE html>
<html>
<head>
<title>Box Open</title>
<link rel=»stylesheet» type=»text/css»
href=»styles.css» />
</head>
<body>
*** STEP 2 HERE
</body>
</html>

 

۲- مکان‌یابی در HTML(navigation)
برای دستیابی به مقصودمان نیاز است که از مکان‌یابی(navigation) برای ظاهر کردنِ محتوای مورد نظرمان در برابرِ دیدگان مخاطب استفاده کنیم. از ظرفِ nav برای انتخاب کردنِ child links از CSS در مراحل بعدی استفاده می شود. صفتِ href هر کدام از پیوندها، به صفتِ id متعلقِ به article مربوط است، که در گام سوم این articleها را خواهیم نوشت. توجه داشته باشید که علامتِ #، پیوندی را برای ID یک عنصر، که در صفحه واقع است را تعریف می کند.

<nav>
<a href=»#one»>One</a>
<a href=»#two»>Two</a>
</nav>

 

۳- Article
چیزهایی که قرار است دربرابرِ چشمان مخاطب باز شوند، در میان ظرف‌های article قرار داده می شوند. هر article واجدِ یک دکمه‌ی بستن می باشد. این دکمه‌ها توسطِ صفتِ ‘data-button’ تعریف می شوند. در میان ظرف‌های article، حداقل یک تگِ section نیز وجود دارد، که محتویاتِ article در آن ذخیره می گردد. sectionها نقش مهمی را در گسستِ وابستگی میانِ محتویات و ظرفِ article در هنگام تغییر شکل یا transition ایفا می کنند.

<article id=»one»>
<a href=»#» data-button=»close»>x</a>
<section>
<h2>One</h2>
</section>
</article>
<article id=»two»>
<a href=»#» data-button=»close»>x</a>
<section>
<h2>Two</h2>
</section>
</article>

 

۴- استایل دادن به Article
فایل جدیدی با نامِ style.css بسازید تا در آن قوانینِ(rules) حاکم بر ظاهرِ صفحه را تعریف نمایید. اولین قانون تعیین می کند که ظرف‌های article به چه نحوی نمایش داده شوند. موقعیت قرارگیریِ ظرف‌های article ثابت تعریف می شود، تا از پدیدار بودن آنها از بالا و پایین کردن‌های صفحه توسطِ مخاطب در امان باشد. به صفت Overflow نیز auto را نسبت می دهیم، تا محتویاتِ زیرمجموعه(child content)‌‌، در صورت لزوم قابلیت بالا و پایین شدن یا scroll داشته باشند.

article{
display: block;
position: fixed;
background: #000;
color: #fff;
overflow: auto;
}

 

۵- استایلِ بیشتر برای article
قرارگیریِ articleها برروی سایرِ محتوا بایستی قطعی باشد. بنابراین z-index بایستی از سایر المان‌های صفحه بالاتر باشد. هنگامی که تنظیمات پیشِ فرض را برای مکان قرارگیری(چپ/راست) و اندازه(عرض/طول) تعریف گردید، از transition برای متحرک سازیِ تغییرات آتی استفاده می گردد. صفتِ ‘transition-timing-function’ به تغییر شکل، یا transition اجازه می دهد که سرعتی افزایشی را در عوض شدنِ حالت شکل داشته باشیم.

article{
z-index: 9999;
left: 0;
top: 50vh;
width: 100vw;
height: 0;
padding: 0;
transition: all 1s;
transition-timing-function: ease-in;
}

 

۶- تغییرات در article هدف
هنگامی که کاربر برروی پیوندی کلیک می کند، و پیوندِ مذبور به صفتِ ID ظرفِ article وصل است، تغییرات بایستی برروی article اعمال شود. به صفتِ top رقمِ ۰، و به height مقدارِ ۱۰۰vh داده می شود، که همان اندازه‌ی حداکثریِ پنجره‌ی مرورگر می باشد. همه‌ی اینها در عمل متحرک به نظر خواهند آمد، زیرا که قبلا از transition استفاده گردیده است.

article:target {
top: 0;
height: 100vh;
}

 

۷-دکمه‌ی بستنِ article
هر article واجدِ دکمه‌ی بستن است، که به صورت ‘data-button=”close”’ تعریف گردیده است. رنگ، اندازه و مکانِ قرارگیریِ این عناصر بایستی بصورت ویژه تعریف گردد. به منظور اطمیان از مخفی نشدنِ دکمه، مکان قرارگیری ثابت تعریف شده، و جای دکمه را سمتِ راست، بالا تعیین می کنیم. رنگ پس‌زمینه را قرمز، و رنگ فونت را سفید انتخاب می کنیم.

article [data-button=»close»]{ position: fixed;
display: block;
background: #c00;
color: #fff;
padding: 1em;
width: 1em;
height: 1em;
top: 0;
right: 0;
text-decoration: none;
}

 

۸- انتخابگرِ Hover
تعامل پذیریِ عناصرِ صفحه، باید به وضوح برای کاربرِ پیدا باشد. این را به عنوان یک اصل همیشه به خاطر داشته باشید. به همین دلیل برای اینکه به کاربر بفهمانیم دکمه‌ی قرارگرفته در صفحه قابل فشردن است، با استفاده از انتخابگرِ hover کاری می کنیم که وقتی اشاره‌گر موس روی دکمه قرار گرفت، رنگ پس‌زمینه، و رنگ فونت با یکدیگر عوض شوند.

article [data-button=»close»]:hover{
background: #fff;
color: #c00;
}

۹- استایل دادن به محتویاتِ درون sectionهایی که در دلِ Article قرار دارند
محتویاتِ درونِ sectionها، به دلیل آنکه صفت opacity به صورت پیش‌فرض دارای مقدار ۰ می باشد، عملا نامرئی هستند. پس برای آنکه به پدیدار شدنِ محتوایِ مذبور، حالتی متحرک بدهیم از صفتِ transition-delay استفاده می کنیم. در تغییراتی که به محتوا اعمال می شود، مقدار ۰ در opacity به ۱ تبدیل شده، و محتوا مرئی می گردد. ناگفته نماند که article موردِ نظر، از طریق صفتِ ID شناسایی می شود.

article > section{
display: block;
opacity: 0;
transition: opacity 1s;
transition-delay: 1s;
}
article:target > section{
opacity: 1;}

 

دانلود سورس کد این مقاله

 

 

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text