Hvernig á að búa til resizing valmyndarslá

Undanfarin sumar vefsíður, eins og Þetta er Brigade og Allt þú , hafa byrjað að bjóða upp á breytilegan og hreyfimynda valmynd sem breytist á skruna niður. Lágmarka aðalleiðsögnina til að leyfa meira pláss fyrir efnið. Í þessari einkatími mun ég útskýra hvernig þú getur búið til þennan valmynd sjálfur með HTML5, CSS3 og aðeins smá jQuery.

Þessi tegund af matseðli er frábært ef þú vilt leggja sérstaka áherslu á innihald þitt á öllu vefsíðunni og það gerir þér einnig kleift að búa til stærri og áhrifamikla flakk um fyrstu heimsókn notandans á vefsíðu. Þú getur betur sýnt vefsíðuna þína eða merkið þitt, frábært fyrir ofangreint fletta útsýni; og eftir að hafa notið notandans í heimsókn felur smærri og lágmarkaður útgáfa í sér fallega til að láta notandann einblína aðallega á efnið þitt.

Það eru nokkrar leiðir til að gera þetta. Í þessari einkatími mun ég útskýra hvernig á að búa til fullan breiðan fastanábaksstiku, sem breytist í hæð ásamt merkinu, skapa einfaldan lágmarka útgáfu af upphaflegu. Ef þú vilt frekar geturðu einnig skipt út fyrir lógómyndina með öðrum afbrigði af lógóinu þínu, svo sem upphafsstöfum eða táknmáli, en hafðu í huga að samkvæmni er mjög mikilvægt hér, þannig að notandinn skilji hvernig þátturinn hefur breyst og að meginmarkmið hennar er enn upprunalega; sigla á vefsíðunni.

Áður en við byrjum geturðu kíkið á kynningu eða hlaða niður uppspretta hingað .

Búa til grunnbyggingu í HTML

Við munum byrja með því að búa til grunn HTML kóða sem við þurfum. Við munum halda fast við mjög einfaldan HTML5 uppbyggingu fyrir upphafspunktinn.

 How to create a dynamic top bar | Webdesigner Depot

Nú þegar upphaflega HTML-kóðinn okkar er búinn munum við bæta við kóðanum fyrir valmyndina ásamt nokkrum öðrum upplýsingum um höfuðið á HTML-skránni okkar.

  How to create a resizing menu bar | Webdesigner Depot#">  Innlegg
Ógnvekjandi frjálstir
  Við skulum fá þessi valmynd lítil! 
  Lok af línunni.

In our : Við bættum metatakið fyrir höfundinn til að bera kennsl á skráahöfundinn; Eftir það tókum við fræga reset.css Eric Meyer sem mun endurstilla næstum hvert frumefni í HTML skjalinu þínu, sem gefur þér hreinni og auðveldara skjal til að vinna á. Og þar sem við munum nota jQuery síðar, í síðustu línu höfuðhlutans, fluttum við það í gegnum jQuery CDN.

Ég hefti flestar skrár til að halda skjalinu eins einfalt og mögulegt er en hafðu í huga að ef þú vilt frekar er hægt að hlaða niður nýjustu útgáfum af öllum þessum skrám og nota þau á staðnum með HTML skjalinu þínu og þetta mun koma í veg fyrir hugsanleg vandamál með útgáfuhæfileika eða breytingar á þessum skrám í framtíðinni.

Í okkar tag, notum við sjálfgefið HTML5

þáttur. Okkar

verður fullur breidd og mun bera ábyrgð á breytingum á stórum og litlum útgáfum af valmyndinni. Við erum að gefa okkar

flokkur sem heitir "stór" þannig að við getum breytt tilteknum eiginleikum í CSS til að breyta valmyndinni okkar í minni útgáfu. The

er valmyndin okkar sem inniheldur vefmyndavélina okkar og einfalt óflokkað listavalmynd með þremur tenglum á heimasíðu okkar.

Þar sem við höfum ekki raunverulega efni hérna, þá

er að nota til að teygja blaðið til að knýja skrunann þannig að við getum séð valmyndarbreytingarnar.

Og þetta snýst um það á HTML. Héðan í frá þurfum við bara að stilla þætti okkar með CSS og gera valmyndina öflugt.

Stíll valmyndarinnar og síðu

Til að halda þessum kóða í einum skrá mun ég búa til CSS í þáttur. Þannig mun allt CSS okkar koma fyrir lokun okkar tag.

Hér erum við að klára grunnhönnun okkar. The

mun þjóna sem matseðill ílátið okkar. Það mun innihalda okkar

þáttur og verður þáttur þar sem við skilgreinum bakgrunnslitinn, valmyndarhæð, valmyndarstílsstíll og aðrir. Það mun laga sig að breidd skjásins með breidd eignarinnar: 100% og mun vera fastur yfir aðra þætti á vefsíðunni. Það er mikilvægt að muna að setja z-vísitölu til að tryggja að þessi þáttur muni skarast um afganginn af síðunni og stöðu: fastur til að gera divinn fastur ofan þannig að hann verði áfram í sömu stöðu meðan notandi rollar í gegnum vefsíðuna. Eins og þú getur séð, að auki að setja stíll fyrir hausinn, setjum við einnig ákveðnar stíll fyrir "stóra" bekkinn með header.large. Upphafsstaða okkar er stór og við skilgreinum hér aðeins þær stíll sem þarf til að gera það líkt og við viljum um leið og notandinn fer inn á síðuna.

Breyting á matseðlinum breytt

Við höfum valmyndina okkar gert og stíll, en við viljum samt gera það að lágmarki. Til að búa til þetta annað ríki munum við búa til nýjan bekk fyrir

