ANIMOWANE TŁA TEKSTOWE W RUCHU

Animowane tło tekstowe zamienia zwykły pas w żywe tło. Ściana ruchu układa Twoją własną typografię albo Twoje zdjęcia w ruchome pole za treścią, z ponad dwudziestoma rodzajami ruchu ustawianymi z panelu i bez kodu.

Więcej niż tło

Większość teł stoi w miejscu: kolor, zdjęcie, gradient. 

Przewijający się nagłówek, bez renderowania

Tryb przewijania to pasek marquee: rzędy tekstu suną na boki w pętli, klasyczne ruchome tło tekstowe. Większość ludzi buduje marquee animacją CSS albo fragmentem kodu z nieskończenie przewijanym tekstem skopiowanym z codepen, a potem utrzymuje go ręcznie. W kreatorze stron Instinctor Ściana ruchu to ustawienie dowolnej sekcji, więc to animowane tło tekstowe działa na żywo za Twoją treścią, bez CSS do utrzymania i bez niczego do instalowania.

Ruchome tło, bez kodu

Drift zamienia ścianę w powolny pionowy pasek: tekst pełznie w górę w pętli, spokojniejsze ruchome tło tekstowe dla sekcji, która ma oddychać, a nie krzyczeć. Tam, gdzie zwykle ręcznie pisałbyś animację CSS z klatkami kluczowymi albo dodawał widżet z przewijanym tekstem, tutaj jest jeden suwak prędkości. Animowane tło tekstowe leży za Twoim tekstem, ustawiane z panelu, i działa dalej po aktualizacji, bo nie ma fragmentu kodu, który mógłby się zepsuć.

Twoja praca, ciągle się poruszająca

Ta sama ściana wyświetla Twoje zdjęcia zamiast liter: ruchome tło z Twoich własnych realizacji. To właśnie ludzie mają na myśli, mówiąc o animowanym albo ruchomym tle sekcji, zwykle budowanym wtyczką pokazu slajdów, pętlą wideo albo blokiem CSS. W kreatorze stron Instinctor to jedno ustawienie: wskaż Ścianie ruchu swoje zdjęcia, a ruchome tło płynie za Twoim tekstem, bez pliku wideo i bez wtyczki.

Warstwowa głębia, bez projektanta

Warstwowe tło tekstowe, w którym litery nakładają się i przesuwają w głąb. Takie efekty to zwykle sterta trybów mieszania CSS i z-index albo animowane tło wklejone z codepen z nadzieją, że przetrwa kolejną edycję. W Ścianie ruchu to jedna opcja sekcji, więc animowane tło tekstowe jest częścią strony, a nie doklejonym skryptem, a słowa pozostają prawdziwym, indeksowalnym tekstem.

Słowo bez tonu

Ruch, który zatrzymuje scroll

Lanes to ukośny pasek marquee: rzędy przechylają się i pędzą w naprzemiennych kierunkach. To ruchome tło tekstowe, jakiego ludzie szukają pod hasłem marquee text css albo efekt nieskończenie przewijanego tekstu, a potem przebudowują przy każdej aktualizacji motywu. W Instinctor to jeden ruch Ściany ruchu, ustawiany w dowolnej sekcji, więc animowane tło tekstowe pozostaje szybkie i czytelne, bez JavaScriptu i bez wtyczki z przewijanym tekstem do utrzymywania.

Twoje portfolio, pędzące obok

W trybie zdjęć pasy przepuszczają Twoje zdjęcia po skosie: ruchome tło ze zdjęć zamiast z tekstu. Zrobienie tego z paskiem obrazów zwykle oznacza wtyczkę karuzeli albo ręcznie budowaną animację CSS. W Ścianie ruchu to jeden ruch wskazujący Twoją bibliotekę zdjęć, więc animowane tło jest ustawieniem sekcji, pozostaje lekkie i pokazuje Twoje prawdziwe realizacje, a nie stockowe wypełniacze.

Wygląda jak z profesjonalnego studia

Zoom tworzy nieskończone nurkowanie: ściana powiększa się i przenika sama w siebie, dając ruchome tło tekstowe, które przypomina spadanie do przodu. Ręcznie oznacza to nakładane transformacje CSS albo animowane tło z dema na codepen. Tutaj to jedno ustawienie Ściany ruchu w sekcji, więc animowane tło tekstowe renderuje się na żywo w przeglądarce, nie obciąża szybkości strony i nie wymaga kodu do utrzymania.

Zanurz się we własnych realizacjach

Zoom w trybie zdjęć nurkuje bez końca przez Twoje zdjęcia: animowane tło, które przypomina wpadanie w Twoje realizacje. Takie ruchome tło ludzie budują z zapętlonego wideo albo nakładanych transformacji CSS. Tutaj to jedno ustawienie Ściany ruchu: wybierz zdjęcia, wybierz zoom, a ruchome tło działa na żywo za sekcją, bez wideo do hostowania i bez wtyczki do utrzymania.

