Budujemy prostą stronę internetową cz. 6

Kategoria wpisu Kurs CSS, PHP, HTML, CSS Tagi: , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Witam w ostatniej części mojego kursu budowania prostej strony internetowej w tej części zajmę się animacjami.

Poprzednie części

Instalacja skryptów js

Na początek zainstaluję na mojej stronie bibliotekę jQuery oraz bootstrap.min.js

Jeśli jeszcze ich nie masz możesz je pobrać z pomocą poniższych lików:

Biblioteki dodajemy poniżej sekcji <footer>

Teraz na naszej stronie będziemy mogli korzystać z różnych wbudowanych w Bootstrap 4 skryptów oraz dodawać własne.

Podążające za nami menu – fixed navbar

Pierwszą animacją jaką dodam jest przyklejone do górnej belki menu. Jak zapewne zauważyliście już menu w cale nie znajduje się u góry strony tylko pod banerem – a właściwie na banerze.

Teraz to nie co zmienimy. Nasze menu podczas scrollowania strony będzie zmieniać pozycję. Bootstrap posiada już odpowiednią klasę, która powoduje że nagłówek przykleja się do góry okna przeglądarki jest nią – fixed-top.

Nie możemy jednak dodać tej klasy bezpośrednio w kodzie HTML dlatego musimy dopisać odpowiedni skrypt. Należy go umieścić między znacznikami <script></script> poniżej dodanej wcześniej biblioteki jQuery.

Powyższy kod ustala w którym miejscu aktualnie się znajdujemy na stronie. Następnie jeżeli wysokość wyniesie będzie większa niż 100 (if (height > 100) ) spełniony zostanie warunek  i do naszego elementu <nav> zostanie dodana klasa .addClass(‚fixed-top’).

W przypadku gdy wysokość jest równa lub mniejsza od 100 klasa jest usuwana .removeClass(‚fixed-top’).

Aby wszystko poprawnie działało dodajemy jeszcze do pliku style.css kod:

W przeciwnym razie menu przykryje treść całej strony.

Dynamiczne poruszanie się po stronie

Kolejną animacją jaką chce dodać do strony jest dynamiczne przewijanie strony podczas wybierania różnych pozycji w menu.

Powyższy kod będzie przewijał treść strony do miejsca w którym zaczyna się sekcja z właściwym id (odpowiadającemu linkowi w menu) odejmując 50px. W efekcie menu nie najedzie na treść sekcji.

scrollTop: $(hash).offset().top -50

Szybkość przewijania w tym przykładzie to – 800,

Inne animacje, które was zainteresują

Filtry CSS

Animacje na obrazkach

Biblioteki z animacjami

DEMO

Poniżej znajdziecie link do gotowej strony.

Gotowe Demo

Warto przeczytać:

https://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp

Przeczytaj również

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *