Jak zrobić efekt padającego śniegu na zdjęciu w HTML, CSS i JS

Efekt śniegu pozwala uzyskać elegancki wygląd strony z ruchomymi płatkami śniegu na obrazku. Sposób, który tu przedstwiam jest efektowy na stronie www i w miarę prosty do wdrożenia.

Efekt padającego śniegu na stronie WWW – czym jest i dlaczego przyciąga uwagę

Efekt padającego śniegu na stronie internetowej to jeden z najprostszych sposobów na dodanie sezonowego klimatu i przyciągnięcie uwagi użytkowników. Animowane płatki śniegu na zdjęciu lub banerze sprawiają, że strona WWW wygląda bardziej dynamicznie i nowocześnie, a jednocześnie buduje pozytywne emocje u odbiorców. Tego typu efekt wizualny jest szczególnie popularny w okresie zimowym, świątecznym oraz podczas kampanii promocyjnych, gdzie liczy się pierwsze wrażenie i zaangażowanie użytkownika.

Efekty wizualne w HTML, CSS i JS – kiedy warto je stosować

Zastosowanie efektu padającego śniegu w HTML, CSS i JavaScript daje dużą elastyczność i nie wymaga korzystania z ciężkich wtyczek czy zewnętrznych bibliotek. Dzięki temu animacja działa płynnie, nie obciąża strony i może być łatwo dostosowana do konkretnego projektu. Efekty wizualne tego typu świetnie sprawdzają się na stronach firmowych, landing page’ach, sklepach internetowych, blogach oraz stronach promocyjnych, gdzie istotna jest estetyka i wyróżnienie się na tle konkurencji.

Korzyści z efektu padającego śniegu na stronie internetowej

Warto wdrożyć efekt śniegu na stronie WWW nie tylko ze względów wizualnych, ale również marketingowych. Subtelne animacje zwiększają czas przebywania użytkownika na stronie, poprawiają odbiór marki i mogą pozytywnie wpłynąć na współczynnik konwersji. Efekt padającego śniegu można wykorzystać na zdjęciach w nagłówku strony, w sekcjach hero, na grafikach promocyjnych czy w specjalnych kampaniach sezonowych. W dalszej części poradnika pokażemy, jak krok po kroku stworzyć taki efekt w czystym HTML, CSS i JS.

Czy nie lepiej prezetnuje się choinka na poniższym zdjęciu?

Zobacz także

• WordPress utknął w trybie konserwacji? Zobacz, jak szybko to naprawić!
• Twarda Spacja Html
• Triki i sztuczki przy edycji stron HTML CSS
• Najlepsze wtyczki do WordPressa
• Logo Carousel Slaider

Logo Carusel Slider

Jak zrobić slider logotypów za pomocą tylko w HTML + CSS

Zobacz krok po kroku jak zrobić Logo Carusel Slider. Lekki slaider w html, który przesuwa się ciągle z prawej do lewej w pętli. To prostsze niż myślisz. Nie trzeba kupować wtyczek. Wystarczy że przygotujesz grafiki do slaidera, a następnie wkleisz kod podany poniżej na stronie np. do WordPressa (blok „Niestandardowy HTML” + „Dodatkowy CSS”).

Na ekranie pojawi się pasek z logotypami, które będą przesuwały się nieprzerwanie w poziomie (w lewo) w pętli. Ruch będzie płynny, a po najechaniu myszką cała animacja zatrzyma się, umożliwiając przyjrzenie się konkretnemu logo.

W naszym przykładzie Logo Carusel Slider, wszystkie logotypy w stanie domyślnym są wyszarzone dzięki zastosowaniu filtra grayscale(100%) oraz lekko przygaszone przez opacity(0.85), co nadaje im subtelny i spójny wygląd. Gdy użytkownik najedzie kursorem na wybrany logotyp, filtr zmienia się na grayscale(0%), przywracając pełne, naturalne kolory, a przezroczystość znika (opacity(1)), co sprawia, że logo staje się wyraźniejsze. Dodatkowo element lekko się powiększa (scale(1.04)), a wszystkie te zmiany odbywają się płynnie w ciągu 0,2 sekundy dzięki właściwości transition, co daje elegancki i przyjemny efekt wizualny, przyciągający uwagę do aktywnego elementu.

Zaczynamy!

Krok po kroku jak samemu stworzyć slider logotypów

Przygotuj pliki graficzne do slidera

Pliki graficzne najlepiej aby były tych samych rozmiarów – tzn aby szerokość i wysokość w pikselach były dla wszystkich takie same. Ważne aby były lekki i opcjonalnie nie zawierały tła – czyli aby tło było przeźroczyste. Tu sprawdzą się pliki typu PNG lub SVG.

• Przygotuj wszystkie pliki z logotypami w rozdzielczości 320 na 150 pikseli. Pamiętaj aby logotypy były wyśrodkowane i posiadały 5-10 pikseli marginesu od krawędzi. Ten margines przyda się jeżeli będziesz chciał aby logotypy powiększały się gdy najedziesz na nie myszką.
• Rodzaj pliku graficznego może być dowolny np. JPG, PNG lub SVG. Przy czym pliki JPG – nie posiadają przeźroczystości, a pliki svg mogą wymagać instalacji w WordPressie dodatkowej wtyczki (np. SVG Support). Najbardziej funkcjonalnym plikiem przy logotypach jest tu PNG, który zachowuje dobrą rozdzielczość i pozwala na dodanie przeźroczystości co jest bardzo istotne jeżeli chcemy dać jakieś tło pod slaiderem.

Jak wkleić kod slaidera na stronę

Nasz slaider będzie miał styl oznaczony jako .logos1.W WordPressie możesz wkleić kod HTML slajdera na kilka sposobów, a to, które wybierzesz, zależy od tego, gdzie ma się on wyświetlać (np. na konkretnej podstronie, w stopce, w widżecie, w nagłówku). Aby wstawić slaider .logos1 musisz wkleić dwie rzeczy:

• HTML – struktura slajdera
• CSS – jego styl

Wklejenie na konkretnej stronie lub wpisie w edytorze Gutenberg

W edytorze WordPress (Gutenberg):

• Otwórz stronę lub wpis, gdzie chcesz dodać slider.
• Kliknij „+” i wybierz Blok → Niestandardowy HTML i wklej HTML slajdera.
• Następnie wejdź w Kokpit → Wygląd → Personalizuj → Dodatkowy CSS.
• Wklej tam cały kod .logos1 { … } i zapisz zmiany

Wklejenie do szablonu (Elementor, Divi itp.)

W Elementorze:

• Dodaj widget HTML w miejscu, gdzie ma być slider.
• Wklej kod HTML slajdera.
• CSS wklej w Ustawienia → Dostosuj → Dodatkowy CSS lub w Ustawienia strony → CSS.

W Divi:

• Dodaj Moduł → Kod i wklej HTML.
• CSS wklej w na stornie w polu Niestandardowe CSS. Pole to jest znajdziesz: Ustawienia strony  → Zawansowane → Niestandardowe CSS.

Kod html

W poniższym kodzie zmień linki do własnych grafik i opis alt=””.

<div class=”logos1″>
<div class=”logos1-mask”>
<div class=”logos1-track”>

<!– GRUPA A –>

<div class=”logos1-group”>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/adobe-315.png” alt=”Logo 1″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/redbull-315.png” alt=”Logo 2″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/netflix-315.png” alt=”Logo 3″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/orlen-315.png” alt=”Logo 4″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/cola-315.png” alt=”Logo 5″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/marvel-315.png” alt=”Logo 6″ loading=”lazy” /></a></div>
<!– GRUPA B = identyczna kopia A –>
<div class=”logos1-group” aria-hidden=”true”>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/adobe-315.png” alt=”Logo 1″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/redbull-315.png” alt=”Logo 2″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/netflix-315.png” alt=”Logo 3″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/orlen-315.png” alt=”Logo 4″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/cola-315.png” alt=”Logo 5″ loading=”lazy” /></a>
<a href=”#”><img src=”https://uuru.pl/wp-content/uploads/2025/08/marvel-315.png” alt=”Logo 6″ loading=”lazy” /></a>
</div>
</div>
</div>
</div>

Kod CSS

/* USTAWIENIA dla logos1 */
.logos1 {
–gap: clamp(16px, 3vw, 40px); /* odstęp między logotypami */
–duration: 25s; /* ustawienie prędkości przesunięcia logotypów – im większa wartość = wolniej */
}

