img

ساخت یک افکت focus slide-in

/
/
/

۱- قالب سند HTML
با ساخت یک فایل HTML و برای تعریفmark up به منظور ساختار کلی سند پروژه را آغاز کنید. این فایل باید ظرف HTML را شامل شود، که آن نیز بخش ها در عنوان و متن را در بر می گیرد. عنوان اطلاعات توصیفی و پیوند ها به منبع CSS خارجی را شامل می شود. این متن ، محتویات صفحات مرئی را در خود جای داده است که در مرحله بعد آن ها را توصیف می کنیم.

<!DOCTYPE html>
<html>
<head>
<title>Slide</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
</head>
<body>
</body>
</html>

۲- محتویات متن
در داخل متن سند ، یک HTML ایجاد کنید. این مثال از یک پیوند اولیه به بخش مقاله تشکیل شده است که در آن هر مقاله یک شماره شناسایی دارد که به آن متصل می شود. از مقاله ها برای هر محتویات استفاده می شود به طوری که مسیریابی هر کدام ممکن باشد و از یک ظرف بخش برای متن قابل خوانش تشکیل شده باشد از یک تصویر برای تمایش تبعیت کند. هر بخش مقاله یک پیوند برای محتویات بعدی دارد ، که به مسیریابی می شود.

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

 

۳- شروع CSS
بعد از تکمیل HTML ، یک فایل جدید به نام « styles.css» بسازید. این فایل قانون نمایش را ذخیره می کند و برای تعیین سند صفحه و پوشش منطقه کامل با پیش زمینه و متن سفید ، این فایل را قوانین شروع کنید. برای آن که پهنا و ارتفاع عنصر به وسیله لایه گزاری تغییر نکنند ، همه چیز از تنظیم با اندازه جعبه برای جعبه مرز استفاده می کند.

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

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

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

۵- عناصر Article
حاشیه های کودکان Article حذف می شود و یک انتقال برای تمام ویژگی ها برای مدت یک ثانیه استفاده می شود و با استفاده از این کار ، عناصر داخل Article بعد از تغییر ، به طور انیمیشن نشان داده می شوند. بخش سطح اول در داخل Article، اندازه نیمی از صفه در دسترس را در اختیار دارد. زمانی که به شماره شناسایی Article از یک پیوند مسیر یابی اشاره می شود، انتخاب کننده هدف با تعیین z-index به ۱ ) بالا تر از بدنه صفحه) ، Article را مرئی می کند.

article > * {
margin: 0;
transition: all 1s; }
article > section{
width: 50vw;
padding: 0 1em;
}
article:target{
z-index: 1;
}

۶- تصویر Article
تصویر اصلی مربوط به هر Article ، تصویر جا داده شده به اولین کودک اولین لایه Article است. با استفاده از >symbol.in می توان به این موضوع اشاره کرد که در این حالت از تعیین موقعیت و اندازه برای تعیین مکان تصویر خارج از دید به صورت پیش فرض استفاده می شود. می توان از یک فیلتر برای تار کردن تصویر استفاده کرد.

article > img{
position: fixed;
display: block;
margin: 0;
overflow: hidden;
width: 50vw;
height: 100vh;
top: -100vh;
right: -100vw;
filter: blur(125px);
}

۷- تصویر انتخاب شده
زمانی که Article اصلی انتخاب می شود، قوانین دیگری نیز در تصویر کاربرد دارند. این قوانین تصویر را در یک نشان می دهند ، و فیلتر تار را حذف می کنند. بعد از این که از قانون انتقال برای تمام کودکان Article استفاده شد، این تغییرات بر همین اساس به حرکت در می آِیند.

article:target > img{
top: 0;
right: 0;
filter: blur(0);
}

۸-دکمه های مسیر یابی
برای ساخت دکمه مسیر یابی از یک پیوند استاندارد ، از یک سبک خاص برای نزدیک کردن ظاهر آن به دکمه استفاده می شود. از دسته»goBtn» برای نمایش پیوند ها در دکمه ها استفاده می کنم، این دکمه ها از یک مرز سفید مشخص انتخاب شده اند و یک لایه گذاری کاراکتر در اطراف استفاده می شود. پیوندی که زیر آن خط کشیده شده است حذف می شود.

.goBtn{
color: #fff;
text-decoration: none;
border: 1px solid #fff;
padding: 1em; }

کم تر یعنی بیشتر
کاری کنید تا کاربران بتوانند در هر بخش از محتویات مهم در فضا خود مسیر یابی را انجام دهند و از بار گزاری بیش از حد با اطلاعات بیشتر جلوگیری کنند.

نظر بدهید

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

It is main inner container footer text