Kuinka suunnittelin animoidun kirjakaupan JavaScriptillä, jQueryllä ja CSS: llä.

Kokeile tämän sivun flex-asettelua saadaksesi hyvän kuvan siitä, kuinka flex toimii.

Kaksi viimeistä opetusohjelmaani käsitteli CSS-verkkoa ja flexiä. Kirjoitin ne, jotta voisin oppia mahdollisuudet ja jakaa havaintoni muiden kanssa. Luoin tämän käyttämällä ruudukkoa, taipua, jqueryä ja 5 tuntia ajasta.

Animaatio, jonka keksin Learning Curve -kirjakaupan sivuston otsikossa. Toki, tämä ei näytä mitään ruudukolta. Mutta se on luova ja hauska IMO.

Tässä sarja yksinkertaisia ​​tekniikoita tuottaa hieman dramaattiset vaikutukset.

Sanon aina, että:

  • Sinun ei tarvitse tietää kaikkea kielestä.
  • Sinun on tiedettävä vain muutama abstrakti tekniikka. Mutta tunnet heidät hyvin.
  • Ota selvää, mikä kyseisen tekniikan käyttötarkoitus on.

Jaotellaan muotoilu erillisiin elementteihin:

Sama animaatio img {näkyvyys: piilotettu} -sovelluksella poistettujen kirjakuvien kanssa ja reunus lisätty kaikkiin elementteihin * {reunus: 1px kiinteä harmaa; }

Löysin tämän ilmaisen pyöräkuvan tekemällä nopean Google Images -haun. Jaoin sen kahteen erilliseen kuvaan ja lisäsin läpinäkyvyyttä. Poistin myös pyörän ja animoin sen erikseen pienemmällä z-indeksillä kehyksen takana.

Tärkeimmät suunnitteluselementit ovat:

  • Käytin flex-kirja-astioita kohdistaaksesi (“kellua”) ne pohjaan.
  • Pyörän liikkuvaa osaa animoitiin käyttämällä jQueryn animaatiofunktiota: $ (“# bike-back”). Animoi ({leveys: bike_position_x});
  • Pyörää pyöritettiin painikkeella $ (“# wheel”). Css ({transformaatio: “kierrä (“ + wheel_degree + ”deg)”});

Näiden kolmen idean avulla voit luoda niin monia erilaisia ​​tehosteita. Verkkosuunnittelussa suurin osa tekemistäsi animaatioista on joko liikuttaa kohdetta 2 ulottuvuudessa tai kiertää sitä. Paljon kuin 2D-videopelit.

Lähdekoodi

En halua pilata tämän opetusohjelman luettavuutta HTML- ja CSS-lähdekoodilla. Mutta tässä on JavaScript, joka tekee animaatiot: