img

ایجاد یک بنر تعامل پذیر برای حرکت در میان محتوای سایت

/
/
/
استفاده از CSS برای ایجاد بنرهای محتوایی که کاربر را به بخش‌های مختلف سایت هدایت می‌سازد.

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

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

۲- محتوای قابل دیدن
اکنون که ساختار صفحه ایجاد گشته است، گام بعدی تولید محتوای قابل مشاهده می‌باشد. که شامل دکمه‌های ناوبری و article‌ها می‌شود. هر article محتوی یک ظرف بنر تصوری به عنوان بچه اول خود خواهد بود، که با یک بخش از محتوای قابل خواندن اصلی دنبال می‌شود. پیوند‌های ناوبری از صفت href خود برای ارجاع به article هدف به وسیله اسم ID آنها استفاده می‌کنند.

<a href=”#first” class=”goBtn”> Go &gt;</a>
<article id=”first”>
<span><img src=”image1.jpg” alt=”Image” /></span>
<section>
<h1>Page 1</h1>
<a href=”#second” class=”goBtn”>Go &gt; </a>
</section>
</article>
<article id=”second”>
<span><img src=”image2.jpg” alt=”Image” /></span>
<section>
<h1>Page 2</h1>
<a href=”#first” class=”goBtn”>Go &gt; </a>
</section>
</article>

۳- ایجاد CSS
حالا که HTML کامل شده است گام بعدی ایجاد قوانین CSS برای سر و شکل دادن به ظاهر HTML می‌باشد. فایل تازه ای به نام ‘styles.css’ بسازید تا قوانین را در آن بنویسید. اولین گروه از قوانین سبب می‌شود که ظرف HTML و بدنه آن به صورت تمام صفحه به نمایش درآید – تکمیل شده با یک پس زمینه سیاه و بدون فضای مرزبندی قابل مشاهده.

html, body {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: #000;
color: #fff; }

۴- ظرف‌های Article
هر قسمت از محتوا که قابل ناوبری باشد درون یک ظرف article قرار می‌گیرد. اینها به طور پیش فرض مخفی هستند و هنگامی که انتخاب شوند مرئی می‌گردند. این نتیجه ی تنظیم موقعیت z-index آنها زیر بدنه سند می‌باشد – در ۱-. این موقعیت سپس به ۱ تغییر می‌کند، وقتی که article توسط URL با ارجاع به اسم ID خود مورد هدف واقع می‌شود.

article {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100vw;
height: 100vh;
background: #000; }
article: target {
z-index: 1; }

۵- تنظیمات بنر تصویری
بنر تصویری اولین بچه در هر article می‌باشد، بنابراین با گزینشگر بچه nام به آن ارجاع می‌شود. این المان به گونه ای تنظیم می‌شود که در ابعاد معینی نمایش یابد و هر قسمتی از تصویری که درونش قرار می‌گیرد اگر فراتر از مرزبندی تعریف شده باشد پنهان می‌گردد. به منظور اینکه جلوه متحرک سازی اجرایی شود، یک انتقال اعمال می‌گردد و المان به صورت پیش فرض موقعیتش خارج از دید قرار دارد.

article > *:nth-child(1) {
display: block;
position: absolute;
overflow: hidden;
transition: all 1s;
width: 100vw;
right: -100vw; }

۶- فعال سازی بنر
بنر هنگامی به صحنه فراخوانده می‌شود که اسم ID یک article توسط URL هدف قرار گیرد. به همراه انتقال و جایگیری که قبلا اعمال شده است. این گام موقعیت جدیدی را برای ظرف بنر تعیین می‌کند که انتقال به صحنه بنر را اجرایی می‌کند. بچه تصویری بنر هم نیز برای پر کردن کل عرض بنر تنظیم می‌شود.

article: target > *:nth-child(1) {
Right: 0; }
article > *:nth-child(1) img {
Width: 100%; }

۷- پایان کار
اکنون همه چیز برای جلوه بنر کامل شده است. گام پایانی تعریف موقعیت article‌ها می‌باشد و اینکه لینک‌های پیوند چگونه به نظر برسند. قسمت‌های محتوایی نیاز است که در زیر بنر نمایش داده شوند – ما می‌دانیم که این مکان ۲۰vw از بالای صفحه خواهد بود، چون اندازه بنر را ثابت تعیین کرده ایم.
دکمه‌های ناوبری با مقداری حاشیه و یک مرز ساخته شده اند که ظاهری دکمه مانند تر به آنها بدهد.

Article > section {
position: absolute;
width: 100vw;
top: 20vh; }
.goBtn {
color: #fff;
text-decoration: none;
border: 1px solid #fff;
padding: 1em; }

نظر بدهید

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

It is main inner container footer text