# Animoidut liukuväritaustat videoon ja someen

[Canonical HTML page](https://gradiently.design/fi/guide/animated-gradient-background)

Animoitu liukuväri voi näyttää valolta, joka liikkuu silkin läpi, tai näytönsäästäjältä. Ero on kourallinen suunnittelupäätöksiä, jotka voit tehdä tarkoituksella.

## The short version

- Animoitu liukuväritausta on värien sekoitus, joka liikkuu ajan myötä, yleensä siirtämällä sijaintia, muuttamalla muotoa, vaihtamalla sävyä tai hengittämällä valoa.
- Rauhalliset animoidut liukuvärit muuttavat yhtä tai kahta ominaisuutta hitaasti, ja koko kierros kestää useita sekunteja tai enemmän. Kaiken liikuttaminen kerralla näyttää vilkkaalta.
- Värit, jotka ovat väriympyrällä lähekkäin, animoituvat puhtaasti, kun taas vastavärit voivat kulkea harmaan kautta sekoittuessaan.
- Animoidun liukuvärin päällä olevan tekstin täytyy olla luettavissa silmukan jokaisella hetkellä, myös kirkkaimmilla ja tummimmilla ruuduilla.
- Somea ja videota varten vie animoidut liukuvärit saumattomina silmukoina MP4-muodossa ja still-kuvana paikkoihin, joissa videota ei toisteta.

**Animoitu liukuväritausta** on värien sekoitus, joka liikkuu: se ajelehtii ruudun poikki, muuttaa muotoaan, vaihtaa sävyä tai kirkastuu ja himmenee, yleensä silmukkana sanojen tai tuotteen takana. Parhaat näyttävät valolta, joka liikkuu materiaalin läpi. Heikot näyttävät näytönsäästäjältä. Niitä erottaa toisistaan ei ohjelmisto vaan muutama valinta siitä, mikä liikkuu, kuinka nopeasti ja millä väreillä.

Tämä opas käsittelee suunnittelupuolta videoihin, somejulkaisuihin ja näytöille. Jos rakennat sellaisen koodilla verkkosivulle, katso [animoidut liukuvärit CSS:llä](https://gradiently.design/fi/guide/css-animated-gradient) ja [shader-liukuvärit](https://gradiently.design/fi/guide/shader-gradients).

## Mikä voi liikkua animoidussa liukuvärissä

Jokainen animoitu liukuväri on jokin yhdistelmä viittä muutoksen lajia. Useimmat hyvät käyttävät yhtä, joskus kahta. Kaikkien viiden käyttö kerralla on nopein tapa saada tausta tuntumaan levottomalta.

| Mikä liikkuu | Mitä näet | Tuntuu |
| --- | --- | --- |
| Sijainti | Koko alue liukuu tai ajelehtii | Rauhallinen, avara, elokuvamainen |
| Muoto | Väriläiskät paisuvat, laskostuvat tai virtaavat toisiinsa | Orgaaninen, nestemäinen |
| Sävy | Värit kallistuvat yhteen suuntaan ja takaisin tai kiertävät ympyrää | Kausiluonteinen, leikkisä, nopeana energinen |
| Valo | Kirkkaus hengittää sisään ja ulos | Hiljainen, ylellinen |
| Rake ja hiukkaset | Hieno pinta kimaltaa tai ajelehtii värin päällä | Tuntuva, filmimäinen, tunnelmallinen |

Valitse yksi pääliike. Toinen, paljon hienovaraisempi, voi tukea sitä.

## Kuinka nopeasti animoidun liukuvärin pitäisi liikkua

Nopeus ratkaisee suurimman osan tunnelmasta. Hidas liike näyttää arvokkaalta ja itsevarmalta, nopea liike kiireelliseltä. Sanojen takana olevalle taustalle koko muutoskierros kestää yleensä monta sekuntia, ei yhtä tai kahta. Jos näet liikkeen selvästi otsikkoa lukiessasi, se on todennäköisesti liian nopea.

- 0 s: hämärä: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`
- 3 s: `linear-gradient(160deg, #1e1b4b 0%, #7c3aed 50%, #fb7185 100%)`
- 6 s: lämpimin: `linear-gradient(160deg, #312e81 0%, #a855f7 45%, #fb923c 100%)`
- 12 s: takaisin hämärään: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%)`

Neljä hetkeä yhdestä hitaasta väriliikkeestä. Viimeinen ruutu vastaa ensimmäistä, joten silmukka voi toistua ilman hyppyä.

Liikkeen pitäisi myös kiihtyä ja hidastua sen sijaan, että se tikittäisi yhdellä nopeudella. Muutokset, jotka alkavat ja päättyvät lempeästi, näyttävät luonnollisilta, tasainen nopeus mekaaniselta. [Easing](https://gradiently.design/fi/guide/easing) selittää miksi, esimerkein.

## Värit, jotka animoituvat hyvin

Animaatio näyttää jokaisen liukuvärin välivärin, yhden toisensa jälkeen. Still-liukuväri voi piilottaa tylsän keskikohdan ohueen kaistaan, mutta liikkuva viipyy siinä. Turvallisimmat paletit ovat **analogisia**: väriympyrän naapureita, kuten indigo, violetti ja pinkki tai petrooli, vihreä ja lime. Niiden välivärit pysyvät eloisina.

- Sinisestä oranssiin: harmaa keskikohta: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Magentan kautta: pysyy eloisana: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Petroolista limeen: naapurit: `linear-gradient(90deg, #0f766e 0%, #22c55e 50%, #bef264 100%)`

Suoraan sekoitetut vastavärit kulkevat himmeän harmaan kautta. Väliin sijoitettu pysähdyskohta tai naapurisävyt pitävät värin elossa sen liikkuessa.

Jos tarvitset vastavärejä, ohjaa ne välivärin kautta, kuten keskimmäisessä esimerkissä, tai lue [miksi liukuvärit harmaantuvat keskeltä](https://gradiently.design/fi/guide/muddy-gradients). Pidä yksi väri pohjana, joka ei juuri muutu, yleensä tummin. Se ankkuroi liikkeen ja antaa sanoille vakaan paikan.

## Tekstin luettavuus liikkuvan liukuvärin päällä

Still-liukuvärillä teksti tarvitsee erottua vain yhtä taustaa vasten. Animoidun liukuvärin päällä sen täytyy erottua silmukan jokaista ruutua vasten. Klassinen virhe on otsikko, joka on täysin selvä alussa ja katoaa kahdeksi sekunniksi, kun kirkas väriläiskä ajelehtii sen taakse.

### Vältä

- Kontrastin tarkistaminen vain ensimmäisestä ruudusta
- Kirkkaita väriläiskiä, jotka ajelehtivat sanojen läpi
- Tekstin liikuttaminen taustan lisäksi
- Isoja sävykierroksia leipätekstin kokoisen tekstin takana

### Tee näin

- Selaa silmukka läpi ja tarkista kirkkaimmat ja tummimmat hetket
- Pidä alueen rauhallisin osa sanojen takana
- Pidä sanat paikallaan ja anna värin liikkua
- Säästä voimakkaat värimuutokset lyhyiden otsikoiden taustoille

Jotkin työkalut auttavat tässä. Gradientlyssä suunnitelman takana oleva Mark tietää, missä sanat ovat, ja sen rauhallisin, parhaiten kontrastoiva alue pysyy niiden takana sen liikkuessa. Yleisistä periaatteista lisää artikkelissa [miten laitat tekstin liukuvärin päälle](https://gradiently.design/fi/guide/text-on-gradient).

## Miten suunnittelet animoidun liukuvärin vaihe vaiheelta

1. **Suunnittele still-ruutu** Valitse pohja, kolme tai viisi väriä ja sanojen asettelu. Sen pitäisi toimia still-kuvana ennen kuin se liikkuu.
2. **Valitse yksi pääliike** Ajelehtiminen, virtaus, sävyn vaihtuminen tai hengittävä valo. Sovita se brändiin: rauhalliset brändit ajelehtivat, eloisat voivat virrata tai pyöriä.
3. **Aseta hidas tahti** Aloita hitaammin kuin tuntuu luonnolliselta ja nopeuta vain, jos liikettä on vaikea huomata.
4. **Tee siitä silmukka** Viimeisen ruudun täytyy johtaa takaisin ensimmäiseen. [Saumattomat silmukat](https://gradiently.design/fi/guide/seamless-loop-video) käsittelee miten.
5. **Tarkista jokainen hetki** Selaa silmukka läpi ja pysäytä kirkkaimmissa ja tummimmissa kohdissa sanojen tarkistamiseksi.
6. **Vie paikkaan, jossa se toistetaan** MP4 someen ja verkkosivuille, GIF vain sähköpostiin ja PNG-still kaikkialle muualle. [GIF vs MP4](https://gradiently.design/fi/guide/gif-vs-mp4) selittää valinnan.

Pystysuuntainen tarina, joka ilmoittaa myöhäisistä aukioloista koko talven, liikkuvalla liukuvärillä

Pystysuuntainen tarina on animoidun liukuvärin luonteva koti: lyhyet sanat paikallaan, väri liikkuu takana.

## Missä animoidut liukuväritaustat toimivat parhaiten

- **Tarinat ja reelsit**, joissa video on odotettu. Pidä sanat turva-alueiden sisällä, katso [taustat Reelseihin ja TikTokiin](https://gradiently.design/fi/guide/reels-tiktok-backgrounds).
- **Syötteen julkaisut** ilmoituksille ja tarjouksille, joissa liike erottaa julkaisun muista.
- **Verkkosivujen hero-alueet** lyhyenä äänettömänä videona tai elävänä taustana, still-varakuvalla. [Videotaustat verkkosivuilla](https://gradiently.design/fi/guide/video-background-website) käsittelee yksityiskohdat.
- **Esitys- ja myymäläruudut**, joissa pitkiä, hitaita silmukoita toistetaan tuntikausia.
- **Videoiden introt ja outrot** hiljaisena alueena otsikon takana.

Jos käytät Gradientlyä, jokaisen suunnitelman voi viedä viidestä 30 sekuntiin kestävänä silmukkana: valitse liike, kuten Ajelehdi, Virtaa, Hengitä tai Pyöri, tahti, miten väri käyttäytyy ja ajelehtivatko hiukkaset sen päällä. Silmukka tehdään niin, että sen loppu kohtaa sen alun.

## FAQ

### Mikä on animoitu liukuväritausta?

Se on värien sekoitus, joka liikkuu ajan myötä, ajelehtii, virtaa, vaihtaa sävyä tai hengittää valoa, yleensä silmukkana sanojen, tuotteiden tai videon takana.

### Kuinka nopeasti animoidun liukuvärin pitäisi liikkua?

Useimmille taustoille hitaasti. Koko muutoskierroksen pitäisi kestää monta sekuntia, eikä liikettä pitäisi voida seurata mukavasti otsikkoa luettaessa.

### Mitkä värit sopivat parhaiten animoituun liukuväriin?

Naapurisävyt, kuten indigo, violetti ja pinkki, animoituvat puhtaimmin. Vastavärit tarvitsevat väliin välivärin, muuten ne kulkevat harmaan kautta.

### Miten pidän tekstin luettavana animoidulla liukuvärillä?

Tarkista sanat silmukan kirkkaimmilla ja tummimmilla hetkillä, pidä alueen rauhallisin osa niiden takana ja pidä teksti paikallaan.

### Missä muodossa animoitu liukuväri kannattaa viedä?

MP4-muodossa somealustoille ja verkkosivuille. Käytä GIF-muotoa vain siellä, missä videota ei toisteta, kuten sähköpostissa, ja pidä PNG-still varakuvana.