Cum de a crea un efect de parallax folosind css, totul despre crearea de site-uri

Acesta a fost mult timp site-uri foarte populare, cu asa-numitul efect de paralaxă. Dacă nu ați auzit de paralaxă și nu într-adevăr imagina ce este, într-o coajă de nucă poate fi descris ca un efect, vă permite să derulați diferite straturi în direcții diferite sau la viteze diferite. Parallax este foarte cool pentru a face față cu crearea adâncimii optice, atragerea și reținerea atenția vizitatorului site-ului.

fundal-poziție: fixat pentru a ajuta!

Puțini știu că puteți crea un efect de parallax folosind CSS. Uite, de exemplu:

Pentru a obține un efect de parallax, imaginile de fundal trebuie plasate în diverse elemente. Aceste elemente trebuie să fie în plus definite ca atașament de fundal: fixat. Utilizarea atașamentului de fundal. comportamentul și locația oricărei imagini de fundal se vor schimba probabil.

Interesul principal este derularea, care, de regulă, implică faptul că locația imaginii este fixă în raport cu elementul său. În acest lucru nu este nimic nou fantastic, știm cu toții cum funcționează. Utilizatorul derulează site-ul, elementele se deplasează în sus și în jos, iar imaginile de fundal se deplasează și în sus și în jos.

Toate acestea conduc la crearea unui efect paralaxant excelent.

Să aruncăm o privire foarte scurtă asupra modului în care funcționează, în practică:

Verificarea rapidă a codului privind asistența browserelor pe MDN indică o practică compatibilitate globală. În plus, este susținută de IE9 și Android 2.1.