Tekst 3D bez After Effects

Tilt przechyla całą ścianę w płytką płaszczyznę 3D: ruchome tło tekstowe z poczuciem głębi. Zwykle to transformacja CSS 3D dostrajana ręcznie albo płatny widżet animowanego tła. W Ścianie ruchu to jedna opcja dowolnej sekcji, więc animowane tło tekstowe jest częścią kreatora stron, a nie fragmentem kodu, a litery za Twoją treścią pozostają tekstem, który można zaznaczać i indeksować.

Twoje zdjęcia przechylone w 3D

Przechylona galeria: Twoje zdjęcia pochylają się w płytkiej płaszczyźnie 3D i dryfują, ruchome tło z głębią. Normalnie wymagałoby to transformacji CSS 3D i skryptu pokazu slajdów albo płatnego widżetu animowanego tła. W Ścianie ruchu to jedna opcja sekcji, więc animowane tło ze zdjęć jest częścią kreatora stron, renderuje się na żywo i pokazuje Twoje realizacje za tekstem.

Pasek na żywo wbudowany

Bęben obraca tekst wokół osi poziomej: ruchome tło tekstowe, które kręci się jak tablica z przewijanymi informacjami. Ludzie sięgają do tego po generator marquee, baner z przewijanym tekstem albo animację CSS 3D. W Instinctor Ściana ruchu robi to jako ustawienie sekcji: wpisz słowa, wybierz bęben, ustaw prędkość, a animowane tło tekstowe działa na żywo, bez niczego do eksportowania i bez wtyczki do aktualizowania.

Twoje realizacje na obracającej się rolce

Bęben obraca Twoje zdjęcia wokół osi poziomej: ruchome tło, które kręci się jak rolka filmu. Odtworzenie tego wymaga animacji CSS 3D i pokazu slajdów albo eksportu wideo. W Ścianie ruchu to jedno ustawienie sekcji: wybierz zdjęcia, wybierz bęben, ustaw prędkość, a ruchome tło odtwarza się na żywo, bez pliku wideo i bez wtyczki do aktualizowania.

Dwukolorowy ruch jednym kliknięciem

Cross przeprowadza dwa paski marquee w poprzek siebie, w dwóch kolorach: bardziej intensywne ruchome tło tekstowe dla głośniejszej sekcji. Budowane ręcznie to dwie nałożone animacje CSS z ręcznie dobranymi kolorami albo kupiony i osadzony baner z przewijanym tekstem. W Ścianie ruchu to jeden ruch z drugim kolorem, ustawiany w sekcji, więc animowane tło tekstowe pozostaje jedną lekką, indeksowalną warstwą zamiast stosu widżetów.

Stickers rozrzuca obrócone etykiety, które dryfują po kadrze: zabawne ruchome tło tekstowe. Takie rzeczy ludzie składają z absolutnie pozycjonowanego CSS albo z banera z Canvy wyeksportowanego jako obraz. W Ścianie ruchu to jedna opcja sekcji i pozostaje żywym tekstem, więc animowane tło to prawdziwe, indeksowalne słowa, a nie spłaszczona grafika, której wyszukiwarki nie odczytają.

Twoja praca, rozrzucona i żywa

Stickers rozrzuca Twoje zdjęcia jako dryfujące, obrócone kafelki: zabawne ruchome tło. Zwykle to absolutnie pozycjonowany kolaż CSS albo eksport z Canvy zapisany jako jeden płaski obraz. W Ścianie ruchu pozostaje żywą warstwą osobnych zdjęć, więc tło aktualizuje się, gdy podmienisz zdjęcie, bez spłaszczonej grafiki i bez wtyczki, a ustawiasz je z panelu sekcji.

Twoje prace w ramie strony

Odważna ściana, bez kodu

Bricks układa tekst w gęsty mur kafelków, co drugi w odwróconych kolorach, i przesuwa całe pole. To najodważniejsze ruchome tło tekstowe w zestawie, takie, jakiego ludzie szukają na codepen. W kreatorze stron Instinctor to jeden ruch z kontrastującym drugim kolorem, ustawiany w sekcji, więc animowane tło tekstowe jest częścią strony i nigdy nie wymaga aktualizacji wtyczki.

Hipnotyczny ruch jednym kliknięciem

Vortex zakręca pole do środka: ruchome tło tekstowe, które przyciąga wzrok do punktu centralnego. Odtworzenie go wymaga własnego CSS albo JavaScriptu i długiego dostrajania albo gotowego fragmentu kodu, który dziedziczysz i którego nie da się łatwo zmienić. W Ścianie ruchu to jedna opcja dowolnej sekcji, więc animowane tło tekstowe jest ustawieniem, które zmieniasz w panelu, a słowa pozostają żywym, czytelnym tekstem.

