در گذشته، ما بسیاری را پوشش داده ایم جلوه های اسکرول هدر، و امروز وقت آن است برای یکی دیگر! در این آموزش، شما یاد خواهید گرفت که چگونه یک هدر را دوباره ظاهر کنید و بعد از مقدار مشخصی اسکرول، چسبناک شود.
و به نتیجه نهایی که اضافی است چیزی، برای نوار پیمایش چسبنده خود از جلوه تاری یخ زده استفاده خواهیم کرد.
1. با علامت گذاری صفحه (HTML) شروع کنید
ما با یک نشانه گذاری صفحه معمولی کار خواهیم کرد: یک هدر و برخی بخش های زیر آن برای آزمایش اثر. در داخل هدر، لوگو و a را قرار می دهیم فراخوانی برای اقدام. در مورد شما، می‌توانید عناصر بیشتری مانند منو، نوار جستجو، تغییر زبان و غیره داشته باشید.
این نشانه گذاری است:
1 |
<header class="page-header"> |
2 |
<div class="container"> |
3 |
<nav>
|
4 |
<a href=""> |
5 |
<img width="178" height="38" src="horizontal-logo-mobile.svg" alt="forecastr logo"> |
6 |
</a>
|
7 |
<button type="button"> |
8 |
GET STARTED |
9 |
<svg xmlns=" width="20" height="20" viewBox="0 0 24 24"> |
10 |
<path d="M7.411 21.39l-4.054 2.61-.266-1.053c-.187-.744-.086-1.534.282-2.199l2.617-4.729c.387 1.6.848 3.272 1.421 5.371zm13.215-.642l-2.646-4.784c-.391 1.656-.803 3.22-1.369 5.441l4.032 2.595.266-1.053c.186-.743.085-1.533-.283-2.199zm-10.073 3.252h2.895l.552-2h-4l.553 2zm1.447-24c-3.489 2.503-5 5.488-5 9.191 0 3.34 1.146 7.275 2.38 11.809h5.273c1.181-4.668 2.312-8.577 2.347-11.844.04-3.731-1.441-6.639-5-9.156zm.012 2.543c1.379 1.201 2.236 2.491 2.662 3.996-.558.304-1.607.461-2.674.461-1.039 0-2.072-.145-2.641-.433.442-1.512 1.304-2.824 2.653-4.024z" /> |
11 |
</svg>
|
12 |
</button>
|
13 |
</nav>
|
14 |
</div>
|
15 |
</header>
|
16 |
|
17 |
<!-- sections here -->
|
2. تنظیم سبک های سرصفحه (CSS)
برای سادگی، در مورد بازنشانی اولیه و سبک‌های بخش بحث نمی‌کنیم، اما با کلیک روی CSS برگه از پروژه نمایشی.
به هر حال، همانطور که در زیر می بینید، هیچ چیز با ظاهر هدر ما جالب نیست:
تنها نکته مهمی که باید به آن توجه کنید این است که هدر در ابتدا کاملاً قرار می گیرد. همچنین پس‌زمینه‌ای با شفافیت آلفا به آن می‌دهیم، زیرا برای جلوه فیلتر یخ‌بندان که بعداً اعمال خواهیم کرد، لازم است.
سبک های هدر به شرح زیر است:
1 |
.page-header { |
2 |
position: absolute; |
3 |
top: 0; |
4 |
right: 0; |
5 |
left: 0; |
6 |
padding: 20px 0; |
7 |
z-index: 1; |
8 |
background-color: rgba(255, 255, 255, 0.15); |
9 |
}
|
10 |
|
11 |
.page-header nav { |
12 |
display: flex; |
13 |
align-items: center; |
14 |
justify-content: space-between; |
15 |
}
|
16 |
|
17 |
.page-header button { |
18 |
display: flex; |
19 |
align-items: center; |
20 |
font-size: 16px; |
21 |
font-weight: bold; |
22 |
padding: 14px 20px; |
23 |
border-radius: 10px; |
24 |
color: white; |
25 |
background: #08a6df; |
26 |
transition: background 0.3s; |
27 |
}
|
28 |
|
29 |
.page-header button svg { |
30 |
flex-shrink: 0; |
31 |
margin-left: 5px; |
32 |
fill: currentColor; |
33 |
}
|
34 |
|
35 |
.page-header button:hover { |
36 |
background: #0ab8f6; |
37 |
}
|
3. متحرک سازی در اسکرول (جاوا اسکریپت)
همانطور که در صفحه اسکرول می کنیم، میزان اسکرول خود را ردیابی می کنیم و با مقدار معینی پیمایش (150 پیکسل)، با جابجایی دکمه، سرصفحه را برای همیشه نشان خواهیم داد. is-sticky کلاس
در آن مرحله، اقدامات زیر انجام خواهد شد:
- موقعیت هدر تغییر خواهد کرد
absoluteبهfixed. به این ترتیب، همانطور که ما پیمایش می کنیم، قابل مشاهده خواهد بود. - همانطور که به پایین اسکرول می کنیم، هدر به آرامی با یک انیمیشن اسلاید در ظاهر می شود. از سوی دیگر، با اسکرول کردن به بالا، هنگامی که به بالای صفحه نزدیک می شویم (≤150 پیکسل) بلافاصله ناپدید می شود.
- ما استفاده خواهیم کرد
backdrop-filterخاصیت محو کردن هر چیزی در پشت هدر. - ما هدر را با کاهش بالشتک‌های عمودی، ابعاد لوگو و اندازه و لایه‌های دکمه کوچک‌تر می‌کنیم.
در اینجا کد جاوا اسکریپت مورد نیاز است:
1 |
const header = document.querySelector(".page-header"); |
2 |
const toggleClass = "is-sticky"; |
3 |
|
4 |
window.addEventListener("scroll", () => { |
5 |
const currentScroll = window.pageYOffset; |
6 |
if (currentScroll > 150) { |
7 |
header.classList.add(toggleClass); |
8 |
} else { |
9 |
header.classList.remove(toggleClass); |
10 |
}
|
11 |
});
|
و سبک های مرتبط:
توجه داشته باشید که backdrop-filter: blur(10px); برای جلوه تار یخ زده ما
1 |
.page-header.is-sticky { |
2 |
position: fixed; |
3 |
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1); |
4 |
padding: 8px 0; |
5 |
backdrop-filter: blur(10px); |
6 |
animation: slideDown 0.35s ease-out; |
7 |
}
|
8 |
|
9 |
.page-header.is-sticky img { |
10 |
max-width: 80%; |
11 |
}
|
12 |
|
13 |
.page-header.is-sticky button { |
14 |
font-size: 14px; |
15 |
padding: 7px 10px; |
16 |
}
|
17 |
|
18 |
@keyframes slideDown { |
19 |
from { |
20 |
transform: translateY(-100%); |
21 |
}
|
22 |
to { |
23 |
transform: translateY(0); |
24 |
}
|
25 |
}
|
نتیجه
انجام شده! در طی این تمرین کوتاه، ما یاد گرفتیم که چگونه رفتار هدر را در اسکرول با چسبناک کردن آن تغییر دهیم. در مواردی که نیاز به یک نسخه روشن/کوچک شده از هدر خود در اسکرول دارید، می توانید از این افکت استفاده کنید. به عنوان مثال، شما می خواهید برخی از عناصر اصلی مانند لوگو و منو را نگه دارید، اما عناصر ثانویه مانند نوار جستجو یا برخی از آنها را پنهان کنید. دکمه های فراخوان برای اقدام.
بیایید دوباره به خلقت خود نگاه کنیم:
مثل همیشه، خیلی ممنون که خواندید!
