Sisältö
- 01. Tekstinvaihtotehoste
- 02. Luo CSS
- 03. Sijoita sana
- 04. Ylös ja yli
- 05. Leijuminen alaspäin
- 06. Automaattinen ihmisille
- 07. Lisää vuorotellen luokkia
Siirtolinkit ovat loistava tapa herättää käyttäjän huomio, varsinkin jos he tekevät jotain epätavallista tai omaperäistä. Keskilapsella on suuri, harvoin muualla nähty vaikutus, joka sieppaa jokaisen kirjaimen ja jakaa ne erilleen animaatiolla, joka käynnistyy, kun kävijä leijuu sanan päälle. Animaatio auttaa välittämään voileipäbrändin leikkisän luonteen.
Tässä artikkelissa näytämme, miten voit luoda vaikutuksen sivustoosi. Saat lisää inspiraatiota tutustumalla parhaiden CSS-animaatioesimerkkien oppaasemme (ohjeet niiden koodaamiseen). Jos haluat jotain erilaista, kokeile suosituinta verkkosivustojen rakennuttajaa tai valitsemamme parasta pilvitallennustilaa. Ja jos teet sivustostasi monimutkaisemman, varmista, että verkkopalvelusi on oikein.
01. Tekstinvaihtotehoste
Yksi suurimmista tekstivaikutuksista Middle Child -sivustolla on valikon vieritysvaikutukset, joissa kirjaimet jakautuvat tekstissä ja pyörivät hieman. Aloita tämä yksinkertaisilla HTML-tunnisteilla.
div> div> Aamiainen / div> / div>
02. Luo CSS
Käytä erillistä CSS-tiedostoa tai tyylitunnisteita lisätäksesi seuraavat CSS-säännöt ja saat sivun täyttämään selaimen täysikokoisen varmistamalla, että runko ja kääre ovat käytettävissä koko korkeudella.
runko {leveys: 100%; korkeus: 100%; marginaali: 0; pehmuste: 0; } .wrapper {display: ruudukko; korkeus: 100%; }
03. Sijoita sana
sana luokka keskittää sanan ruudukkoon. Mikä tahansa teksti, jolle annetaan sana luokassa voi soveltaa tätä. ylös luokkaa sovelletaan kaikkiin muihin kirjeisiin, ja nämä siirtyvät ylöspäin.
.word {font-size: 3em; marginaali: auto auto; } .sana .up {näyttö: inline-block; muunnos: translate3d (0px, 0px, 0px) kiertää (0deg); siirtyminen: kaikki 0,5 sekunnin helppo sisään-ulos; }
04. Ylös ja yli
Nyt alas luokka jakaa hyvin samanlaiset asetukset kuin ylös mutta leijuva osoittaa liikkeen ylöspäin ylös kierähdä. Myös ylöspäin käännetään hieman ulkonäön parantamiseksi.
.word .down {display: inline-block; muuntaa: kääntää3d (0px, 0px, 0px) kiertää (0deg); siirtyminen: kaikki 0,5 sekunnin helppo sisään-ulos; } .sana: vie hiiri .up {muunna: translate3d (0px, -8px, 0px) rotate (12deg); väri: # 058b05}
05. Leijuminen alaspäin
Kun käyttäjä vie hiiren tekstin päälle, alaluokka siirtää tekstiä alaspäin. Myöhemmin JavaScriptissä teksti jaetaan erillisiksi alueiksi luokkien kanssa, jotka lisätään automaattisesti vaihtoehtoisiin alueisiin.
.sana: vie hiiri .down {muunna: translate3d (0px, 8px, 0px) kiertää (-12deg); väri: # 058b05; }
06. Automaattinen ihmisille
Se on vähän vaivaa, että jokainen kirjain on laitettava vuorotellen eri luokkiin, joten automatisoimme prosessin saamalla JavaScriptin kyselemään valitsinta ja ottamaan jokaisen kirjaimen. Tässä str muuttuja tarttuu nykyiseen kirjaimeen, kun se selaa tekstiä.
script> var elements = document.querySelectorAll (’.word’); for (var i = 0, l = elementit.pituus; i l; i ++) {var str = elementit [i] .textContent; elementit [i] .innerHTML = ’’;
07. Lisää vuorotellen luokkia
Nyt toinen silmukka sijoittaa jokaisen kirjaimen omaan span-elementtiinsä ja lisää joko ylös tai alas luokan jännevälit. Jos tarkastelet tätä selaimessa, näet tekstin jaettuna jokaisella kirjaimella ylös ja alas kiertäen hieman.
Voit nähdä vaikutuksen toiminnassa Middle Child -sivustolla.
for (var j = 0, ll = str.pituus; j ll; j ++) {var spn = document.createElement (’span’); elementit [i] .appendChild (spn); spn.textContent = str [j]; anna pos = (j% 2)? 'ylös alas'; spn.clList.add (pos); }} / script>
Tämä artikkeli julkaistiin alun perin luovassa verkkosivujen lehdessä Nettisivujen suunnittelija.Osta numero 286 tai tilaa.