/* Maska widoku */
.logos1-mask {
overflow: hidden;
width: 100%;
position: relative;
}

/* Tor, który przesuwamy */
.logos1-track {
display: flex;
width: max-content; /* ważne: szerokość = suma zawartości */
will-change: transform;
animation: logos-scroll var(–duration) linear infinite;
}

.logos1-mask:hover .logos1-track { animation-play-state: paused; }
/* zapauzowanie animacji gdzy najedzie się myszką na logotyp */

/* Dwie identyczne grupy */
.logos1-group {
display: flex;
align-items: center;
gap: var(–gap);
flex: 0 0 auto; /* nie pozwól kurczyć */
}

/* Obrazki */
.logos1-group img {
height: clamp(28px, 5vw, 60px);
width: auto;
display: block;
vertical-align: middle;
flex: 0 0 auto;
filter: grayscale(100%) opacity(0.85);
transition: filter .2s ease, transform .2s ease;
}
.logos1-group img:hover {
filter: grayscale(0%) opacity(1);
transform: scale(1.04);
}

/* Styl dla linków w sliderze */
.logos1-group a {
display: flex; /* utrzymuje wymiar logo */
align-items: center;
flex: 0 0 auto; /* nie pozwól na zmianę szerokości */
margin-right: var(–gap); /* dodaje przerwę między grupami */
}

.logos1-group a:hover img {
filter: grayscale(0%) opacity(1);
transform: scale(1.04);
}

/* Animacja: przesuwamy tor o pół jego szerokości (czyli dokładnie jedną grupę) */
@keyframes logos-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.logos1-track { animation: none; }
}

Jak to działa (w skrócie)

W kodzie html wstawiasz identyczny zestaw logotypów dwa razy (A + B). Animacja przesuwa całość o -50%, czyli dokładnie o szerokość pierwszego zestawu – dzięki temu mamy płynny loop bez skoków.

Jak dostosować slaider do swoich potrzeb

• Prędkość: zmień –duration (np. 35s = wolniej, 15s = szybciej).
• Odstępy: zmień –gap.
• Wysokość logotypów: zmień height w .logos1-track img.
• Pauza na hover: usuń regułę animation-play-state: paused; jeśli nie chcesz pauzy.
• Używaj plików SVG tam gdzie możesz, dla PNG/JPG dodaj loading=”lazy”

Praktyczne wskazówki

Minimalna liczba logo

• Technicznie mogą to być nawet 2 loga, ale wtedy przesuw będzie wyglądał ubogo.
• Optymalnie: 5–10 logotypów w jednej grupie.

Zbyt mało logo

• Jeśli loga w grupie A zajmują bardzo mało szerokości ekranu, użytkownik zobaczy tę samą grafikę z grupy B niemal od razu, co psuje efekt.
• Rozwiązanie: dodać więcej logo albo zwiększyć ich wielkość.

Zbyt dużo logo

• Przy np. 15–20 logach jedna pełna pętla będzie trwała długo (zależnie od –duration).
• Jeśli chcesz, żeby każde logo było widoczne przez określony czas (np. ~2 sekundy), trzeba policzyć czas przesuwu względem liczby logo.

Twarda Spacja w HTML

W html twarda spacja jest specjalnym typem spacji, który nie pozwala na przeniesienie tekstu na nową linię. W kodzie HTML twarda spacja jest reprezentowana przez znak encji &nbsp; , co oznacza „non-breaking space” (spacja niełamiąca). Jest często używana w sytuacjach, gdy chcesz, aby dwa elementy tekstowe (np. słowa lub liczby) pozostały na tej samej linii, bez względu na rozmiar ekranu czy inne warunki formatowania. Na przykład w przypadku imienia i nazwiska, lub wartości liczbowej wraz z jednostką (np. 10 kg, 100 zł).

Zobacz do czego służy Twarda Spacja w html, czym się różni od miękkiej spacji oraz jak i gdzie można z niej skorzystać w kodzie html aby poprawić wygląd i układ treści na stronie:

