Gagnvirk hönnun

Hvernig á að búa til Scrollable Splash Screen með CSS3 og JQuery

Frábær leið til að ná athygli gesta á vefsvæðið þitt er "skvetta skjár" eða "innrautt skjár". Hins vegar er það mjög einfalt að gera árangursríkan einföld ástæða: skvettaskjár pirra auðveldlega notendur.

Splash skjár getur virkað ef þau birtast fljótlega og eru auðveldlega aðgengilegar. Þeir geta verið sjónrænt sláandi og falleg og gera notandann kleift að fletta til að læra meira. Þessi innblásturstíll vinnur mjög vel á blaðsíðum á einni síðu. Eða 'borði stíl' vefhönnunar sem hefur komið í tísku með íbúð hönnun stefna. Það getur líka verið mjög gagnlegt að gera fallega útlit "bakgrunnsvideo" innblásturstíll sem einnig er allt í reiði í augnablikinu.

Það sem ég vil sýna þér í dag er undirstöðuaðferð til þess að ná þessum áhrifum, sem þú getur breytt auðveldlega til að gera fallegt útlit fyrir vefupplifun.

Ef þú vilt sjá hvað við erum að byggja, þá er það kynningu hér. Og þú getur hlaða niður öllum upprunalegum skrám hér.

The markup

Við ætlum að reyna að halda merkinu fyrir þetta mjög einfalt. Þannig getur það í raun verið hrint í framkvæmd á fyrirliggjandi vefsvæðum auk nýrra verkefna.

Svo í grundvallaratriðum það sem við viljum að gera er tveir deildir. Einn með bekknum af skvetta og annar með bekknum umbúðir . (The umbúðir bekknum gæti þegar verið til á einhvern hátt fyrir þig ef þú ert að innleiða þetta á fyrirliggjandi vefsvæði, svo þú gætir þurft að breyta því heiti).

Það er það. Það er allt sem við þurfum semantically. En augljóslega munum við bæta við einhverjum dummy efni og titlum þannig að við höfum eitthvað að líta á í kynningu okkar. Við þurfum einnig einhvers konar ör til að bæta við í skv. Skjár til að sýna notandanum að hann geti flett niður (þar sem þetta mun vera aðferð okkar til að láta innra skjáinn hverfa og koma í aðalatriðið).

Svo hér er einfalt merking allt að fara inn í líkama okkar tag: 

  
SPLASH SCREEN TITLE
  Page Titill
  Þú ert sem stendur ekki búin / nn að innskrá þig. Þú ert ekki innskráð / ur.  Dolor, velta sapiente framundan tíma sem er að minnsta kosti í vinnunni, og það er ekki hægt að nota það sem er til staðar á nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero parolatur mollitia eveniet molestias debitis quia!  Natus, lágmark, villur, áhættuþáttur sem fylgir nauðsynlegum nauðsynlegum aðferðum til að tryggja að um sé að ræða umfangsmikil útgjöld til þess að veita nemendum kleift að koma í veg fyrir að arkitektar séu í vegi fyrir óþægindum.  Villa, einfölduð afleiðing af mollitia dolorem sequi, sem er ótrúlega falleg, er sú að það er ekki nóg að tala um það sem þú ert að tala um.  Arkitektar, sem eru ekki aðgengilegir til að koma í veg fyrir að endurheimta dolorum rerum quidem 

  © 2013 - Splash Screen

Svo skulum útskýra hvað er að gerast hér í smáatriðum: Við byrjum með splash div okkar. Innan þess höfum við titil og skrúfuskrá okkar (sem hér er örmynd, en getur verið eitthvað sem þú vilt að það sé augljóslega). Þá lokum við þessi div, og opnar annan með flokki umbúðir . Inni að við höfum bara nokkrar almennar síðu efni sem verða öðruvísi í hverju tilviki, en hér munum við halda því einfalt: titill, einhver leiðsögn, aðal innihaldsefni og fót. Þá er jQuery innifalinn í Google API sem við munum nota það til virkni og að lokum tengjum við í aðra .js skrá sem er okkar eigin þar sem við munum skrifa jQuery kóða okkar.

Þú gætir líka tekið eftir því að heiti flokksins hverfa í skvettasvæðinu. Við munum nota þennan flokk til að bæta við sumum fallegum CSS3 hreyfimyndum við ákveðin atriði og gera intro öflugri. Augljóslega ef þú horfir á niðurstöðurnar þá mun það ekki vera neitt, við þurfum að stilla allt núna. Talandi um hvaða skulum við komast inn á CSS ...

Styling

Aftur skulum við reyna að halda stílunum einfalt og gagnlegt. Þetta er allt lágt CSS. Fyrst af öllu, skulum byrja með .fade-í bekknum nafn. (Þetta verður að vera lýst efst á CSS skránni okkar, svo að við getum lýst yfir mismunandi hreyfimyndatímum á öðrum þáttum frekar hér að neðan.) 

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:0.3s;-moz-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-delay: 0.5s;-moz-animation-delay: 0.5s;animation-delay: 0.5s;}

Við lýsum yfir keyframes fyrst og kallar fjör okkar fadeIn. Það fer frá 0 ógagnsæi til 1. Þá miðum við nafnið á bekknum beint, tilgreinið að það hafi 0 ógagnsæi. og hringdu í jörðina sem við skilgreindu bara, gerðu það síðasta 0,3 og gefðu því seinkun á 0,5s.

Lítum nú á CSS sem þarf fyrir okkar skvetta síðu: 

.splash {    background: url('../img/splash-bg.jpg') center center;background-size: cover;background-attachment: fixed;position: fixed;top: 0;right: 0;bottom: 0;left: 0;min-height: 360px;z-index: 999;text-align: center;}

