Nilalaman
- 01. Rollover na epekto ng teksto
- 02. Lumikha ng CSS
- 03. Iposisyon ang salita
- 04. Paitaas at paulit-ulit
- 05. Pag-upo pababa
- 06. Awtomatiko para sa mga tao
- 07. Magdagdag ng mga alternating klase
Ang mga link sa Rollover ay mahusay na paraan upang makuha ang pansin ng isang gumagamit, lalo na kung gumawa sila ng isang bagay na hindi karaniwan o orihinal. Ang Middle Child ay may mahusay na epekto, bihirang makita sa ibang lugar, na kinukuha ang bawat titik at pinaghahati-hiwalay ang mga ito sa animasidad, na sumisipa kapag ang bisita ay umikot sa salita. Nakakatulong ang animasyon na maihatid ang mapaglarong karakter ng brand ng sandwich.
Sa artikulong ito, ipinapakita namin sa iyo kung paano muling likhain ang epekto sa iyong site. Para sa higit pang inspirasyon, tingnan ang aming gabay sa pinakamahusay na mga halimbawa ng animasyon ng CSS (na may mga tagubilin sa kung paano i-code ang mga ito). Para sa isang bagay na medyo kakaiba, subukan ang isang nangungunang tagabuo ng website o ang aming pumili ng pinakamahusay na cloud storage. At kung ginagawa mong mas kumplikado ang iyong site, tiyaking nasa tamang punto ang iyong web hosting.
01. Rollover na epekto ng teksto
Ang isa sa mahusay na mga epekto ng teksto sa website ng Middle Child ay para sa mga rollover effects sa menu, kung saan nahihiwalay ang mga titik sa teksto at bahagyang paikutin. Simulan ito sa ilang simpleng mga HTML tag.
div> div> Almusal / div> / div>
02. Lumikha ng CSS
Gumamit ng isang hiwalay na CSS file o mga style tag upang idagdag ang mga sumusunod na panuntunan sa CSS at gawing punan ang pahina ang buong sukat ng browser sa pamamagitan ng pagtiyak na magagamit ng katawan at ng balot ang buong taas na magagamit.
katawan {lapad: 100%; taas: 100%; margin: 0; padding: 0; } .wrapper {display: grid; taas: 100%; }
03. Iposisyon ang salita
Ang salita class center ang salita sa grid. Anumang teksto na ibinigay ang salita ang klase ay maaaring mailapat ito. Ang pataas ang klase ay ilalapat sa bawat iba pang mga titik at ang mga ito ay ilipat paitaas.
.word {font-size: 3em; margin: auto auto; } .word .up {display: inline-block; ibahin ang anyo: translate3d (0px, 0px, 0px) paikutin (0deg); paglipat: lahat ng 0.5s madali-sa-labas; }
04. Paitaas at paulit-ulit
Ngayon ang pababa nagbabahagi ang klase ng katulad na mga setting sa pataas ngunit ang hover ay nagpapakita ng paggalaw paitaas para sa pataas gumulong. Paitaas din ay pinaikot nang bahagya upang mapahusay ang hitsura.
.word .down {display: inline-block; ibahin ang anyo: translate3d (0px, 0px, 0px) paikutin (0deg); paglipat: lahat ng 0.5s madali-sa-out; } .word: hover .up {transform: translate3d (0px, -8px, 0px) paikutin (12deg); kulay: # 058b05}
05. Pag-upo pababa
Kapag ang gumagamit ay nag-hover sa teksto, ibababa ng pababa ng klase ang teksto pababa. Mamaya sa JavaScript ang teksto ay nahahati sa magkakahiwalay na mga spans na may mga klase na awtomatikong idinagdag sa mga kahaliling spans.
.word: hover .down {transform: translate3d (0px, 8px, 0px) paikutin (-12deg); kulay: # 058b05; }
06. Awtomatiko para sa mga tao
Ito ay isang bit ng isang abala upang ilagay ang bawat titik sa alternating spans na may iba't ibang mga klase, kaya isasaayos namin ang proseso sa pamamagitan ng pagkuha ng JavaScript upang tanungin ang tagapili at kunin ang bawat titik. Narito ang str Kinukuha ng variable ang kasalukuyang letra habang nag-loop sa pamamagitan ng teksto.
script> var element = document.querySelectorAll (’.word’); para sa (var i = 0, l = element.length; i l; i ++) {var str = element [i] .textContent; mga elemento [i] .innerHTML = ’’;
07. Magdagdag ng mga alternating klase
Ngayon ang isa pang loop ay naglalagay ng bawat titik sa sarili nitong elemento ng span at nagdaragdag ng alinman sa pataas o pababa klase sa spans. Kung titingnan mo ito sa browser makikita mo ang teksto na nahahati sa bawat titik pataas at pababa, habang umiikot nang bahagya.
Maaari mong makita ang epekto sa pagkilos sa website ng Middle Child.
para sa (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); mga elemento [i] .appendChild (spn); spn.textContent = str [j]; hayaan ang pos = (j% 2)? 'taas baba'; spn.classList.add (pos); }} / script>
Ang artikulong ito ay orihinal na na-publish sa magazine ng disenyo ng malikhaing web Taga-disenyo ng web.Bumili ng isyu 286 o mag-subscribe.