• Co to jest Twarda spacja
• Czym się różni twarda od miękkiej spacji
• Do czego można wykorzystać twardą spację w HTML
• Twarda spacja html jak zrobić
• Przykłady wykorzystania twardej spacja

Twarda Spacja co to jest?

Jaka jest różnica między miękką a twardą spacją

Miękka spacja to standardowa spacja, którą używamy na co dzień, pozwalająca na automatyczne przenoszenie słów w celu zachowania estetyki i czytelności tekstu. Miękka spacja jest domyślnym zachowaniem przeglądarek i edytorów tekstów. Nie wymaga dodatkowego oznaczania i pozwala na naturalne przenoszenie tekstu.

Twarda spacja, inaczej zwana non-breaking space, różni się od zwykłej spacji, nazywanej miękką spacją, tym, że zapobiega przenoszeniu słów na końcu linii. Jest to szczególnie ważne w języku HTML, gdzie zachowanie odpowiedniej struktury i czytelności tekstu jest kluczowe.

Rozróżnienie między twardą a miękką spacją jest kluczowe dla zachowania właściwej struktury i czytelności treści cyfrowych, szczególnie w języku HTML.

Twarda Spacja co to jest?

Jaka jest różnica między miękką a twardą spacją

Miękka spacja to standardowa spacja, którą używamy na co dzień, pozwalająca na automatyczne przenoszenie słów w celu zachowania estetyki i czytelności tekstu. Miękka spacja jest domyślnym zachowaniem przeglądarek i edytorów tekstów. Nie wymaga dodatkowego oznaczania i pozwala na naturalne przenoszenie tekstu.

Twarda spacja, inaczej zwana non-breaking space, różni się od zwykłej spacji, nazywanej miękką spacją, tym, że zapobiega przenoszeniu słów na końcu linii. Jest to szczególnie ważne w języku HTML, gdzie zachowanie odpowiedniej struktury i czytelności tekstu jest kluczowe.

Rozróżnienie między twardą a miękką spacją jest kluczowe dla zachowania właściwej struktury i czytelności treści cyfrowych, szczególnie w języku HTML.

Sposoby wykorzystania twardej spacji w html

Twardą spację wykorzystuje do poprawy stylistyki treści i jej czytelności. Ponadto można ją wykorzystać do wstawienia szybko dodatkowych odstępów w treści bez wykorzystywania określania styli konkretnym znacznikom w treści.

Twarda spacja w html najczęściej służy do

• Scalenia w jeden ciąg znaków: słów w celu zablokowania przełamania treści między wierszami i przeniesienia części z niego do drugiego wiersza
• Scalenia w jeden ciąg znaków: zaimków z poprzedzającym go wyrazem, w celu ściągnięcia całego wyrażenia do następnego wiersza.
• Wstawienia dodatkowego odstępu między wyrazami, znakami lub symbolami w treści.
• Wstawienia interlinii między paragrafami.

Jak wstawić w kodzie html twardą spacje?

W kodzie html twarda spacja ma postać &nbsp; – jest to skrót od angielskiej nazwy: non-breaking space poprzedzony znakiem (and) & i zakończony średnikiem. Jeżeli zapamiętamy, że jest to skrót od angielskiej nazwy, łatwiej będzie nam ją wstawiać później w kodzie. Wiemy już jaką ma postać w kodzie a jak z niej skorzystać? Tu należy pamiętać, że Jeżeli chcemy połączyć dwa wyrazy twardą spacją – wszystkie znaki wyrażenia muszą być zapisane w jednym nieprzerwanym ciągu bez dodatkowych odstępów między wyrazami i twardą spacją.

&nbsp;

Formatowanie tekstu w kolumnach za pomocą twardej spacji

Pierwszy typ wykorzystania twardej spacja, jak już wspomnieliśmy związany z łączeniem wyrazów aby zapobiec ich automatycznemu dzielenia wyrazów w wierszach. Np. gdy na końcu wiersza zostaje jakiś przyimek. Wówczas warto oddzielić go twardą spacją z kolejnym wyrazem – tak aby stanowił ciąg znaków – bez odstępu. Wówczas przeglądarka potraktuje wyrazy jako jeden i przeniesie całość do następnego wiersza.

Łączenie tekstu i liczb