Twoje realizacje przyciągają wzrok

Vortex zakręca Twoje zdjęcia do środka: ruchome tło, które przyciąga wzrok do punktu centralnego. Odtworzenie go wymaga WebGL albo dużej ilości własnego JavaScriptu. W Ścianie ruchu to jedna opcja sekcji, więc animowane tło ze zdjęć jest ustawieniem, które zmieniasz w panelu, renderuje się na żywo w przeglądarce i pokazuje Twoje prawdziwe realizacje, a nie stockową pętlę.

Tekstura, bez renderowania

Static zatrzymuje ścianę w miejscu: kafelkowy tekst bez ruchu, gdy chcesz faktury animowanego tła tekstowego, ale spokojnej sekcji. To wzór, który inaczej budowałbyś powtarzanym tłem CSS albo kafelkowanym obrazem. Tutaj to ta sama Ściana ruchu z wyłączonym ruchem, więc tło pozostaje prawdziwymi słowami na stronie, a ruch włączysz z powrotem jednym przełącznikiem.

Twoja praca, przypięta za tym wszystkim

Static w trybie zdjęć przypina Twoje zdjęcia w nieruchomej siatce: tło z fakturą ruchomego tła ze zdjęć, ale w spokojnej sekcji. Inaczej budowałbyś to siatką CSS z obrazami tła. Tutaj to ta sama Ściana ruchu z wyłączonym ruchem, więc Twoje zdjęcia zostają za tekstem, a ruch włączysz z powrotem jednym przełącznikiem.

Perspektywa, bez oprogramowania 3D

Funnel zbiega rzędy do punktu zbiegu: ruchome tło tekstowe z perspektywą. Zwykle to zestaw transformacji CSS albo szkic WebGL z codepen. W Ścianie ruchu to jedna opcja sekcji, więc animowane tło tekstowe jest częścią kreatora stron, renderuje się na żywo, a litery za Twoim tekstem pozostają indeksowalnym tekstem, a nie wtopioną grafiką.

Baner, który nigdy się nie zatrzymuje

Banner przecina sekcję ukośnym pasem ruchomego tekstu, to ukośny kuzyn banera z przewijanym tekstem. Ludzie kupują do tego generator przewijanych banerów albo widżet Elementora. W Instinctor Ściana ruchu robi to jako ustawienie dowolnej sekcji, więc animowane tło tekstowe jest wbudowane, pozostaje szybkie i nigdy nie zależy od zewnętrznej wtyczki, która może się zepsuć przy następnej aktualizacji.

Wygląd druku na żywo na stronie

Overprint nakłada dwa kolory tego samego tekstu z lekkim przesunięciem: ruchome tło tekstowe o drukarskim charakterze risografii. Budowane ręcznie to warstwowy CSS z trybami mieszania; pobrane to animowane tło, którego nie da się łatwo przekolorować. W Ścianie ruchu to jeden ruch z drugim kolorem farby, ustawiany w sekcji, więc animowane tło tekstowe dostroisz w panelu, a pozostaje prawdziwym, indeksowalnym tekstem.

Głębia WebGL, bez WebGL

Coils nawija tekst na pionowe kolumny spiral: rozbudowane ruchome tło tekstowe. To animowane tło, które zwykle powstaje w WebGL na codepen albo jako eksport z After Effects. W kreatorze stron Instinctor to jedna opcja sekcji, renderowana na żywo w przeglądarce, więc animowane tło tekstowe nie obciąża szybkości strony i nie wymaga biblioteki, wtyczki ani kodu do utrzymania.

Tekst na krzywej, bez JavaScriptu

Snake prowadzi wiersz po krętej ścieżce: ruchome tło tekstowe, które wygląda jak pasek marquee podążający za krzywą. Ręcznie oznacza to ścieżki SVG i JavaScript albo efekt przewijanego tekstu z codepen. W Ścianie ruchu to jeden ruch w sekcji, więc animowane tło tekstowe jest ustawieniem, a nie skryptem, a słowa pozostają tekstem, który można zaznaczać i indeksować na stronie.

Tekst po okręgu bez pracy w SVG

Rings układa tekst w koncentrycznych okręgach, które obracają się w przeciwnych kierunkach: okrągła wersja ruchomego tła tekstowego. Odtworzenie tego wymaga SVG textPath i własnej animacji albo skopiowanego animowanego tła, którego nie da się edytować. W Ścianie ruchu to jedna opcja dowolnej sekcji, więc to animowane tło tekstowe jest częścią kreatora stron, renderuje się na żywo, a litery pozostają prawdziwymi, indeksowalnymi słowami.