Í CSS heitir "lítill, sem verður ábyrgur fyrir að breyta eignum sem við þurfum að breyta. Við skilgreindum nú þegar stærri valmyndina, svo nú þurfum við bara að gera valmyndina styttri, myndin okkar er minni í réttu hlutfalli og framlegðin sem við notum í okkar

Einnig þarf að draga úr þætti þannig að þau verði áfram lóðrétt með nýju valmyndarhæðinni:

/* Sizes for the smaller menu */header.small{ height: 50px; }header.small img{ width: 287px; height: 69px; margin-top: -10px; }header.small li{ margin-top: 17px; }

Eins og þú sérð eru þessar stíll nánast eins og þær í stærri valmyndinni, við breyttum bara bekknum "stór" í "lítið" og breyttu gildunum sem við notum til smærri. Við notum neikvæð framlegð á myndinni til að miða því í ílátið, þar sem myndin er lúmskur skuggi og er hærri en leturgerð til að mæta henni. Nú höfum við allar nauðsynlegar stílar til að gera valmyndarbreytingarstærðina og ef þú reynir að breyta í HTML þínum

til

, þú munt sjá í vafranum að valmyndin mun verða minni. En við þurfum þetta gert virkan.

Breytir valmyndarflokknum með jQuery

Með allar stíll okkar á sinn stað þurfum við bara að bæta við smá JavaScript til að gera skiptin á milli flokka "stór" og "lítil". Þar sem við viljum breyta þessu á grundvelli vafrans notandans, munum við nota .scrollTop () virka í jQuery. Þessi aðgerð leyfir okkur að fá eða setja stöðu skrunans í punktum. Skrunað er fjöldi punkta sem þegar hefur verið flett út úr vafranum. Í þessu tilfelli þurfum við bara að vita hvernig manu pixlar notandinn hefur flett þannig að við getum kveikt á kóða okkar og skipt um flokka:

Þetta er JavaScript sem þarf til að uppgötva hvenær notandinn hefur flett. Þegar notandinn hefur skrunað meira en 100 punkta, mun það fjarlægja bekkinn "stór" sem við bjuggum til og bætt við nýjum flokki okkar, "lítill". Þannig mun valmyndin breytast í þau mál sem við skilgreindum áður í CSS. Prófaðu það, nú ætti það að virka þegar, en þú gætir fundið það of erfitt að breyta frá einu ríki til annars.

`CSS umbreytingar til að laga valmyndina`

Til að gera skiptin á milli flokka á okkar matseðli sléttari, ætlum við að nota CSS umbreytingar. Notaðu þetta stykki af kóða við hliðina á afganginum af CSS þínum.

header,nav, a, img, li{transition: all 1s;-moz-transition: all 1s; /* Firefox 4 */-webkit-transition: all 1s; /* Safari and Chrome */-o-transition: all 1s; /* Opera */}

Hér skilgreinum við umbreytingar fyrir alla CSS eiginleika fyrir

  ,   og   þættir, í grundvallaratriðum öll þau atriði sem við erum að breytast.  Þessi kóði mun laga breytingarnar á báðum flokkum með CSS-skiptingum í 1 sekúndu.  Prófaðu það núna, niðurstaðan ætti að vera miklu sléttari. 
  Það er þitt snúa núna 
  Nú þegar þú hefur séð hversu auðveldlega þessi áhrif geta verið náð skaltu fara á undan og búa til eigin útgáfu af resizing valmyndarslá.  Þú getur líka fengið meira skapandi en ég og breyttu jafnvel fleiri eiginleikum eins og bakgrunnslit, texta lit og jafnvel stærð og staðsetningu valmyndarinnar og jafnvel prófa það með mismunandi tegundum CSS umbreytinga en hafðu í huga að notendur þínir ættu að fylgjast með með breytingum í valmyndinni.  Valmyndin og vefmerkið er yfirleitt eitt auðkenna og væntanlega þættirnar og með því að breyta því harkalegt gætirðu ruglað notandanum, svo vertu viss um að halda samhengi á báðum útgáfum og prófa það alltaf með sumum notendum. 
  Hefur þú byggt upp valmynd eins og þetta?  Viltu frekar mismunandi tækni?  Láttu okkur vita í athugasemdunum. 
  Valin mynd / smámynd,   harmónikan mynd  um Shutterstock. 


        
                        allt sem þú velur 
                        resizable valmynd 
                        Breyta stærð á skrúfu 
                        þetta er brigadevalmyndin



    
        
            
            ← Beyond Blogging: WordPress sem vettvangur            
            Hvað er nýtt fyrir hönnuði, mars 2013 →


                
                                        
    
         Nýjustu 
         Besta 
    

    
    
        
            
                          
                
                    
                        Hvernig á að búa til slidable rist með JQuery
                    
                
            
                          
                
                    
                        Hvernig á að nota HTML5 Geolocation
                    
                
            
                          
                
                    
                        Hvernig á að skrifa einfaldan, glæsilegan CSS með Compass & Sass
                    
                
            
                          
                
                    
                        Leiðbeinandi Beginsins til Sass
                    
                
            
                    
        
            
                              
                    
                        
                            CSS3 Best Practices fyrir hönnuði
                        
                    
                
                              
                    
                        
                            Foxycomplete - Háþróaður sjálfvirkri leit með myndum
                        
                    
                
                              
                    
                        
                            15 frábær HTML5 og CSS3 rafala
                        
                    
                
                              
                    
                        
                            Segðu halló við DeveloperDrive.com

Hvernig á að búa til umfangsmikið valmyndastiku

Búa til grunnbyggingu í HTML