Wartości miar, daty itp. Kiedy nie chcemy aby wyrażenie zostało podzielone na dwa wiersze np. waga: 10 kg, 25 marca 2025 r., godzina 22 : 00. Bardzo źle w tekście będzie wyglądać w momencie kiedy przeglądarka np. na końcu linii w której znajduje się podobne wyrażenie, automatycznie przeniosła lub podzieliła „22 : 00” do drugiego wiersza. W celu uniknięcia takiej możliwości należy zapisać wyrażenie w postaci: godzina&nbsp;22&nbsp;:&nbsp;00

Nazwy własne

Przykładem użycia twardej spacji w HTML może być zapobieganie rozdzieleniu nazwy dwuczłonowej, np. nazwy własne, imię i nazwisko, nazwy firm itp.

Dodatkowy odstęp między znakami lub wyrazami

Niektóre edytory testów w CMSach nie pozwalają wstawić dwóch spacji po sobie i po prostu automatycznie usuwają podwójną spację przy próbie zapisania strony. Jeżeli chcemy zachować podwójny odstęp lub większy, wówczas trzeba użyć „twardej spacji” aby wymusić większy odstęp. Np. aby zwiększyć odstęp od znaków specjalnych. np.:
1.&nbsp;&nbsp;&nbsp;Punkt pierwszy

Dodatkowa interlinia

Dodatkowa interlinia. Jeżeli chcemy szybko wstawić dodatkowy odstęp między wierszami a edytor nie zapisuje naszych zmian ze względu np. specjalne na ustawienia parametrów znaczników html, możemy wówczas spróbować wstawić pusty paragraf między znacznikami wypełniony twardą spacją – która rzecz jasna będzie niewidoczna, ale przeglądarka uwzględni doda taką linię. np.
<p>&nbsp;</p>

Miękka spacja

Miękka spacja to jest to co znamy i używamy na co dzień. To po prostu odstęp między znakami, wyrazami itp. W odróżnieniu od twardej spacji jest przestrzenią. która przy składzie tekstu pozwala na przełamanie tekstu do drugiego wiersza.

Kiedy używa się miękkiej spacji

Wszędzie tam gdzie w trakcie układania tekstu na stronie doduszamy:

• wyjustowanie tekstu – czyli gdy zależy nam na rozmieszczeniu słów w wierszu, aby tworzyły równe krawędzie zarówno z lewej, jak i z prawej strony akapitu. Funkcja justowania automatycznie reguluje odstępy między wyrazami i między literami w celu ujednolicenia szerokości wszystkich wierszy i rozciągnięciu w nim znaków do prawej do lewej krawędzi (oprócz ostatniego wiersza w akapicie)
• podział wyrazów

Edytując strony w html-u można zrobić więcej i dokładniej. Dlatego warto znać podstawy html. Poniżej zamieszczam przykłady często używanych augmentów kodu, przydatnych dla początkujących osób przy edycji treści na stronach.

Link nofollow, Target blank

Podstawowy element używany przy tworzeniu linków zewnętrznych.

nofollow

Ten atrybut jest używany w tagach (linkach). Informuje wyszukiwarki, aby nie śledziły tego linku i nie przekazywały żadnej „mocy SEO” (takiej jak PageRank) na stronę docelową.

Jest używany, gdy link nie powinien wpływać na ranking strony docelowej, np. w przypadku linków sponsorowanych, komentarzy użytkowników, czy też treści generowanych automatycznie.
Argument nofollow – link nie przenosi „siły” strony do adresu docelowego.

target=”_blank”

Ten atrybut również jest używany w tagach . Powoduje, że link otwiera się w nowej karcie lub nowym oknie przeglądarki.

Poprawia wygodę użytkownika, gdy chcemy, aby pozostał na stronie, którą przegląda, a jednocześnie mógł zobaczyć treści z linku.
Argument blank – otwiera łącze w nowej karcie przeglądarki.

Wzór

<a href=”http://motyle-motyle.pl” target=”_blank” rel=”nofollow”>Motyle</a>

Przykład działania: Motyle

Drugie zagnieżdżenie na liście

<ul><li>Pierwszy poziom
<ul><li>Drugi poziom</li></ul>
</li></ul>

Wzór:

• Pierwszy poziom
  • Drugi poziom

Link z zagnieżdżeniem na stronie

