3 Upeita CSS-animaatiovaikutuksia, jotka tarttuvat käyttäjiisi
Kaunis visuaalinen muotoilu ei riitä enää, moderni muotoilu vaatii suurta vuorovaikutusta todella erottumaan. Animaatiot malleissasi voivat tarjota selkeyttä, suoraa huomiota ja luoda ilahduttavan kokemuksen.
Vuorovaikutusten suunnittelu on jännittävä, mutta kallista. Usein se vie edestakaisin suunnittelijoiden ja kehittäjien välillä animaatioiden ansaitsemiseksi aivan oikein. mutta sen ei tarvitse olla näin.
CSS-siirtymät tarjoavat mahdollisuuden suunnittelijoille, joilla on rajallinen tietämys koodista, parantamaan projektejaan hämmästyttäviä liiketaloudellisia vaikutuksia, jotka käyttävät käyttäjiä kuten koskaan aiemmin.
Aloitetaan jotain yksinkertaista: siirtyminen näytöltä toiseen ...
Yksinkertainen näkymä-liukusäädintä
Voit rakentaa tekstieditorilla ja selaimella testata, mutta mieluummin käyttää työkalua, kuten jsfiddle tai codepen.
Rakenna tällainen perusasettelu:
Tarvitset "näytön" ja sitten "liukusäätimen" ruudussa. Liukusäädin ulottuu näytön reunan ulkopuolelle ja pitää sisällään mockup-kuvia.
Tämän saavuttamiseksi sinun on varmistettava, että lisäät ylivuotoa: piilotettu .screen div.
Sinun CSS: stä tulee jotain tällaista:
.screen {overflow:hidden;width:320px;height:568px;}.slider {position:relative;float:left;height:568px;width:700px;left:0;-webkit-transition:all 0.5s ease-in-out;}.slider img {position:relative;float:left;height:568px;width:320px;}.screen:hover .slider {left:-320px;}CSS: n lopullinen lausuma on se, mikä ohjaa liukusäätimen sijaintia. Se siirtää .slider div: n jäljellä 320px paljastaen toisen kuvan.
Tässä on jsfiddle kaikista koodeista.
Pienellä luovuudella voit todella käyttää tätä yksinkertaista tekniikkaa ja luoda hienoja animaatioita. Asiat todella alkavat saada mielenkiintoista, kun yhdistät vaikutuksia. Esimerkiksi: luin Twitterin "pyyhkäisemällä paljastavan profiilin" mobiilisovelluksestasi käyttäen hyvin samankaltaista "liukusäädintä" -mallia.
3D-muunnokset
Harjaa ylös 3d-muunnokset jos tarvitset, koska ne tarjoavat upean visuaalisen vaikutelman.
Käyttämällä -webkit-transform: ominaisuutta, voimme käsitellä selaimen 3D-tilana ja tehdä joitain animaatioita syvyydellä. iOS7 käyttää erityisesti "yhden tilan" metaforaa natiivissa sovelluksissaan. Myös 3D-muunnokset ovat erittäin hyödyllisiä "pomppien" tai "popping" -animaatioiden luomisessa.
Käytin samaa :hover taktiikka edellisestä esimerkistä ja lisäsi joitain 3D-muunnoksia tämän vaikutuksen luomiseksi:
JQueryn ja JavaScriptin käyttäminen
Tähän mennessä olemme katsoneet vain CSS: tä :hover vaikutuksia animaatioiden tuottamiseen. JQueryn kanssa voimme käyttää click() tapahtumia addClass() ja removeClass() elementtejä. Tämä antaa meille valtavan taipuisuuden tehdä kaikenlaisia hulluja animaatioita, joita haluamme.
Alla minulla on nimetty funktio kaskade , joka soveltaa open luokan jokaiselle 4 valikkokohteelle 0,15 s välein. open class gives the icons luokka antaa kuvakkeet opacity:1; ja left:0; kun he olivat ennen opacity:0; ja left:-50px . Tämä luo leikkisä avausvaikutuksen valikosta. Kokeile itseäsi sisällä jsfiddle.
Tämä viimeinen on melko äärimmäinen esimerkki, mutta se vain näyttää sen, mikä on mahdollista tämän prototyping-järjestelmän avulla:
Vielä kerran, tässä on jsfiddle.
Suunnittelemalla omia yksinkertaisia animaatioitasi säästät itseäsi ja kehitystiimillesi paljon aikaa ja energiaa. CSS: n avulla voit kokeilla animaatioita ja lähettää insinöörit eläväksi, hengittäviksi, liikkuviksi esimerkkeiksi. Kaikki se, joka tuo teidän mokit elämään, on hieman koodia.