Við erum að hringja í bakgrunnsmynd (hér er bara svart og hvítt mynd af götunni), sem við erum að miðta og einnig að ganga úr skugga um að það nær yfir allan skjáinn í hvaða stærð sem er, og gerir það meðfylgjandi - sem þýðir að það ' Þú munt ekki halda áfram að fletta. Síðan gefum við það "fast" stöðu og tilgreinir að það ætti að vera á 0 fjarlægð frá efri, hægri, neðri og vinstri. Þess vegna fyllir hún alla vafra gluggann. Við munum þá gefa það lágmarkshæð og það sem við munum setja inn verður algerlega staðsettur. Gakktu úr skugga um að það sé með háum z-vísitölu þar sem við viljum að það birtist fyrir ofan afganginn af innihaldi á síðunni (sem verður nú sett beint undir skvetta skjár okkar, þar sem það hefur fasta stöðu).

Þar sem þú ferð, þá eru allar stíll sem raunverulega þarf til að gera skvetta skjáinn birtast á réttum stað á síðunni. Fylltu skjáinn og umfram allt annað efni án þess að breyta flæði síðunnar yfirleitt. Svo nú mun ég fljótlega gefa þér afganginn af CSS, sem aðallega setur titlinum á réttum stað, bæta við er fallegur niður að framan ör til að gefa til kynna að notandinn ætti að fletta. Og að lokum eru nokkur grunnstíll fyrir síðuna og nokkrar fjölmiðlafyrirspurnir: 

html, body {    width: 100%;height: 100%;}body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }.wrapper {max-width: 1000px;width: 90%;margin: 0 auto;}.splash-title {color: white;font-size: 3em;margin-top: 100px;text-shadow: 0 2px 10px #000;-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}a.splash-arrow {color: white;font-size: 1.2em;position: absolute;bottom: 55px;left: 50%;margin-left: -25px;padding: 10px;width: 50px;height: 50px;font-weight: bold;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;border: 3px solid white;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}a.splash-arrow:hover {text-decoration: none;bottom: 50px;}@media all and (max-width: 690px) {header h1 { width: 100%; text-align: center; }header nav { float: none; display: inline-block; margin: 0 auto; }.splash-title {font-size: 2em;}}@media all and (max-width: 480px) {.splash-title {font-size: 1.5em;}}

Svo hér höfum við almennar líkamsstíll, sumir toppur púði á titlinum, þar sem við seinkum einnig að hverfa í fjöru um annað hálftíma. Svo hefur það eigin inngang. Örvarinn er algerlega staðsettur, til að vera á miðju og neðst á skjánum. Það hefur annað hálftíma seinkun að birtast endanlega á skjánum. Við erum að bæta við nokkrum CSS3 umbreytingum þannig að staðan breytist á: sveima ástandið er líflegur. Að lokum höfum við nokkrar örlítið fjölmiðlafyrirspurnarbreytingar til að gera það líta örlítið betur á smærri skjái. En augljóslega þessar stíll mun breytast í samræmi við hönnunina þína.

jQuery

Svo sem við lýstum áðan ætlum við að búa til skrá sem heitir main.js í js skrá. Innan við munum við skrifa jQuery okkar sem gerir skvetta skjár hverfa á skrun, eða þegar þú smellir á örina hlekkinn. Hérna er það: 

$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"}  );} $ ("skvetta-ör"). smelltu (virka () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"}  800);});};;}); $ (gluggi) .scroll (virka () {$(window).off("scroll");$(".splash").slideUp("800", function() {$("html, body").animate({"scrollTop":"0px"}  , 100); $ ("umbúðir"). Tefja (100) .animate ({"ógagnsæi": "1.0"}, 800);}};}};

Fyrst af öllu erum við að pakka fyrstu yfirlýsingar okkar innan skjalbúnaðar virka, til að grípa til aðgerða aðeins þegar blaðið hefur fyllt fullt. Þannig að byrja að athuga hvort skvettuskjárinn sé sýnilegur. Ef það er, gerum við umbúðirnar ósýnilegar (þannig að við höfum ekki flass af efni á meðan bakgrunnsmyndin er hlaðið og einnig að endanlega hverfa í fjör þegar við komum á síðuna). Við bætum síðan við aðgerð við smellahöndvarann ​​á örina. Svo ef notandinn smellir á það skyggir skjárinn (og því hverfur) og þá skapum við ógagnsæi umbúðirnar aftur til 1.

Þessi lítill blokkur af kóða er (næstum) það sama sem við munum nota strax eftir í $ (glugga) .scroll virka. Svo þegar notandinn rollar skyggum við upp skvetta, og þá lagið þennan tíma aftur til baka á síðunni (þannig að notandinn byrjar ekki hálfa leið niður á síðuna) og lagfæra ógagnsæi umbúðirnar. Við bætum einnig í þeirri línu $ (gluggi) .off ("scroll"); sem hættir glugganum frá því að fletta í raun þegar við viljum það ekki. Þegar notandinn flettir fyrst viljum við að það sé bara að slökkva á hreyfimyndinni og ekki í raun að fletta að síðunni. En þegar inngangurinn er farinn mun blaðið fletta yfirleitt.

Niðurstaða

Þannig hefur þú það, mjög einfalt (léttur) en glæsilegur lausn til að hafa innrauða skjá efst á vefsvæðinu þínu og sleppa því á blaðsíðu eða þegar notandinn smellir á tiltekna hluti. Gakktu úr skugga um að þú takir þennan kóða, notaðu það og breyttu því að henta þínum þörfum.

Eins og ég nefndi í upphafi, þessi tækni er hægt að nota á nokkra mismunandi vegu, svo að fá skapandi!

vefur app ux