Kolejny trik pozwala – po kliknięciu w wybrany link lub przycisk – na przeniesienie do wybranego miejsca na bieżącej lub innej wskazanej stronie.
Aby to wykonać trzeba w miejscu wstawienia linka dodać na końcu adresu url wstawić hashtag i nazwę atrybuty elementów do którego przeniesie link. I po drugie dodać unikalny atrybut do miejsca docelowego aby link mógł znaleźć właściwe miejsce.

<p><a href=”#link1″>Tu link do wskazanego miejsca na stronie</a></p>
<h6><span id=”link1″>Tu wskazanie zagnieżdżenia</span></h6>
Wzór:Tu link do wskazanego miejsca na stronie

Tu wskazanie zagnieżdżenia

Twarda Spacja &nbsp;

&nbsp; – znak specjalany

Twarda spacja ma głównie dwa zastosowania. Po pierwsze niektóre CMSy po prostu usuwają podwójną spację – wówczas trzeba użyć „twardej” aby wymusić większy odstęp. Np. aby zwiększyć odstęp od znaków specjalnych.
Drugie zastosowanie jest związane z łączeniem wyrazów aby zapobiec ich automatycznemu dzielenia wyrazów w wierszach. Np. gdy na końcu wiersza zostaje jakiś przyimek. Wówczas warto oddzielić go twardą spacją z kolejnym wyrazem – tak aby stanowił ciąg znaków – bez odstępu. Wówczas przeglądarka potraktuje wyrazy jako jeden i przeniesie całość do następnego wiersza.

Dowiedz się więcej na stronie: Twarda Spacja

Prosty przycisk w Html

To przykład jak utworzyć szybko prosty przycisk. Tu wstawione są style bezpośrednio w kod, ale oczywiście można dodać klasę do linku i wrzucić je w plik CSS.

Przykład:

Button HTML ⇒

Kod:

<a style=”border: 1px #073375; background-color: blue; padding: 8px 13px; color: white; border-radius: 5px; font-family: Open Sans,Arial,sans-serif;” href=”#” target=”_blank” rel=”noopener”>Button HTML ⇒</a>

Jak wstawić strzałkę do przycisku? Czytaj poniżej.

Wyświetlenie kodu znaku specjalnego

Jak wyświetlić kod znaku specjalnego na stronie? Używając kolejnego znaku specjalnego : )
Np. Aby wyświetlić – &nbsp; (i nie wstawić twardej spacji), trzeba wpisać &amp;nbsp;
gdzie znak & jest zastąpiony znakami &amp;.

Symbole, znaki specjalne html

