Description
Code of Conduct
- I have read and agree to the GitHub Docs project's 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