Ábhar
- 01. Cuir tús leis an doiciméad HTML
- 02. Ábhar infheicthe HTML
- 03. Tionscnamh CSS
- 04. Coimeádán beochana
- 05. Tionscnamh beochana
- 06. Beochan isteach
- 07. An beochan a thabhairt chun críche
Dán idirghníomhach álainn dorcha, réidh le soghluaiste é Love Lost le Canada’s Jam3 le fíor-chroí faoi na mothúcháin marthanacha a bhaineann le grá caillte. Tógadh leagan amach an láithreáin ghréasáin ag úsáid HTML5 agus leabharlann GSAP ag cumhacht a beochana, ceann de na gnéithe is suntasaí ó thaobh amhairc de is ea a téacs beoite 3D a thugann filíocht Love Lost chun beatha i ndáiríre.
- Déan éifeachtaí clóghrafaíochta 3D idirghníomhacha
Breathnaíonn sé go hiontach mar ifreann, agus ní deacair é a ionchorprú i do chuid oibre féin chun eispéireas tarraingteach úsáideora a chruthú; seo mar atá sé déanta.
Ar mhaith leat do shuíomh tarraingteach féin a dhéanamh? Bain triail as uirlis tógálaí láithreán gréasáin, agus coinnigh rudaí ag rith go réidh tríd an tseirbhís óstála gréasáin ceart a phiocadh.
01. Cuir tús leis an doiciméad HTML
Is é an chéad chéim ná struchtúr an doiciméid HTML a shainiú. Cuimsíonn sé seo an coimeádán HTML a thionscnaíonn an doiciméad, ina bhfuil na rannáin ceann agus coirp. Cé go n-úsáidtear an chuid ceann go príomha chun an comhad seachtrach CSS a luchtú, stórálfaidh rannán an choirp ábhar an leathanaigh infheicthe a cruthaíodh i gcéim 2.
! DOCTYPE html> html> head> title> Gluaiseacht / teideal Téacs 3D> nasc rel = "stílbhileog" type = "text / css" href = "style.css" /> / head> body> * * * STEP 2 ANSEO / corp> / html>
02. Ábhar infheicthe HTML
Is éard atá san ábhar infheicthe HTML coimeádán earra ina bhfuil an téacs infheicthe. Is í an chuid thábhachtach den choimeádán earra an tréith ‘beochan sonraí’, a ndéanfaidh CSS tagairt dó chun na héifeachtaí amhairc a chur i bhfeidhm. Déantar an téacs taobh istigh den alt ó chlib h1 chun a thaispeáint gurb é an t-ábhar príomhtheideal an leathanaigh.
article data-animate = "bog isteach"> h1> Dia duit ann! / h1> / alt>
03. Tionscnamh CSS
Cruthaigh comhad nua darb ainm ‘style.css’. Sa chéad sraith treoracha leagtar cúlra dubh ar choimeádán HTML agus comhlacht an leathanaigh, chomh maith le gan aon spásáil teorann infheicthe. Socraítear bán freisin mar an dath téacs réamhshocraithe do gach gné linbh ar an leathanach le hoidhreacht; ag seachaint an dath dubh réamhshocraithe ar ábhar a dhéanann téacs is cosúil go bhfuil sé dofheicthe.
html, comhlacht {cúlra: # 000; stuáil: 0; corrlach: 0; dath: #fff; }
04. Coimeádán beochana
Tá stíleanna ar leith curtha i bhfeidhm sa choimeádán ábhair a ndéantar tagairt dó leis an aitreabúid ‘beochan sonraí’. Socraítear a mhéid chun méid iomlán an scáileáin a mheaitseáil ag úsáid aonaid tomhais vw agus vh, chomh maith le bheith rothlaithe beagán. Cuirtear beochan ar a dtugtar ‘moveIn’ i bhfeidhm, a mhairfidh ar feadh 20 soicind agus a athdhéanfaidh gan teorainn.
[data-animate = "bogadh isteach"] {position: coibhneasta; leithead: 100vw; airde: 100vh; teimhneacht: 1; beochan: moveIn 20s gan teorainn; téacs-ailíniú: lár; claochlú: rothlú (20deg); }
05. Tionscnamh beochana
Éilíonn an beochan ‘moveIn’ dá dtagraítear sa chéim roimhe seo sainmhíniú ag baint úsáide as @keyframes. Socraíonn an chéad fhráma ag tosú ag 0% den bheochan an clómhéid réamhshocraithe, suíomh an téacs agus an scáth infheicthe. Ina theannta sin, socraítear an earra gan teimhneacht nialasach ionas go mbeidh sí dofheicthe ar dtús - ie. ar taispeáint as radharc.
@keyframes moveIn {0% {font-size: 1em; ar chlé: 0; teimhneacht: 0; scáth-théacs: aon cheann; } * * * CÉIM 6 ANSEO}
06. Beochan isteach
Cuirtear an chéad fhráma eile ag 10% tríd an beochan. Socraíonn an fráma seo an teimhneacht a bheith infheicthe go hiomlán, agus mar thoradh air sin beochan an téacs de réir a chéile.De bhreis air sin, cuirtear scáthanna iolracha le luachanna dath gorm agus laghdaitheacha chun an doimhneacht 3D a thabhairt don téacs.
10% {teimhneacht: 1; scáth-théacs: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * CÉIM 7 ANSEO
07. An beochan a thabhairt chun críche
Tarlaíonn na frámaí deiridh ag 80% agus ag deireadh an bheochana. Tá siad seo freagrach as méid an chló a mhéadú agus an eilimint a bhogadh i dtreo na láimhe clé. Cuirtear socruithe nua i bhfeidhm freisin chun scáth an téacs a bheochan i dtreo, agus an téacs á chur as radharc ó fhrámaí 80% go 100%.
80% {cló-mhéid: 8em; ar chlé: -8em; teimhneacht: 1; } 100% {cló-mhéid: 10em; ar chlé: -10em; teimhneacht: 0; scáth-théacs: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Nóta: is cuma cén tionscadal a bhfuil tú ag tabhairt faoi, tá sé riachtanach stóráil scamall a bheith in ann déileáil leis (cuideoidh ár dtreoir).
Foilsíodh an t-alt seo ar dtús in eagrán 273 den iris dearadh gréasáin cruthaitheach Web Designer. Ceannaigh eagrán 273 anseo nó liostáil le Dearthóir Gréasáin anseo.