Miękki ruch, nic do kodowania

Wave lanes prowadzi rzędy po łagodnych sinusoidach: ruchome tło tekstowe łagodniejsze niż prosty pasek marquee. Budowane ręcznie to CSS z klatkami kluczowymi albo szkic w canvas. W Ścianie ruchu to jeden ruch w sekcji, więc animowane tło tekstowe ustawiasz w panelu, strona pozostaje szybka i nie potrzebujesz wtyczki z przewijanym tekstem ani ręcznie pisanej animacji, żeby wszystko działało.

Fala, której nie musiałeś kodować

Wave stack puszcza wędrującą falę przez rzędy tekstu na całą szerokość: falujące ruchome tło tekstowe. To animowane tło, jakiego ludzie szukają jako CSS wave text albo efektu z codepen. W Instinctor to jedna opcja Ściany ruchu w sekcji, więc animowane tło tekstowe renderuje się na żywo, pozostaje lekkie, a litery za Twoją treścią pozostają prawdziwymi, indeksowalnymi słowami, a nie spłaszczonym obrazem.

Litery, które oddychają same z siebie

Weight walk animuje grubość kreski w literach, od cienkiej do grubej i z powrotem: subtelne ruchome tło tekstowe oparte na foncie zmiennym. Kodowane ręcznie to font-variation-settings i klatki kluczowe; kupione to widżet, którego nie dostroisz. W Ścianie ruchu to jeden ruch w sekcji, więc animowane tło tekstowe jest ustawieniem w panelu, a litery pozostają żywym, indeksowalnym tekstem.

Tło, które odsłania kursor

Efekt reflektora niemal całkowicie ukrywa ścianę, a ruchome tło tekstowe rozświetla się tylko tam, gdzie przesuwa się kursor. Budowane ręcznie to maska sterowana JavaScriptem i zdarzeniami myszy. W Ścianie ruchu to jeden przełącznik w sekcji, więc animowane tło tekstowe staje się efektem interaktywnym, który włączasz w panelu, bez kodu i bez wtyczki, a tekst pod spodem pozostaje czytelny.

Każde pokrętło w panelu

Ustawiasz tekst, rozmiar, grubość i prędkość. Jeden kolor czyta się jak szept; dodaj drugi, a tryby dwóch atramentów zderzą je ze sobą celowo. Paralaksa przesuwa ścianę względem kursora, dając głębię, a całość można ukryć na telefonach, gdzie tylko zatłoczyłaby ekran.

Energia, nie dekoracja

Statyczna sekcja prosi czytelnika, żeby sam dostarczył zainteresowanie. Ruchoma ściana dostarcza je za niego: oko łapie dryf, sekcja wydaje się przemyślana, a tekst na pierwszym planie pożycza tę energię, nie krzycząc. Użyta raz, nad nagłówkiem, który to udźwignie, jest najtańszym sposobem, by strona wydawała się wyprodukowana, a nie wrzucona.

Czym jest animowane tło tekstowe?

Animowane tło tekstowe jest dokładnie tym, na co brzmi: tłem zrobionym z ruchomej typografii. Zamiast jednolitego koloru albo nieruchomego zdjęcia, słowo lub krótka fraza są ułożone w kafle na całej sekcji i wprawione w ruch za Twoją treścią, przygaszone dokładnie na tyle, by pozostać tłem. Nadaje zwykłemu pasowi energię, zanim przeczyta się choć jedno słowo tekstu.

Projektanci zwykle budują to ręcznie w CSS albo eksportują jako wideo. Instinctor robi z tego ustawienie: włącz ścianę ruchu dla dowolnej sekcji, wybierz tekst albo własne zdjęcia, wskaż rodzaj ruchu i kolory, a całość renderuje się na żywo na stronie. Ruchome tło to prawdziwy, lekki HTML, więc strona zostaje szybka, a tekst przed nią czytelny i przyjazny wyszukiwarkom.

Animowane tło tekstowe: FAQ

Zobacz, co jeszcze potrafi

Ściana ruchu to jeden z czterdziestu sposobów, w jakie porusza się Impulse. Każdy blok zbudowany jest tak samo.

Twoja praca, przewijająca się obok

Tryb przewijania w wersji ze zdjęciami przesuwa Twoje zdjęcia paskiem marquee: ruchome tło z prawdziwych realizacji. Takie animowane tło ludzie budują zwykle z marquee obrazów, wtyczki pokazu slajdów albo zapętlonego wideo. W Ścianie ruchu to jedno ustawienie sekcji: wskaż swoje zdjęcia, wybierz przewijanie, a ruchome tło działa na żywo za Twoją treścią, bez niczego do hostowania i bez wtyczki do instalowania.