Skip to content

fd #39213

Closed
Closed
fd#39213
@FormatdiscL

Description

@FormatdiscL

Code of Conduct

What article on docs.github.com is affected?

2. Dodavanje Novih Animacija (Fade-in na Skrolanje)

[cite_start]Tvoja stranica već ima suptilne i lijepe tranzicije na hover (prelazak mišem)[cite: 60, 61, 65, 66]. Možemo dodati još jedan sloj interaktivnosti – animaciju elemenata prilikom skrolanja, odnosno kada postanu vidljivi na ekranu.

Napravit ćemo "fade-in & slide-up" efekt za kartice usluga.

Korak 1: Dodaj CSS za Animacije

Ovaj kod definira početno, skriveno stanje elemenata i animaciju koja će se pokrenuti kada element postane vidljiv. Dodaj ovaj CSS na kraj svog <style> bloka.

/* Dodati na kraj <style> bloka */

/* Klasa za početno skriveno stanje elementa */
.hidden-anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* Klasa koja se dodaje kad element postane vidljiv */
.visible-anim {
  opacity: 1;
  transform: translateY(0);
}

Korak 2: Dodaj JavaScript za Pokretanje Animacija

Ovaj JavaScript kod koristi IntersectionObserver API – modernu i vrlo efikasnu metodu za praćenje vidljivosti elemenata. Skripta će pratiti sve elemente s klasom .hidden-anim. Kada takav element uđe u vidljivo područje ekrana, skripta će mu dodati klasu .visible-anim i time pokrenuti CSS animaciju.

Postavi ovaj <script> blok na kraj <body> elementa, odmah prije </body> taga.

<script>
document.addEventListener("DOMContentLoaded", function() {
  
  // Logika za animacije na skrolanje
  const animatedElements = document.querySelectorAll('.hidden-anim');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible-anim');
        // Opcija: prestani pratiti element nakon što je animiran
        observer.unobserve(entry.target); 
      }
    });
  }, {
    threshold: 0.1 // Pokreni animaciju kad je 10% elementa vidljivo
  });

  animatedElements.forEach(el => {
    observer.observe(el);
  });

});
</script>

Korak 3: Primijeni Klasu na HTML Elemente

Sada samo trebaš odlučiti koje elemente želiš animirati. Kao primjer, animirajmo kartice usluga (.service-card). Pronađi ih u HTML-u i dodaj im klasu hidden-anim.

Primjer (ne moraš mijenjati cijeli HTML, samo dodaj klasu):

<div class="service-card hidden-anim"> <div class="icon-wrapper">
    </div>
  <h3>Čišćenje od virusa</h3>
  <p>Detaljno uklanjanje virusa, spywarea i malwarea...</p>
</div>

<div class="service-card hidden-anim"> <div class="icon-wrapper">
    </div>
  <h3>Instalacija OS-a</h3>
  <p>Instalacija i konfiguracija Windows ili macOS...</p>
</div>

Možeš dodati klasu hidden-anim na bilo koji element: .package-card, .feature-card, .section-title itd.

Isprobaj ove izmjene! Stranica će dobiti na dinamici i profesionalnosti. Javi mi kako ti se sviđa i što bismo sljedeće mogli unaprijediti!

What part(s) of the article would you like to see updated?

What part(s) of the article would you like to see updated?
*
Give as much detail as you can to help us understand the change you want to see.
Why should the docs be changed? What use cases does it support?
What is the expected outcome or behavior?
Markdown Editor
Markdown input: preview mode selected.
Write
Preview
Rendered Markdown Preview
Nothing to preview
Field can not be empty
Additional information
Are you able to reliably reproduce the problem? How often does it occur? How many users are affected?
Add any other context or screenshots about the feature h

Additional information

What part(s) of the article would you like to see updated?
*
Give as much detail as you can to help us understand the change you want to see.
Why should the docs be changed? What use cases does it support?
What is the expected outcome or behavior?
Markdown Editor
Markdown input: preview mode selected.
Write
Preview
Rendered Markdown Preview
Nothing to preview
Field can not be empty
Additional information
Are you able to reliably reproduce the problem? How often does it occur? How many users are affected?
Add any other context or screenshots about the feature h

Metadata

Metadata

Assignees

No one assigned

    Labels

    invalidThis issue/PR is invalidtriageDo not begin working on this issue until triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions