În acest tutorial, aruncăm o privire asupra unui efect frumos de defilare paralaxă în cel mai simplu mod, cu fundaluri staționare și conținut de defilare.

Descărcați fișierele sursă Vizualizați demonstrația

O scurtă introducere

Paralaxa este un efect în care poziția unui obiect pare să fie diferită atunci când este privit din poziții diferite. Mișcarea paralaxă, sau în cazul nostru, defilarea paralaxă, ne dă apoi iluzia că două obiecte aflate în aceeași linie de vedere, dar cu distanță între ele, par să se miște cu viteze diferite. Dacă v-ați uitat vreodată pe geamul unei mașini în timp ce conduceți cu 100 km pe oră pe o autostradă, veți observa că stâlpii de electricitate par să treacă în ritm mare, în timp ce munții din fundal par să treacă foarte încet. , aproape în impas. Aceasta este mișcarea de paralaxă în acțiune.

În ceea ce privește internetul, putem induce un efect de paralaxă asupra containerelor care au imagini de fundal și text deasupra lor. În forma sa cea mai simplă, derularea paralaxă va face ca conținutul să defileze normal, iar fundalul să rămână staționar. Frumusețea acestei tehnici în cea mai simplă formă este că necesită doar CSS. Să săpăm.

Markup și Structură

Dacă ați avea un site fix cu care nu răspunde, atunci nu ar exista nicio șmecherie pentru a realiza acest lucru. Totuși, suntem în era designului web responsive, așa că nu trebuie. Nu te teme! Avem niște CSS frumoase la dispoziție. Dar mai întâi, o privire asupra unor markupuri. Marcajul este simplu – vom avea sections de fundal/titlu-text alternativ și sections de conținut pentru un efect maxim. Iată cum arată:

  

    
Senin
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Creştere
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Calm
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Fiecare section cu o clasă de parallax va conține imaginile noastre de fundal și textul titlului, în timp ce fiecare section cu o clasă de content va fi secțiuni simple care conțin conținut. Clasa container este un div fluid cu o lățime maximă, ceea ce face ca răspunsul la toate acestea să fie foarte simplu. Acum, să pătrundem în CSS.

Stilizarea și punerea în funcțiune cu CSS

Primul punct de remarcat este că toate imaginile mele de fundal au o width de 1600px și o height de 600px. Asta îmi permite să-mi setez secțiunile de paralaxă la o înălțime fixă ​​de 600px. Totuși, este ceva mai mult decât atât. Deoarece nu vreau fundaluri repetate (folosesc imagini mari și îndrăznețe), nu mă pot aștepta întotdeauna ca utilizatorii să aibă lățimea maximă (ceea ce va permite imaginilor de fundal să fie la vedere completă). Din fericire pentru noi, putem folosi proprietatea CSS background-size și o putem seta să cover . Acest lucru forțează imaginea de fundal să ocupe spațiul total disponibil prin extinderea proporțională. Totuși, trebuie să fie prefixat pentru suport maxim, așa că aveți grijă de asta.

Până aici, e bine, cu excepția celui mai important lucru. Avem nevoie ca imaginea noastră de fundal să rămână fixă ​​în timp ce conținutul nostru derulează pe lângă ea. Din nou, CSS ne face viața mai ușoară. Utilizăm proprietatea background-attachment și o setăm la fixed . Simplu! Iată cum arată CSS-ul meu, cu câteva exemple de interogări media:

 /* ================================================== =============
  STRUCTURA PRIMARĂ
==================================================== =========== */
.container {
  lățime maximă: 960px;
  marja: 0 auto;
}
/* ================================================== =============
  SECȚIUNI
==================================================== =========== */
section.module:last-child {
  margine-jos: 0;
}
section.module h2 {
  margine-jos: 40px;
  font-family: "Roboto Slab", serif;
  dimensiunea fontului: 30px;
}
section.module p {
  margine-jos: 40px;
  dimensiunea fontului: 16px;
  greutate font: 300;
}
section.module p:last-child {
  margine-jos: 0;
}
section.module.content {
  umplutură: 40px 0;
}
section.module.parallax {
  inaltime: 600px;
  fundal-poziție: 50% 50%;
  background-repeat: fără repetare;
  fundal-atașare: fix;
  dimensiunea fundalului: coperta;
}
section.module.parallax h1 {
  culoare: rgba(255, 255, 255, 0,8);
  dimensiunea fontului: 48px;
  înălțimea liniei: 600px;
  greutate font: 700;
  text-align: centru;
  text-transform: majuscule;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  imagine de fundal: url("../img/demo/_small/1.jpg");
}
section.module.parallax-2 {
  imagine de fundal: url("../img/demo/_small/2.jpg");
}
section.module.parallax-3 {
  imagine de fundal: url("../img/demo/_small/3.jpg");
}

@media all and (min-width: 600px) {
  section.module h2 {
    dimensiunea fontului: 42px;
  }
  section.module p {
    dimensiunea fontului: 20px;
  }
  section.module.parallax h1 {
    dimensiunea fontului: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    dimensiunea fontului: 160px;
  }
}

Suport pentru browser și informații despre proprietate

Suportul pentru browser în general este cu adevărat grozav. IE8 și down nu vor suporta proprietatea background-size , dar un stil condiționat simplu ar trebui să aibă grijă de asta. În afară de asta, totul este suportat și nu ar trebui să ai probleme. Pentru mai multe informații despre proprietățile CSS utilizate în acest tutorial, consultați MDN:

• Poziție de fundal – referință MDN
• Dimensiune fundal – referință MDN
• Atașament de fundal – referință MDN

Învelire

Aici, am implementat ceva care este simplu, eficient și puțin diferit de aspectul obișnuit, care se derulează dintr-o dată. Am folosit câteva tehnici CSS drăguțe, dar mai puțin cunoscute pentru a obține efectul dorit. Și ăsta e un wrap! Nu uitați, puteți vizualiza demonstrația și descărca sursa făcând clic pe linkurile de mai jos, iar dacă aveți întrebări, comentarii sau feedback, le puteți lăsa și mai jos.