Aby wstawić ruchomy obrazek w HTML, najczęściej stosuje się trzy techniki:
- animowane obrazki w formacie GIF,
- animacje CSS dla dowolnych grafik (np. PNG, JPG, SVG),
- animacje za pomocą JavaScript (np. z użyciem płótna
<canvas>).
Poniżej znajdziesz szczegółowe instrukcje, praktyczne przykłady oraz wskazówki dotyczące najpopularniejszych zastosowań tych metod.
Wstawianie animowanego GIF-a
Najprostszym sposobem na dodanie animowanego obrazka jest użycie pliku GIF, który sam w sobie zawiera animację.
<img src="twoj-obrazek.gif" alt="Opis obrazka">
Zastosowania –
- ikony ładowania (ang. loaders),
- proste animacje dekoracyjne (np. confetti, błyszczące gwiazdki),
- prezentacja krótkich, powtarzalnych ruchów (np. zabawne meme).
Ruchome grafiki za pomocą CSS (transformacje, animacje)
Jeżeli chcesz, aby statyczny obrazek (np. PNG lub JPG) ruszał się na stronie, wykorzystaj CSS i jego możliwości animowania właściwości takich jak transform, opacity czy position.
Przykład – Obrazek poruszający się z lewej do prawej
HTML:
<div class="animowany-kontener">
<img src="twoj-obrazek.png" alt="Ruchomy obrazek" class="ruchomy-obrazek">
</div>
CSS:
.animowany-kontener { position: relative; width: 400px; height: 150px; overflow: hidden; background: #f0f0f0; }
.ruchomy-obrazek { position: absolute; left: 0; top: 50px; width: 100px; animation: przesuwaj 4s linear infinite; }
@keyframes przesuwaj { 0% { left: 0; } 100% { left: 300px; } }
Zastosowania praktyczne –
- ruchome banery reklamowe,
- animowane ikony przedstawiające akcję (np. przesuwające się strzałki),
- przyciągające uwagę elementy call-to-action.
Przykład – Skalowanie obrazka po najechaniu kursorem
HTML:
<div class="przyklad">
<img src="foto.jpg" alt="Efekt powiększenia">
</div>
CSS:
.przyklad { overflow: hidden; width: 300px; height: 300px; border: 1px solid #000; }
.przyklad img { transition: transform 3s; display: block; margin: 0 auto; }
.przyklad img:hover { transform: scale(1.2); }
Zastosowania –
- prezentacje galerii zdjęć z efektem powiększania,
- podkreślanie grafiki przy interakcji użytkownika.
SVG i animacje wektorowe
Obrazki SVG oferują wewnętrzną możliwość animacji zarówno przez CSS, jak i przez atrybuty języka SVG.
Przykład – Prosta animacja SVG
HTML:
<svg width="100" height="100">
<circle id="kolko" cx="50" cy="50" r="40" fill="blue">
<animate attributeName="cx" from="50" to="80" dur="1s" repeatCount="indefinite"/>
</circle>
</svg>
Zastosowania –
- ikony ładowania,
- interaktywne elementy UI (np. przyciski z animacją).
Animacje za pomocą JavaScript i <canvas>
Dla bardziej zaawansowanych efektów (np. gry, symulacje, ruch po ścieżce), wykorzystuje się element <canvas> i własny kod JavaScript.
Przykład – Prosty ruch obrazka po płótnie
HTML:
<canvas id="myCanvas" width="400" height="150"></canvas>
JavaScript:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'twoj-obrazek.png';
let x = 0;
img.onload = function() {
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, x, 50, 100, 100);
x += 2;
if (x > canvas.width) x = -100;
}, 20);
};
Zastosowania –
- gry internetowe,
- symulacje i animacje fizyczne,
- zaawansowane efekty wizualne na stronie.
Dodatkowe wskazówki
- Animacje CSS są najłatwiejsze do wdrożenia dla prostych efektów ruchomych bez konieczności pisania JavaScript;
- SVG warto wybierać, gdy zależy Ci na doskonałej jakości grafiki wektorowej w każdym rozmiarze i łatwych animacjach;
- Canvas i JavaScript sprawdzą się w realizacji nieszablonowych efektów i interaktywnych wizualizacji;
- GIF jest rozwiązaniem szybkim, lecz mniej elastycznym i daje się stosować raczej do prostych, powtarzalnych animacji.
Podsumowanie –
Dodanie ruchomego obrazka do HTML możesz zrealizować na wiele sposobów – wszystko zależy od rodzaju grafiki, oczekiwanego efektu ruchu i poziomu interakcji z użytkownikiem. W przypadku prostych efektów warto zacząć od CSS/animacji GIF, a do złożonych – sięgnąć po JavaScript i <canvas>.
