Budujemy prostą stronę internetową cz. 6

Witam w ostatniej części mojego kursu budowania prostej strony internetowej w tej części zajmę się animacjami. Czyli efektami jakie można, ale nie trzeba dodać na stronę. Głównym zadaniem animacji jest uatrakcyjnienie witryny oraz poprawa reakcji na czynności odbiorcy.

Poprzednie części kursu

Jeśli jesteś tu pierwszy raz a chcesz dowiedzieć się jak zbudować bardzo prostą stronę internetową to poniżej znajdziesz informacje o tym jak to zrobić. Pamiętaj jednak, że strona którą buduje to przykład. Dlatego jest ona naprawdę prosta i ma tylko cele edukacyjne.

• Budujemy prostą stronę internetową cz. 1
• Budujemy prostą stronę internetową cz. 2
• Budujemy prostą stronę internetową cz. 3
• Budujemy prostą stronę internetową cz. 4
• Budujemy prostą stronę internetową cz. 5
• Budujemy prostą stronę internetową cz. 6
• Struktura strony w HTML5

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:

• bootstrap.min.js
• jquery-3.3.1.min.js

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ą

• 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