Zwiększ wygodę użytkownika dzięki ładowaniu animacji tekstowych CSS

Kiedy witryna działa z opóźnieniem, użytkownicy czują się sfrustrowani i mogą ją opuścić. Dobrze zaprojektowana animacja ładowania tekstu CSS utrzymuje ich zaangażowanie, wzmacniając Twoją markę i zamieniając bezczynne chwile w pozytywne doświadczenia.

Ten przewodnik pokazuje, jak zbudować elegancką animację ładowania przy użyciu zwykłego kodu HTML i CSS. Jeśli wolisz edytor wizualny, omówimy również alternatywę Filmora.

Zanurzmy się!

Spis treści

1. Co to jest animacja ładowania tekstu?
2. Dlaczego CSS jest idealny do ładowania animacji
3. Krok po kroku:tworzenie animacji ładowania za pomocą CSS
4. Zaawansowane techniki CSS do animacji tekstu
5. Filmora kontra CSS:wybór odpowiedniego narzędzia
6. Najlepsze przykłady ładowania animacji tekstowych
7. Wniosek

1. Co to jest animacja ładowania tekstu?

Animacja ładowania tekstu wyświetla słowa — często „Ładowanie” lub „Proszę czekać” — których styl lub ruch zmieniają się podczas ładowania zawartości. Sygnalizuje użytkownikom, że ich żądanie jest w toku, skracając postrzegany czas oczekiwania.

Jak to działa?

W istocie animacja ładowania opiera się na trzech warstwach:

1. HTML udostępnia element tekstowy.
2. CSS dyktuje zmiany wizualne – kolor, ruch lub przezroczystość – za pomocą @keyframes i właściwości przejścia.
3. JavaScript może dodawać bardziej złożone interakcje, takie jak wstrzymywanie, gdy strona jest bezczynna.

2. Dlaczego CSS jest idealny do ładowania animacji

CSS jest lekki, działa w wielu przeglądarkach i działa całkowicie po stronie klienta — nie jest wymagane obciążenie serwera ani dodatkowe skrypty. Umożliwia programistom tworzenie animacji, które są łatwe w utrzymaniu i można je dostosowywać na bieżąco.

Tworzenie animacji

Poniżej znajduje się praktyczny przykład:obracający się okrąg w połączeniu z sekwencyjnie pojawiającym się tekstem.

Struktura HTML

<div class='loading-container'>
  <div class='loading-circle'></div>
  <div class='loading-text'>
    <span>L</span><span>o</span><span>a</span><span>d</span><span>i</span><span>n</span><span>g</span><span>.</span><span>.</span><span>.</span>
  </div>
</div>

Styl CSS

body{font-family:'Nunito Sans',sans-serif;background:#f0f0f0;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}
.loading-container{display:flex;align-items:center}
.loading-circle{width:50px;height:50px;border-radius:50%;border:5px solid #ccc;border-top-color:#9b59b6;animation:spin 1s linear infinite;margin-right:20px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:36px;color:#9b59b6}
.loading-text span{opacity:0;transform:translateY(20px);animation:fadeInUp 1s ease-in-out forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
.loading-text span:nth-child(1){animation-delay:.2s}
.loading-text span:nth-child(2){animation-delay:.4s}
.loading-text span:nth-child(3){animation-delay:.6s}
.loading-text span:nth-child(4){animation-delay:.8s}
.loading-text span:nth-child(5){animation-delay:1s}
.loading-text span:nth-child(6){animation-delay:1.2s}
.loading-text span:nth-child(7){animation-delay:1.4s}
.loading-text span:nth-child(8){animation-delay:1.6s}
.loading-text span:nth-child(9){animation-delay:1.8s}
.loading-text span:nth-child(10){animation-delay:2s}

Dostosowywanie animacji

• Tekst: Edytuj <span> treść żądanej wiadomości.
• Kolory: Zaktualizuj background , border-top-color i color wartości.
• Czcionka: Zamień adres URL czcionki Google i dostosuj font-family .
• Prędkość i opóźnienie: Zmień animation czas trwania w okręgu i animation-delay dla każdego span .

Zaawansowane techniki CSS do animacji tekstu

Ulepsz swój moduł wstępnego ładowania za pomocą:

1. Podstawowe zanikanie, przesuwanie i odbijanie.
2. Przejścia 2D zapewniające czysty wygląd.
3. Przekształcenia 3D pod kątem głębi.
4. Ruchoma grafika łącząca tekst i kształty.
5. Efekty poklatkowe zapewniające wrażenie rękodzieła.

3. Filmora:wizualna alternatywa

Filmora oferuje bibliotekę gotowych szablonów tekstu ładującego, umożliwiającą projektantom tworzenie dopracowanych animacji bez kodowania. Jest to szczególnie przydatne dla osób niebędących programistami lub gdy wymagana jest animacja wideo.

Kluczowe funkcje

• Rozbudowana biblioteka animacji:zanikanie, maszyna do pisania, odbijanie itp.
• Niestandardowe czcionki i palety kolorów.
• Ścieżki animacji i ścieżki ruchu.
• Tekst sterowany dźwiękiem dla zsynchronizowanych efektów.

Filmora kontra CSS

Użyj CSS, jeśli potrzebujesz lekkiego, w pełni responsywnego tekstu na stronie internetowej. Wybierz Filmorę, aby uzyskać bogatsze animacje wideo lub jeśli potrzebujesz szybkiego rozwiązania opartego na szablonach.

Jak utworzyć animację ładowania tekstu w Filmorze

1. Zainstaluj i otwórz Filmorę.
2. Wyszukaj „ładowanie” w bibliotece tytułów.
3. Wybierz szablon i przeciągnij go na oś czasu.
4. Dostosuj tekst, czcionkę, kolor i czas za pomocą lewego panelu.
5. Wyświetl podgląd, aby upewnić się, że jest zgodny z projektem.
6. Eksportuj w preferowanym formacie i osadzaj w swoim projekcie.

Zaawansowana edycja tekstu w Filmorze

• Dynamiczne animacje i ponad 10 000 gotowych ustawień.
• Efekty wypełnienia, konturu i cienia.
• Dostosowywanie tła.
• Zamiana mowy na tekst w 26 językach.

4. Najlepsze przykłady ładowania animacji tekstowych

Okno ładowania animacji tekstu dla filmów

Ładowanie tekstu za pomocą paska ładowania

Ładowanie tekstu z odliczaniem

Wniosek

Niezależnie od tego, czy wybierzesz precyzyjną kontrolę CSS, czy kreatywną elastyczność Filmory, dobrze wykonana animacja ładowania tekstu może przekształcić frustrującą pauzę w markowy, wciągający moment dla Twoich użytkowników.