Elementy strony dopasowane do własnego projektu. Wariant „Nagłówek zmieniany scrollem” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
HTML określa strukturę przykładu, CSS jego wygląd, a JavaScript — jeżeli występuje — odpowiada za interakcję. Podgląd pokazuje domyślne ustawienia, które możesz zmienić w edytorze.
Jak dodać go na stronę?
Otwórz przykład w edytorze i podmień tekst oraz kolory.
HTML wstaw w miejscu, w którym ma pojawić się element.
CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem </body>.
Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Podmień treści i odnośniki. Kod działa w przeglądarce; formularze wymagają osobnej obsługi wysyłania po stronie serwera.
Co możesz zmienić w konfiguratorze?
Nazwa strony, Kolor po przewinięciu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Nagłówek zmieniany scrollem
HTML
<header class="header"><strong>Twoja marka.</strong><nav aria-label="Menu"><a href="#about">O nas</a><a href="#offer">Oferta</a></nav></header><section class="hero"><h2>Przewiń w dół.</h2><p>Nagłówek zmieni wygląd po 80 pikselach.</p></section><section id="about"><h2>O nas.</h2></section><section id="offer"><h2>Oferta.</h2></section>
const header=document.querySelector('.header');
function updateHeader(){header.classList.toggle('bg',scrollY>80)}
addEventListener('scroll',updateHeader,{passive:true});updateHeader();