&#8482;   &trade;   Trade mark sign Znak handlowy ™
&#923;   &Lambda;   Greek capital letter „lambda” Grecka wielka litera „lambda” Λ
&#931;   &Sigma;   Greek capital letter „sigma” Grecka wielka litera „sigma” Σ
&#937;   &Omega;   Greek capital letter „omega” Grecka wielka litera „omega” Ω
&#960;   &pi;   Greek small letter „pi” Grecka mała litera „pi” π
&#8592;   &larr;   Leftwards arrow Strzałka w lewo ←
&#8593;   &uarr; Upwards arrow Strzałka w górę ↑
&#8594; &rarr; Rghtwards arrow Strzałka w prawo →
&#8595; &darr; Downwards arrow Strzałka w dół ↓
&#8596; &harr; Left right arrow (horizontal) Strzałka lewo-prawo ↔
&#8629; &crarr; Downwards arrow with corner leftwards (carriage return) Strzałka w dół z rogiem w lewo (powrót karetki) (w IE6 tylko czcionka Unicode) ↵
&#8656; &lArr; Leftwards double arrow Podwójna strzałka w lewo (w IE6 tylko czcionka Unicode) ⇐
&#8657; &uArr; Upwards double arrow Podwójna strzałka w górę (w IE6 tylko czcionka Unicode) ⇑
&#8658; &rArr; Rightwards double arrow Podwójna strzałka w prawo (nie interpretuje IE6) ⇒
&#8659; &dArr; Downwards double arrow Podwójna strzałka w dół (w IE6 tylko czcionka Unicode) ⇓
&#8660; &hArr;
&#8853; &oplus; Circled plus (direct sum) Plus w kółku (bezpośrednia suma) (nie interpretuje IE6) ⊕
&#8855; &otimes; Circled times (vector product) Iloczyn wektorowy (w IE6 tylko czcionka Unicode) ⊗
&#9001; &lang; Left-pointing angle bracket (bra) Lewy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟨
&#9002; &rang; Right-pointing angle bracket (ket) Prawy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟩
&#187; &raquo; Right angle quote, guillemot right (prawy cudzysłów ostrokątny) »
&#188; &frac14; Fraction – one quarter (ułamek jedna czwarta) ¼
&#189; &frac12; Fraction – one half (ułamek jedna druga) ½
&#190; &frac34; Fraction – three quarters (ułamek trzy czwarte) ¾
&#8218; &sbquo; Single low-9 quotation mark (przecinek) ‚
&#8220; &ldquo; Left double quotation mark “
&#8221; &rdquo; Right double quotation mark (prawy cudzysłów) ”
&#8222; &bdquo; Double low-9 quotation mark „
&#8224; &dagger; Dagger (znak krzyżyka) †
&#8225; &Dagger; Double Dagger (znak podwójnego krzyżyka) ‡
&#8240; &permil; Per mille (thousand) sign (promil) ‰
&#8249; &lsaquo; Single left-pointing angle quotation mark ‹
&#8250; &rsaquo; Single right-pointing angle quotation mark ›
&#8364; &euro; Euro sign (znak Euro) €
&trade; Trademark (znak handlowy) ™
&#169; &copy; Copyright (znak praw autorskich) ©
&#170; &ordf; Feminine ordinal (liczebnik porządkowy żeński) ª
&#171; &laquo; Left angle quote, guillemot left (lewy cudzysłów ostrokątny) «
&#172; &not; Not sign (znak negacji) ¬
&#173; &shy; Soft hyphen (łącznik opcjonalny) ­
&#174; &reg; Registered trademark (zastrzeżony znak towarowy) ®
&#175; &macr; Macron accent kreska górna) ¯
&#176; &deg; Degree sign (znak stopnia) °
&#177; &plusmn; Plus or minus (plus-minus) ±
&#178; &sup2; Superscript two (2 w indeksie górnym) ²
&#179; &sup3; Superscript three (3 w indeksie górnym) ł
&#180; &acute; Acute accent (akcent silny) ´
&#181; &micro; Micro sign (grecka litera mi) µ
&#182; &para; Paragraph sign (znak akapitu) ¶
&#8743; &and; Logical and (wedge) Operator logiczny i (nie interpretuje IE6) ∧
&#8744; &or; Logical or (vee) Operator logiczny lub (nie interpretuje IE6) ∨
&#8734; &infin; Infinity Nieskończoność ∞
&#8727; &lowast; Asterisk operator Operator gwiazdka (w IE6 tylko czcionka Unicode) ∗
&#8730; &radic; Square root (radical sign) Pierwiastek kwadratowy √
&#8776; &asymp; Almost equal to (asymptotic to) …prawie równe… ≈
&#8800; &ne; Not equal to …różne od… ≠
&#8801; &equiv; Identical to …równe tożsamościowo… (identyczne) ≡
&#8804; &le; Less-than or equal to …mniejsze lub równe… ≤
&#8805; &ge; Greater-than or equal to …większe lub równe… ≥
&#8834; &sub; Subset of …jest podzbiorem… (nie interpretuje IE6) ⊂
&#8835; &sup; Superset of …jest zbiorem nadrzędnym dla… (nie interpretuje IE6) ⊃
&#8836; &nsub; Not a subset of …nie jest podzbiorem… (w IE6 tylko czcionka Unicode) ⊄

Kolorowy Tekst – Gradientowe przejście kolorów na tekście

