by: Aurelia SypniewskaPosted on:

Budujemy prostą stronę internetową cz. 6

Czas czytania: 2 minut

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>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
    <script>window.jQuery || document.write('<script src="js/jquery-3.3.1.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
<script>

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.

$(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 100) {
        $('nav').addClass('fixed-top');
    } else {
        $('nav').removeClass('fixed-top');
    }
});

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:

.top .fixed-top{
    position:fixed;
    top: 0;
    bottom: auto;
}

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.

$(document).ready(function(){ 
$('body').scrollspy({target: ".navbar", offset: 50});  
      $("#topmenu a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top -50
      }, 800,);
    } 
  });
});

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ą

DEMO

Poniżej znajdziecie link do gotowej strony.

Gotowe Demo

Warto przeczytać:

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