Share
În acest tutorial, cel de-al doilea dintr-o serie de două părți, vom lua ilustrația minunată pe vector, produsă de Yulia Sokolova "Cum să creați o fundal lung de derulare pentru un site web" și codificându-l într-un site live.
Vom pune lucrurile împreună, astfel încât, pe măsură ce defilați în jos din partea de sus a paginii, veți vedea un "Alien Lander" făcându-și drumul să atingă. La început vom vedea un OZN care plutește în spațiu.
Pe măsură ce defilează OZN-ul va ajunge în atmosferă și va deveni o "cometă extraterestră".
Și apoi, în cele din urmă, când trece prin linia copacilor, se va transforma într-un "mic om verde" care face aterizarea pe pământ.
Uitați-vă la demo-ul live!
În acest proiect vom folosi imagini SVG, astfel încât să putem profita de capacitatea lor de a redimensiona în mod fluid și de dimensiunea lor mică de fișier.
Înainte de a începe codarea, aveți nevoie de imaginea creată în prima parte a acestei serii tutorial, separate în patru fișiere SVG:
Puteți să exportați aceste imagini SVG din aplicația grafică preferată, dacă doriți, sau alternativ veți găsi toate cele patru imagini gata pentru utilizare în fișierele sursă de pe GitHub.
Creați un folder nou pentru proiectul dvs. și în interiorul acestuia creați un subfolder numit "css" și altul numit "images".
Copiați și inserați cele patru imagini SVG în noul folder "imagini".
În directorul "css" creați un fișier numit "style.css".
În directorul principal creați un fișier nou numit "index.html".
Structura dosarului dvs. ar trebui să arate astfel:
În fișierul "index.html" adăugați următorul cod HTML pentru a obține elementele esențiale și pentru a încărca foaia de stil:
Scrolling Alien Lander
Ar putea părea contra-intuitiv, dar de fapt vom adăuga imaginea de fundal folosind un img element, mai degrabă decât ca o imagine de fundal CSS. Facem acest lucru deoarece:
Acum că înțelegeți de ce luăm această abordare, să începem codificarea!
În fișierul "index.html" adăugați acest cod:
Dacă previzualizați fișierul într-un browser acum ar trebui să vedeți imaginea care umple portul de vizualizare. Cu toate acestea, în jurul marginilor va exista încă un spațiu alb.
Acest lucru se datorează faptului că browserele includ o marjă mică pe corp element implicit. Pentru a ignora acest lucru, în fișierul "style.css" adăugați acest CSS:
corp marja: 0;
Există, de asemenea, un alt browser implicit de care va trebui să suprascrieți, acel afişa proprietatea asupra imaginilor fiind setată la in linie. Dacă derulați în partea de jos a paginii dvs., veți vedea că în prezent există un mic spațiu alb sub imagine datorită acestei valori implicite. Schimbă-l adăugând:
img display: block;
Ar trebui să vedeți acum că imaginea "background.svg" umple fereastra în relief cu margini, iar dacă redimensionați lățimea ferestrei, veți vedea redimensionarea imaginii SVG pentru a se potrivi cu noua dimensiune. Înălțimea aspectului site-ului se va modifica, de asemenea, pentru a menține raportul de aspect corect pentru imaginea "background.svg".
Pentru a face ca imaginea pe care tocmai am plasat-o sa se comporte ca o imagine de fundal, avem nevoie de o modalitate de a face ca restul continutului nostru sa stea pe varf in prim plan. Putem realiza acest lucru adăugând a div element care va acționa ca un container, apoi modificarea lui poziţie și z-index proprietăţi.
În fișierul "index.html", după imaginea pe care tocmai ați adăugat-o, introduceți această div divină:
Și în "style.css" adăugați acest CSS:
.fundal poziție: absolută; top: 0; stânga: 0; înălțime: 100%; lățime: 100%; z-index: 1;
Hai să facem ce facem cu codul de mai sus.
Mai întâi, prin setarea poziţie la absolut vom lua elementul din fluxul obișnuit de documente (care altfel ar fi plasat sub imaginea de fundal), permițându-ne să îl plasăm oriunde alegem.
Apoi, am setat top și stânga proprietăți pentru 0 care schimbă elementul până în partea de sus a ferestrei și o aliniază orizontal cu imaginea de fundal.
După aceea, dăm elementul a înălţime și lăţime de 100%. Acest lucru face ca elementul să nu se prăbușească la nimic, ascunzând orice conținut din el.
În cele din urmă, am setat z-index la 1 care aduce elementul înainte, astfel încât acesta să stea în fața imaginii de fundal (care este implicit z-index de auto). Acest lucru previne ca conținutul din interiorul elementului să nu fie acoperit de imaginea de fundal.
Conținutul nostru din prim plan este acum gata să includă conținut în el.
Modul în care vom face OZN-ul nostru "teren" la sol în partea de jos este prin crearea a trei panouri, unul pentru fiecare etapă "aterizare". Apoi vom adăuga imaginea SVG corespunzătoare fiecărui panou, cum ar fi fișierul "ufo.svg", de exemplu, ca imagine de fundal cu poziție fixă. Imaginea va rămâne în poziție în timpul derulării în timp ce fundalul se mișcă în spatele acesteia, creând iluzia de coborâre.
În interiorul "prim-planului" div, adăugați acest nou div:
Acum adăugați următorul cod în CSS:
.ufo_section înălțime: 100%; fundal: url (... /images/ufo.svg); background-repeat: nu-repeta; fundal-poziție: centru; dimensiunea fundalului: 40% auto; atașament de fundal: fix;
În prima linie a codului nostru de mai sus, dăm elementul a înălţime de 100% pentru a vă asigura că conținutul va fi vizibil. Apoi, adăugăm imaginea "ufo.svg" ca fundal. Suntem aici fundal repetare la fără repetare deoarece vrem doar să apară un OZN și apoi facem background-position plasați imaginea în centru atât pe orizontală cât și pe verticală.
Cu a noastră background-size proprietate, setăm lățimea ca valoare procentuală și permitem calcularea înălțimii. Această lățime este extrasă din imaginea vectorială originală în care lățimea OZN este de aproximativ 40% lățimea ilustrației generale.
Prin setarea lățimii imaginii noastre "ufo.svg" ca procent, atunci când fereastra este redimensionată și imaginea "background.svg" se schimbă cu ea, imaginea UFO va ajusta lățimea acesteia, de asemenea, pentru a păstra proporțiile dorite.
Pe linia finală pe care am stabilit-o background-attachment la fix, ceea ce înseamnă că imaginea va rămâne fixă în timp ce ne defilează, dându-ne iluzia noastră de coborâre.
Încercați să actualizați pagina și să derulați acum - ar trebui să vedeți OZN care se deplasează vertical între planete.
Pe măsură ce defilați în jos pe site-ul dvs., odată ce ați coborât destul de departe, veți observa că OZN-ul dispare. Acest lucru se întâmplă pentru că deplasăm înălțimea ufo_section astfel încât în acest moment nu mai vedem fundalul.
Vom stivui trei panouri de acest fel unul peste celălalt, astfel încât atunci când vom parcurge unul și fundalul său va dispărea fundalul următor al panoului apare, creând efectul înlocuirii unei imagini cu următoarea.
Deci, vom repeta procesul folosit mai sus pentru a insera imaginile "alien_comet.svg" si "alien_landing.svg".
În HTML, adăugați următoarele imediat după dvs. ufo_section div și încă în interiorul diviziei dvs. div:
Apoi, la CSS adăugați aceste clase noi:
.comet_section înălțime: 100%; background: url (... /images/alien_comet.svg); background-repeat: nu-repeta; fundal-poziție: centru; dimensiune de fundal: 15% auto; atașament de fundal: fix; .landing_section înălțime: 100%; fundal: url (... /images/alien_landing.svg); background-repeat: nu-repeta; fundal-poziție: centru; dimensiune de fundal: 15% auto; atașament de fundal: fix; poziție: relativă;
Folosim tot aici același cod și tehnici, cu modificarea numai a numelor fișierelor de imagine și a lățimii pe background-size proprietate setat la 15% pentru a se potrivi cu imaginile mai înguste pe care tocmai le-am adăugat.
Fișierul dvs. "style.css" este acum terminat și trebuie să conțină următorul cod:
corp marja: 0; img afișare: bloc; .ploat poziție: absolută; top: 0; stânga: 0; înălțime: 100%; lățime: 100%; z-index: 1; .ufo_secție înălțime: 100%; fundal: url (... /images/ufo.svg); background-repeat: nu-repeta; fundal-poziție: centru; dimensiunea fundalului: 40% auto; atașament de fundal: fix; . comet_secție înălțime: 100%; background: url (... /images/alien_comet.svg); background-repeat: nu-repeta; fundal-poziție: centru; dimensiune de fundal: 15% auto; atașament de fundal: fix; .landing_section înălțime: 100%; fundal: url (... /images/alien_landing.svg); background-repeat: nu-repeta; fundal-poziție: centru; dimensiune de fundal: 15% auto; atașament de fundal: fix; poziție: relativă;
Întoarceți-vă acum pe site-ul dvs., derulați în jos și ar trebui să vedeți OZN-ul transformat în cometă, apoi puțin mai jos, transformați-l în "micul om verde".
În momentul de față veți observa că avem câteva probleme de rezolvat atunci când defilați și sunt:
Deoarece imaginea noastră "background.svg" nu are o dimensiune fixă, nu vom ști exactă înălțimea pixelilor pe care fiecare panou trebuie să fie înainte de încărcare. Cu toate acestea, ceea ce putem decide în fața este înălțimea fiecărui panou ar trebui să fie ca un procent din înălțimea "background.svg".
Folosind jQuery putem implementa acest proces:
În timp ce suntem la ea, vom adăuga, de asemenea, în câteva div div extra pentru a acționa ca distanțiere între fiecare panou și pentru a seta înălțimea lor folosind jQuery, de asemenea. Adăugarea spațiului între panouri va face o tranziție mai ușoară, rezolvând problema vizualizării imaginii "alien_comet.svg" înainte ca imaginea "ufo.svg" să dispară.
Actualizați-vă codul HTML, astfel încât să existe un div div între fiecare div existent, cum ar fi:
Și în secțiunea cap, încărcați în jQuery adăugând următoarele:
Înainte de închidere
Accentsconagua
Vrem ca această funcție să se declanșeze la prima încărcare a paginii și oricând este redimensionată, astfel încât pentru a realiza acest lucru adăugați și următorul cod după deschiderea scenariu etichetă:
$ (document) .ready (funcția () set_section_heights ();); $ (fereastra) .resize (functie () set_section_heights (););
În interiorul set_section_heights () funcția, primul lucru pe care trebuie să-l facem este să aflăm în ce înălțime imaginea noastră de fundal este în prezent și să o salvăm ca o variabilă. Pentru aceasta, adăugați acest cod:
var doc_height = $ (". fundal") înălțime ();Cu prima parte a codului, $ ( "Fundal"), jQuery găsește elementul cu numele clasei fundal. Anexat .înălţime() funcția primește atunci înălțimea pixelului ca număr întreg. Acest lucru ne spune cât de mare este imaginea noastră "background.svg" și salvează acel număr în variabilă doc_height.
Acum vom configura un obiect în care putem defini:
Vom itera prin acest obiect și vom folosi valorile pe care le conține pentru a redimensiona secțiunile în prim-plan.
Să începem cu o singură intrare în obiect:
var section_heights = "ufo_section": 0.25
Aici am setat indexul, (valoarea din stânga), la ufo_section pentru a se potrivi cu numele clasei primei noastre secțiuni.
Apoi am stabilit valoarea 0,25 care este un alt mod de a exprima 25%. Într-un moment, vom multiplica această valoare cu numărul stocat în doc_height , adică înălțimea imaginii de fundal. Făcând asta vom spune că vrem ufo_section panou pentru a fi 25% din înălțimea curentă a "background.svg".
De exemplu, dacă înălțimea "background.svg" a fost 1000px înălțimea ufo_section-ului ar ieși ca 250px:
1000 * 0,25 = 250
Acum că am trecut prin modul în care va funcționa acest obiect, să adăugăm câteva intrări pentru celelalte elemente pe care vrem să le stabilim. Actualizați obiectul la următoarele:
var section_heights = "ufo_section": 0.25, "spacer_one": 0.03, "comet_section": 0.36, "spacer_two": 0.06, "landing_section"
Notă: Am selectat aceste valori bazate pe încercări și erori, deci nu ezitați să jucați cu numerele după finalizarea acestui tutorial pentru a vedea efectele.
section_heights ObiectCu obiectivul nostru complet, suntem gata să începem să iterăm prin el și să redimensionăm panourile noastre.
Mai întâi avem nevoie de un $ .Each () pentru a repeta funcția section_heights obiect și extrage indexul și valoarea (reprezentând numele clasei și, respectiv, înălțimea), din fiecare intrare pe care o conține.
Adăugați acest cod după dvs. section_heights obiect:
$ .each (section_heights, funcție (index, valoare) console.log ("Index:" + index, "| Valoare:" + valoare););Pentru a vă permite să vedeți cum rezultă funcția de iterație de mai sus index și valoare variabilele pe care le folosim console.log () pentru a scrie un mesaj mic la consola pentru fiecare intrare în section_heights obiect.
Reîncărcați site-ul, deschideți Instrumentele Chrome Web Developer Tools (sau echivalentul acestuia în browserul preferat) și examinați consola. Ar trebui să vedeți acest lucru:
În stânga fiecărui mesaj după Index: poti vedea index pentru fiecare intrare, adică numele de clasă al elementelor pe care dorim să le redimensionăm.
În partea dreaptă a fiecărui mesaj după Valoare: poti vedea valoare pentru fiecare intrare, adică fracțiunea din înălțimea totală a fiecărui panou.
Acum, în loc să înregistrăm aceste date în consola, să o folosim pentru a seta dimensiunile secțiunilor din prim-plan. Ștergeți console.log () line și înlocuiți-l cu acesta:
$ ("." + index) .height (Math.floor (valoare * doc_height));Să aruncăm ce face această linie.
Mai întâi avem $ ("." + index). Folosim aceasta pentru a gasi elementul pe care dorim sa il redimensionam. De exemplu, cu prima intrare în obiectul nostru index este setat la ufo_section. În acest caz, prima parte a codului nostru va fi evaluată pentru a deveni $. (".ufo_secție"). Cu acest cod, jQuery este solicitat să caute pagina pentru elementul cu clasa ufo_section.
Apoi adăugăm .înălțime (...). Cu acest cod, jQuery va seta înălțimea elementului pe care la găsit, schimbându-l la valoarea trecută între paranteze.
Între paranteze veți vedea valoare * doc_height. Aici facem multiplicarea pe care am menționat-o mai sus pentru a calcula înălțimea intenționată a panoului. De exemplu, prima intrare a obiectului nostru are valoarea 0,25. Acest număr va fi înmulțit cu numărul salvat în doc_height variabil.
În jurul multiplicării celor două variabile veți vedea Math.floor (). Aceasta rundă rezultatul multiplicării noastre până la cel mai apropiat număr întreg.
Deci punem totul împreună, dacă valoarea doc_height este 5197, prima intrare în obiectul nostru ar înmulți asta cu 0,25 dându-ne un rezultat din 1299.25.
Math.floor () va runda această sumă până la 1299. Aceasta înseamnă că codul nostru va evalua acum pentru a deveni: $. (".ufo_section") .height (1299);
Cu această linie, jQuery va găsi elementul cu clasa ufo_section și a stabilit înălțimea lui 1299px.
Aceasta îți sfârșește codul HTML și JavaScript. Fișierul "index.html" completat trebuie să conțină acum acest cod:
Scrolling Alien Lander 