Aby uzyskać efket jak w nagłówku trzeba nadać classę do wybranego elementu.
Np. h4 sytle=”kolorowo”
Nastepęnie w stylach opisać klasę
.kolorowo {
font-size: 25px;
background: -webkit-linear-gradient(left, #0598e5 20%, #00e29c 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
i gotowe

Efekty animacji tekstów

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> Html:<span class=”txt-rotate” data-period=”2000″ data-rotate='[ „Warszawa”, „Paryż”, „Rzym”, „Londyn”, „New York ” ]’></span></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> Script:<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> var TxtRotate = function(el, toRotate, period) {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.toRotate = toRotate;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.el = el;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.loopNum = 0;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.period = parseInt(period, 10) || 2000;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.txt = ”;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.tick();<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.isDeleting = false;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> };</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>TxtRotate.prototype.tick = function() {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> var i = this.loopNum % this.toRotate.length;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> var fullTxt = this.toRotate[i];</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> if (this.isDeleting) {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.txt = fullTxt.substring(0, this.txt.length – 1);<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> } else {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.txt = fullTxt.substring(0, this.txt.length + 1);<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> }</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> this.el.innerHTML = '<span class=”wrap”>’+this.txt+'</span>’;</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> var that = this;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> var delta = 300 – Math.random() * 100;</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> if (this.isDeleting) { delta /= 2; }</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> if (!this.isDeleting && this.txt === fullTxt) {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> delta = this.period;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.isDeleting = true;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> } else if (this.isDeleting && this.txt === ”) {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.isDeleting = false;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> this.loopNum++;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> delta = 500;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> }</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> setTimeout(function() {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> that.tick();<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> }, delta);<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> };</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>window.onload = function() {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> var elements = document.getElementsByClassName(’txt-rotate’);<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute(’data-rotate’); var period = elements[i].getAttribute(’data-period’); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement(„style”); css.type = „text/css”; css.innerHTML = „.txt-rotate > .wrap { border-right: 0.08em solid #666 }”;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> document.body.appendChild(css);<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> };</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p>

Więcej

How to Create (Animated) Text Fills

https://freefrontend.com/css-text-animations/
https://freefrontend.com/css-text-effects/

10 Amazing Animated Text CSS & JavaScript Code Snippets

Inne:
https://inspirationalpixels.com/creating-a-responsive-menu-with-html-css-jquery/

Efekty animacji tekstów

Animacja rotującego tekstu

Przykład działania

<span class=”txt-rotate” data-period=”2000″ data-rotate='[„Warszawa nocą”, „Paryż”, „Wszystkie drogi prowadzą do Rzymu”, „Londyn”, „New York”]’></span>

<script>
class TxtRotate {
constructor(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = ”;
this.isDeleting = false;
this.tick();
}

tick() {
const i = this.loopNum % this.toRotate.length;
const fullTxt = this.toRotate[i];

this.txt = this.isDeleting
? fullTxt.substring(0, this.txt.length – 1)
: fullTxt.substring(0, this.txt.length + 1);

// Używamy textContent zamiast innerHTML (szybciej)
this.el.querySelector(’.wrap’).textContent = this.txt;

let delta = 100 + Math.random() * 100;
if (this.isDeleting) delta /= 2;

if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === ”) {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}

// Zamiast setTimeout: requestAnimationFrame z opóźnieniem
setTimeout(() => requestAnimationFrame(() => this.tick()), delta);
}
}

window.addEventListener(’DOMContentLoaded’, () => {
const elements = document.getElementsByClassName(’txt-rotate’);
for (let el of elements) {
const toRotate = el.getAttribute(’data-rotate’);
const period = el.getAttribute(’data-period’);
if (toRotate) {
el.innerHTML = '<span class=”wrap”></span>’;
new TxtRotate(el, JSON.parse(toRotate), period);
}
}

// CSS tylko raz
const css = document.createElement(’style’);
css.textContent = ’.txt-rotate > .wrap { border-right: 0.08em solid #666; padding-right: 3px; }’;
document.head.appendChild(css);
});
</script>

Krok po kroku jak zrobić Logo Carousel Slider – prosty slider logotypów w HTML i CSS

Dowiedz się, jak samodzielnie stworzyć lekki i płynnie działający slider logotypów bez wtyczek i skomplikowanych narzędzi. Wystarczy prosty kod HTML + CSS, aby na stronie pojawił się pasek z logo przesuwającymi się w nieskończonej pętli. Efekt wygląda profesjonalnie, a dodatkowo animacja zatrzymuje się po najechaniu kursorem, co pozwala skupić uwagę na wybranym logotypie.
Zobacz poradnik na stronie: Logo Carousel Slider