Hogyan hozzunk létre egy parallaxis hatást css, minden a weboldalak létrehozása

előző ◈ a következő

Régóta nagyon népszerű oldalak úgynevezett parallaxis hatást. Ha még nem hallott parallaxis, és nem igazán tudom elképzelni, mi az, dióhéjban ez lehet leírni, mint egy hatás, lehetővé teszi, hogy lépjünk a különböző rétegek különböző irányokban vagy különböző sebességgel. Parallax nagyon klassz, hogy megbirkózzanak a teremtés az optikai mélység, vonzása és megtartása a figyelmet a honlap látogatói.

background-position: fix, hogy a mentő!

Kevesen tudják, hogy hozzon létre egy parallaxis hatást CSS. Lásd például:

Mert parallaxis hatást, háttérképeket kell helyezni a különböző elemek. Ezek a kiegészítő elemeket kell meghatározni, mint a háttér-attachment: fixed. A háttér-mellékletet. A viselkedés és helyét bármelyik háttérképet lehet változtatni.

A fő célja a tekercset, ami általában azt jelenti, hogy a kép helyzete képest rögzített elemében. Ez nem új fantasztikus, mindannyian tudjuk, hogyan működik. A felhasználó görgeti az oldalon keresztül, az elemek felfelé és lefelé, és háttérképeket is mozog fel és le.

Mindez azt eredményezi, hogy a teremtés szép parallaxis hatást.

Vessünk egy nagyon rövid pillantást, hogy ez a gyakorlatban is működik:

Gyors ellenőrzés kód tekintetében a támogatás böngészők dolgozni MDN mutatja gyakorlatilag globális kompatibilitását. Ezen túlmenően, támogatja azt IE9 és az Android 2.1.