Share
Ce veți creaAstăzi vom trece printr-o tehnică cu adevărat rece pe care o puteți folosi pentru a crea un efect care este puțin asemănător derulării cu parallax, dar nu are nevoie de niciun JavaScript; se poate realiza foarte simplu prin CSS pur.
Începeți prin a verifica demonstrația live pentru a vedea ce veți învăța (va trebui să vizualizați pe un desktop / laptop pentru a vedea efectul).
Această tehnică ar putea fi utilizată pentru a crea pagini de descriere excelente ale produselor sau chiar ceva asemănător cu o prezentare PowerPoint / Keynote și ar fi o potrivire foarte bună pentru ilustrarea povestirii online.
Iată cum faceți asta.
Cheia acestei tehnici este CSS atașament de fundal: fix;, disponibil de la CSS 2.1. Orice imagine de fundal cu aplicarea acestui stil va rămâne într-o poziție fixă față de fereastră (nu elementul la care este aplicat). O vom folosi pentru a ne păstra ilustrațiile în timp ce conținutul nostru se derulează în mod independent alături de acesta.
Câteva lucruri care trebuie să fie conștiente de această proprietate CSS sunt că imaginile de fundal vor fi fixate în raport cu fereastra, poziția lor nu va fi afectată de lucruri precum marginile în modul în care o imagine de fundal obișnuită.
De asemenea, trebuie să știți că, în timp ce proprietatea funcționează minunat în toate browserele de desktop, acesta nu funcționează în prezent pe mobilul Chrome și poate fi puțin jignit în alte browsere mobile. Deci, în timp ce vizitatorii dvs. vor vedea imaginile dvs. foarte bine, efectul derulării în sine este cel mai bine văzut pe platformele desktop.
Pașii de bază pentru a atinge ceea ce vedeți în demo sunt:
Accentsconagua
div în cazul nostru) să aibă o lățime de aproximativ 50% pe una din fețe, împingând astfel conținutul către cealaltă parte.atașament de fundal: fix; și urmăriți magia derulantă!Hai să vedem cum totul se întâmplă pas cu pas. Veți dori să luați fișierele sursă pentru acest tutorial, astfel încât să aveți imaginile necesare.
Începeți prin crearea unui dosar de proiect și adăugarea acestuia index.html fișier la el, precum și a css folder cu un fișier numit style.css adăugat la acesta. Copiați și lipiți cele patru imagini din fișierul sursă zip pe care l-ați descărcat într-un folder numit imagini.
Adăugați acest cod HTML index.html:
O demonstrație vizuală a atașamentului de fundal: fix; Derulați în jos și urmăriți ce se întâmplă
Alice începuse să se simtă foarte obosită să stea lângă sora ei pe malul mării și să nu aibă nimic de făcut: o dată sau de două ori se uită în cartea pe care o citise sora ei, dar nu avea imagini sau conversații în ea și este folosirea unei cărți, "a gândit Alice" fără imagini sau conversații?
Deci ea se gândea în propria sa minte (la fel cum ar fi putut, pentru o zi fierbinte, să o facă să se simtă foarte somnoros și proastă), dacă plăcerea de a face un lanț de daisy ar merita dificultatea de a se ridica și de a alege margaretele, când dintr-o dată un Rabbit alb, cu ochi roz, se apropie de ea.
Nu era nimic atât de remarcabil în acest sens; și nici Alice nu a crezut așa de mult ca să-i audă pe Iepure să-și spună: "Oh dragă! Aoleu! Voi întârzia! (când a gândit-o după aceea, i sa dat seama că ar fi trebuit să se întrebe, dar la vremea aceea părea ceva natural); dar când iepurele își luă de fapt un ceas din buzunarul vestei și se uită la ea și apoi se grăbi, Alice se ridică în picioare, căci ea se gândi că nu mai văzuse vreodată un iepure cu veste, un buzunar sau un ceas care să-l scoată și arzând cu curiozitate, a alergat peste câmp după ea și, din fericire, a fost la timp să-l văd că a apărut o gaură mare de iepure sub gardul de gard.
Într-un alt moment, Alice a mers după ea, fără să se gândească vreodată cum ar trebui să iasă din nou în lume.
Gaura de iepure mergea drept ca un tunel într-un fel și apoi se dădu brusc în jos, așa de brusc că Alice nu avea niciun moment să se gândească să se oprească înainte să se trezească căzând într-un puț foarte adânc.
Fântâna era foarte adâncă sau cădea foarte încet, pentru că avea destul timp, coborând să se uite la ea și să se întrebe ce se va întâmpla în continuare. În primul rând, a încercat să privească în jos și să afle la ce venea, dar era prea întunecată pentru a vedea ceva; apoi se uită la marginea fântânii și observă că erau pline de dulapuri și rafturi de cărți; iată și acolo vedea hărți și imagini atârnate pe picioare. A scos un borcan de pe unul din rafturi în timp ce trecea; a fost marcată "ORANGE MARMALADE", dar pentru marele ei dezamăgire a fost goală: nu i-ar plăcea să renunțe la borcan din teama de a ucide pe cineva, așa că a reușit să o pună într-unul din dulapuri,.
'Bine!' gândi Alice la sine, "după o astfel de cădere ca asta, nu mă voi gândi la nimic să scot pe scări! Cât de curajoși mă vor gândi acasă! De ce n-aș spune nimic despre asta, chiar dacă am căzut din vârful casei! (Care era foarte probabil adevărat.)
Ceea ce facem aici este setarea cochiliei HTML de bază, încărcarea în foaia de stil și câteva Fonturi Google, apoi crearea primului nostru container de conținut div pe care îl vom aplica această tehnică.
Containerul div are trei clase:
.conţinut - folosit pentru a seta unele proprietăți care vor fi comune tuturor containerelor de conținut..dreapta - identifică faptul că acest container ar trebui să aibă conținut aliniat la dreapta (vom lucra și cu un container aliniat la stânga mai târziu).illustration_01 - folosit pentru a seta imaginea de fundal și culoarea specifică pentru acest containerAcum suntem pregătiți pentru unele CSS. Începeți prin adăugarea unor coduri de bază de normalizare și formatare pentru dvs. style.css fişier:
* size-box: border-box; html font-size: 1em; font-family: "Alike"; fundal-culoare: # 262626; culoare: # d9d9d9; corp margine: 0; img max-lățime: 100%; înălțime: auto; h1, h2, h3, h4, h5, h6 font-family: "Roboto"; linia-înălțime: 1.313em; h1 font-size: 3em; marja: 0.563 em 0; h2 font-size: 2,25; marja: 0.625em 0; h3 font-size: 1.5; marja: 1.313em 0; h4 font-size: 1.313em; marja: 1.313em 0; h5 font-size: 1.125em; marja: 1.313em 0; h6 font-size: 1em; marja: 0,75em 0;
Acum pentru .conţinut clasă. Adăugați aceasta în partea de jos a foii de stil:
.conținut font-size: 1.875rem; culoare: # 262626; dimensiunea fundalului: 49% auto; atașament de fundal: fix; background-repeat: nu-repeta;
Această clasă este cea mai mare parte a magiei. Pentru text, setăm dimensiunea fontului și culoarea. Pentru fundal veți vedea că începem prin setare background-size la 49% auto.
Aceasta înseamnă că imaginea de fundal va întinde sau se micșorează întotdeauna pentru a umple 49% din lățimea paginii, iar înălțimea se va ajusta proporțional. Utilizăm o valoare de 49% în loc de 50% deoarece altfel Firefox arată un artefact de linie ciudat în mijlocul ecranului.
Apoi am stabilit fundal fix care, după cum știți deja din descrierea de mai sus, face ca imaginea de fundal să rămână pusă atunci când defilați și face poziționarea sa în raport cu fereastra, mai degrabă decât cu recipientul la care se aplică.
În cele din urmă am stabilit background-repeat: nu-repeta; pentru a ne asigura că imaginea noastră apare o singură dată pe pagină.
Apoi adăugați .dreapta clasă în foaia de stil:
.dreapta padding: 1.618em 6.472m 3.236em 50%; pozitie fundal: 0 50%;
Această ultimă clasă plasează conținutul de text pe o jumătate a ecranului și pe imaginea de fundal pe celălalt.
background-position setarea indică imaginea de fundal să se poziționeze singură cu zero pixeli din partea stângă a ferestrei și să se alinieze la jumătatea distanței de la partea de sus a ferestrei.
În cele din urmă, adăugați .illustration_01 clasă:
.illustration_01 background-color: # 00c17b; fundal-imagine: url ("... /images/minipadwhite.png"); Aceasta stabilește imaginea de fundal specifică și culoarea dorită pentru acest container de conținut.
Verificați site-ul dvs. și acum ar trebui să vedeți acest lucru:
Când derulați în jos, ar trebui să vedeți diapozitivul de conținut de-a lungul timpului imaginea rămâne exact unde este.
Să adăugăm un alt container de conținut, acesta cu conținut aliniat la stânga.
Adăugați acest container de conținut HTML sub ultima pagină div:
Efecte de derulare în fundal fix
Jos, în jos, în jos. Va cădea niciodată sfârșitul! Mă întreb câte kilometri am căzut de data asta? spuse ea cu voce tare. - Trebuie să ajung undeva în apropierea centrului pământului. Dați-mi voie să văd: că ar fi patru mii de kilometri în jos, cred ... "(pentru că, vedeți, Alice învățase mai multe lucruri de acest fel în lecțiile ei din sala de școală și deși nu era o ocazie foarte bună știința ei, pentru că nu era nimeni care să o asculte, totuși era o practică bună să spun asta) "- O, e vorba de distanța potrivită - dar atunci mă întreb ce înseamnă Latitudine sau Longitudine?" (Alice nu avea nici o idee despre ceea ce era Latitude, sau despre Longitudine, dar credea că sunt cuvinte frumoase de spus.)
Începu din nou. "Mă întreb dacă voi cădea pe pământ! Cât de amuzant va apărea printre oamenii care merg cu capul în jos! Antipatiile, cred că ... "(era foarte bucuroasă că nu se ascultă nimeni, de data aceasta, deoarece nu suna deloc cuvântul potrivit)" - dar trebuie să le întreb ce numește țara este, știți. Te rog, domnule, e Noua Zeelandă sau Australia? (și ea a încercat să curteze în timp ce vorbea ... se răsucește în timp ce tu cadeai prin aer! Crezi că ai reușit?) Și ce o fetiță ignorantă mă crede că o întreabă! Nu, nu se va întreba niciodată: poate că o voi vedea scrisă undeva.
Jos, în jos, în jos. Nu era altceva de făcut, așa că Alice a început să vorbească din nou. - Dinah mi-ar fi dor de mine foarte mult, ar trebui să mă gândesc! (Dinah era pisica). Sper că își vor aminti farfuria de lapte la ceai. Dinah dragul meu! Aș fi vrut să fii aici jos cu mine! Nu sunt șoareci în aer, mi-e teamă, dar s-ar putea să prinzi o bâtă și asta e foarte asemănător unui șoarece, știi tu. Dar pisicile mănâncă lilieci, mă întreb? Și aici, Alice a început să devină mai degrabă somnoros și a continuat să spună, într-un fel vagi: "Pisicile mănâncă lilieci? Pisicile mănâncă lilieci? și uneori, "Liliecii mănâncă pisici?" pentru că vedeți, deoarece nu putea răspunde la nici o întrebare, nu prea avea importanță în ce fel a pus-o. Ea a simțit că ea se oprea și tocmai începuse să viseze că merge mână în mână cu Dinah, spunându-i foarte serios: "Acum, Dinah, spune-mi adevărul: ai mâncat vreodată o bâtă?" când dintr-o dată bateți! thump! în jos ea a venit pe o grămadă de bastoane și frunze uscate, iar toamna sa terminat.
Alice nu a fost rănită și a sărit în picioare într-o clipă: se uită în sus, dar totul era întunecat; înainte de ea a fost un alt pasaj lung, și Rabbit alb era încă în vedere, grabind în jos. Nu trebuia să se piardă nici un moment: Alice, ca și vântul, a plecat și a fost la timp să audă, spunând: "O urechile și mușchii mele, cât de târziu ajunge!" Ea era aproape în spatele ei când întoarse colțul, dar Iepurașul nu mai era de văzut: se găsea într-o sală lungă și joasă, care era aprinsă de un rând de lămpi atârnând de acoperiș.
În hol erau uși, dar toți erau închiși; și când Alice se îndrepta în toate părțile, încercând fiecare ușă, se plimba pe neașteptate în jos, întrebându-se cum a ieșit din nou vreodată.
Observați de această dată că folosim clasa .stânga in loc de .dreapta și am înălțat numărul de ilustrație în clasă .illustration_01 se înlocuiește cu .illustration_02
Adăugați următoarele două clase noi în foaia de stil:
.stânga padding: 1.618em 50% 3.236em 6.472em; fundal-poziție: 100% 50%; .illustration_02 background-color: # e8697b; fundal-imagine: url ("... /images/minipadblack.png"); De data aceasta avem padding 50% aplicat în partea dreaptă a containerului, astfel încât conținutul va fi împins în stânga și fundalul este poziționat orizontal la 100%, adică tot drumul spre dreapta. De asemenea, adăugăm o culoare și o imagine diferită în fundalul acestui container.
Verificați site-ul dvs. din nou și începeți să derulați în jos. Când ajungeți la capătul primului recipient, ar trebui să vedeți cel de-al doilea începând să se ridice, curățând peste vârful primei imagini și dezvăluind treptat cel de-al doilea.
Îmbunătățește efectul acestei tehnici dacă există un separator între cele două containere, așa că adăugăm acum.
Între cele două contacte divice adăugați acest cod HTML:
O altă secțiune începe aici
Și adăugați clasa .separator în foaia de stil:
.separator font-size: 1.875rem; padding: 1.618em 0; text-align: centru;
Când actualizați site-ul dvs., ar trebui să aveți acum un separator frumos între recipiente:
Acum puteți introduce codul pentru separatoarele și containerele rămase.
Adăugați acest cod HTML sub diviziile existente:
O altă secțiune începe aici
Mare pentru prezentări de produse
Dintr-o dată a venit pe o masă cu trei picioare, din sticlă solidă; nu era nimic altceva decât o cheie de aur mic, iar primul gând al lui Alice era că ar putea aparține uneia dintre ușile din hol; dar, vai! fie încuietorile erau prea mari, fie cheia era prea mică, dar în orice caz nu ar fi deschis nici una dintre ele. Cu toate acestea, a doua oară, a intrat pe o perdea mică pe care nu o observase până acum și în spatele ei era o ușă puțin cam cincisprezece centimetri înălțime: ea încercase cheia de aur mic în încuietoare și spre marea ei încântare!
Alice deschise ușa și descoperă că aceasta duce într-un mic pasaj, nu mult mai mare decât o gaură de șobolan: a îngenunchiat și a privit-o de-a lungul pasajului în cea mai frumoasă grădină pe care ai văzut-o vreodată. Cum și-a dorit să iasă din acea sală întunecată și să se rătăcească printre acele paturi de flori strălucitoare și acele fantani răcoritori, dar nici nu putea să-și ridice capul prin poarta; "și chiar dacă capul meu ar trece prin", gândea săracul Alice, "ar fi foarte puțin util fără umerii mei. Cum aș vrea să pot închide ca un telescop! Cred că aș putea, dacă știu doar cum să încep. Pentru că, vedeți, în ultima vreme s-au întâmplat lucruri atât de neînsemnate, încât Alice începuse să creadă că foarte puține lucruri erau cu adevărat imposibile.
Părea că nu mai avea nici un rost să aștepte lângă ușa mică, așa că se întoarse la masă, în jumătate în speranța că ar putea găsi o altă cheie pe ea sau, oricum, o carte de reguli pentru închiderea oamenilor ca niște telescoape: de data aceasta o sticla pe el ("care cu siguranta nu a fost aici inainte", a spus Alice,) si in jurul gatului sticlei a fost o eticheta de hartie, cu cuvintele "DRINK ME" frumos imprimate pe ea cu litere mari.
Totul era foarte bine să spui "bea-mă", dar micul înțelept Alice nu avea de gând să facă asta grăbit. "Nu, o să mă uit în primul rând", a spus ea, "și să vadă dacă este marcat" otravă "sau nu"; pentru că a citit câteva istorii minunate despre copiii care au fost arși și mâncați de animale sălbatice și alte lucruri neplăcute, tocmai pentru că nu-și amintesc regulile simple pe care prietenii le-au învățat: cum ar fi că un poker roșu-fierbinte te va arde dacă o țineți prea mult; și dacă vă tăiați degetul foarte adânc cu un cuțit, acesta de obicei sângerează; și nu a uitat niciodată că, dacă bei mult din sticlă marcată "otravă", este aproape sigur că nu sunteți de acord cu voi, mai devreme sau mai târziu.
Cu toate acestea, această sticlă NU a fost marcată "otravă", așa că Alice a încercat să-l guste și a găsit-o foarte drăguță (de fapt avea un fel de aromă mixtă de cireșe, cremă, măr de porc, caramelă și pâine prăjită fierbinte), a terminat-o foarte curând.
O altă secțiune începe aici
Tehnica simplă utilizând CSS Pure
- Ce sentiment curios! a spus Alice; - Trebuie să fiu închis ca un telescop.
Și așa a fost într-adevăr: era acum doar de zece centimetri înălțime, iar fața îi strălucea de la ideea că era acum cea mai potrivită dimensiune pentru a merge prin ușa mică în acea grădină minunată. Mai întâi, totuși, a așteptat câteva minute să vadă dacă se va mai micula: se simțea puțin nervoasă în legătură cu acest lucru; - pentru că s-ar putea să se termine, știi tu, zise Alice, în timp ce ieșiră cu totul, ca o lumânare. Mă întreb ce ar trebui să fiu atunci? Și a încercat să-și imagineze ce înseamnă flacăra unei lumânări după ce lumânarea a fost aruncată afară, pentru că nu și-a putut aminti că a văzut vreodată așa ceva.
După un timp, constatând că nu sa mai întâmplat nimic, ea a decis să intre imediat în grădină; dar, din păcate, pentru Alice! când a ajuns la ușă, a găsit că uitase cheia de aur mic și când sa întors la masă pentru ea, a găsit că nu putea ajunge la ea: a putut să o vadă foarte clar prin pahar și a încercat cel mai bine să urce pe unul dintre picioarele mesei, dar era prea alunecos; și când se obosise de încercări, micul lucru sărac sa așezat și a plâns.
- Hai, nu-i nimic să plângi așa! îi spuse Alice, destul de brusc; - Vă sfătuiesc să renunțați la acest minut! În general, ea și-a dat sfaturi foarte bune (deși ea foarte rar a urmat-o) și, uneori, sa certat atât de sever încât să-i aducă lacrimi în ochi; și odată ce își amintea că încerca să-și bage propriile urechi pentru că sa înșelat într-un joc de crochetă, ea se juca împotriva ei, pentru că acest copil curios era foarte îndrăgit de pretenția de a fi doi oameni. - Dar acum nu mai are rost să crezi că sunt doi oameni! De ce, nu mi-a mai rămas suficient de mult să fac o persoană respectabilă!Curând, ochiul ei a căzut pe o cutie de sticlă care se afla sub masă: a deschis-o și a găsit în ea un tort foarte mic, pe care cuvintele "EAT ME" erau frumos marcate în coacăze. - Ei bine, o să mănânc, zise Alice, și dacă mă face să mă înmulțesc, pot ajunge la cheie; și dacă mă face să mă înmulțesc, pot să plec sub ușă; așa că am să intru în grădină și nu-mi pasă ce se întâmplă!
Ea a mâncat puțin și a spus cu grijă: "În ce direcție? În ce fel? ", Ținând mâna pe capul ei pentru a simți în ce direcție creștea, și era destul de surprinsă să afle că ea a rămas la aceeași dimensiune: sigur, acest lucru se întâmplă în general atunci când cineva mănâncă tort, dar Alice a avut atat de mult incredere in ceea ce se intampla, incat parea plictisitor si proasta ca viata sa continue in mod obisnuit.
Așa că a început să lucreze și, curând, a terminat tortul.
SFARSIT
Și acest CSS în foaia dvs. de stil:
.illustration_03 background-color: # 14b29a; fundal-imagine: url ("... /images/miniwhite.png"); .illustration_04 background-color: # 80b9f1; fundal-imagine: url ("... /images/miniblack.png"); Acum ar trebui să aveți întregul afișaj în locul dvs. cu un al treilea și al patrulea container de conținut care să afișeze:
Ca și un separator final pentru a-l închide:
Ultimul lucru pe care trebuie să-l faci este să ții cont de diferite dimensiuni ale ecranului. Atunci când fereastra de vizualizare devine prea mică pentru a găzdui confortabil imaginile de fundal, vrem să le schimbăm în loc de imagini inline.
În partea de sus a fiecărui container de conținut, în diviziile de deschidere și deasupra textului, adăugați o cifră cu clasa .smallscreen și în interiorul acelui loc img pentru a încărca fiecare dintre imaginile utilizate în prezent în fundal:
Primul container de conținut:
Al doilea container de conținut:
Al treilea container de conținut:
Al patrulea container de conținut:
Vom folosi .smallscreen pentru a ascunde această imagine inline în mod prestabilit, dar pentru ao arăta când ajungem la o dimensiune mai mică a ecranului.
Adăugați următoarea clasă în foaia de stil:
.ecranul de mișcare display: none;
Acum vom adăuga interogările media care se vor ocupa de afișarea fundalului sau a imaginilor inline. De asemenea, acestea vor diminua progresiv dimensiunea textului și spațierea în aspect, astfel încât să potrivim lucrurile frumos la toate lățimile ferestrei de vedere.
Adăugați aceste interogări media în foaia dvs. de stil:
@media (max-lățime: 106.25rem) .wrapper, .separator font-size: 1.6875rem; @media (max-width: 93.75rem) .content, .sparator font-size: 1.5rem; . dreapta padding: 1.618em 4.854em 1.618em 50%; . zăpadă (umplutură: 1,618cm 50% 1,618m; 4,854m; @media (max-width: 81.25rem) .content, .separator font-size: 1.3125rem; . dreapta padding: 1.618em 3.236em 1.618em 45%; dimensiunea fundalului: 44% auto; pozitie fundal: 0 55%; . zăpadă (umplutură: 1.618cm 45% 1.618m 3.236cm; dimensiunea fundalului: 44% auto; pozitie fundal: 100% 55%; @media (max-width: 68.75rem) .content, .separator font-size: 1.125rem; . dreapta padding: 1.618em 3.236em 1.618em 40%; dimensiunea fundalului: 39% auto; pozitie fundal: 0 60%; . zăpadă (umplutură: 1,618cm 40% 1,618m 3,236em; dimensiunea fundalului: 39% auto; pozitie fundal: 100% 60%; @media (max-lățime: 50rem) .smallscreen display: block; . dreapta padding: 1.618em 3.236em; fundal-imagine: nici unul; . zăpadă padding: 1.618em 3.236em; fundal-imagine: nici unul; @media (max-width: 31.25rem) .right padding: 1.618em 1.618em; . zăpadă padding: 1.618em 1.618em; @media (max-lățime: 12rem) html min-width: 12rem;
Primele patru interogări media reduc progresiv mărimea și dimensiunea fontului textului în interiorul containerelor de conținut, pentru a se potrivi lățimii disponibile a ecranului.
În cea de-a cincea interogare media a max-lățime: 50rem vom include codul care face .smallscreen clasa vizibilă, elimină placa de 50% din containerele de conținut și ascunde imaginile de fundal. Când această interogare de tip media pornește, nu vom mai vedea imaginile de fundal mari și în schimb vom vedea imagini obișnuite în partea de sus a fiecărui container de conținut.
Acum, când vă reîmprospătați site-ul, ar trebui să îl vedeți cu ușurință în jos, împreună cu toate lățimile ferestrei de vizualizare, până când veți vedea acest lucru la cea mai mică dimensiune:
Chiar și după mulți ani de lucru cu CSS nu reușesc niciodată să fiu surprins de numărul tot mai mare de lucruri minunate pe care le poți face cu el. Și cu cât este mai simplă tehnica, cu atât este mai impresionantă.
Încercați această bijuterie mică, este atât de rapidă și ușoară încât probabil veți fi încurcată!
