Parallax с фиксиран фон

Може би най-елементарният тип parallax ефект е този с фиксиран фон. Най-вероятно вече сте го забелязвали и в този сайт. Просто погледнете малко по-нагоре, където е заглавието на статията. Фонът там стои статичен дори когато scroll-вате надолу.

Ефектът върви най-добре в комбинация с разпъване на фоновото изображение на цял екран.

За да постигнете ефекта създайте нов контейнер, който ще служи за вашето паралакс изображение. Задайте му фон посредством background-url().

За да стане parallax добавете и:

.container {
    background-attachment: fixed;
    background-size: cover;
}

Когато scroll-нете надолу, следващата секция ще закрие фоновото изображение, без то да се помръдва (все едно е фон някъде в далечината).

Пример можете да видите на https://magadanski.com/demo/parallax-fixed-background/ . Чувствайте се свободни да inspect-ирате и кода.

background-size

background-size е стил, за който повечето браузъри добавиха поддръжка през 2011. Той позволява фоновото изображение на елемент да се зарежда с размери различни от оригиналните.

Поддържа стойности в px или %, като се добавят 2 числа – за широчина и височина.

Пример:

.container {
    background-size: 100px 50px;
}

Retina

Често пъти се използва при retina изображения.

За да не се чупят сайтове, които не са оптимизирани за retina устройства, те уголемяват всичко двойно, тройно или колкото е device-pixel-ratio-то на устройството. Така, ако имате елемент с размери 100px на 50px и сте му задали за фон картинка със същата резолюция, изображението ще изглежда леко замазано на retina устройство.

За да поправите това на устройство с фактор на уголемяване 2 трябва да използвате по-голяма картинка. Широчината и височината трябва да са двойни – 200px на 100px. Ако обаче зададете такъв фон ще се вижда само част от него, тъй като е прекалено голям, за да се събере.

Тук идва място за горния код, който указва, макар фоновото изображение да е по-голямо, да го намалим до 100px на 50px (колкото е размерът на устройството). Пикселите за инч в този случай стават по-големи. Обикновени устройства просто ще прескочат по 1 на всеки 2 пиксела и няма да се вижда разлика. Retina устройства обаче ще използват тези допълнителни пиксели, за да покажат по-детайлен фон.

cover

Освен резолюция, background-size поддържа и 2 ключови думи:

• cover
• contain

Първата означава изображението да бъде уголемено (пропорционално) до толкова, че да закрива целия фон на контейнера.

Имайте предвид, че ако контейнерът примерно е много широк, но нисък, при разширяване на изображението, вероятно отдолу и отгоре ще останат излишни части, които няма да се виждат.

Когато имате background-size: cover съвместно с background-attachment: fixed фоновото изображение ще се разпъне дори още повече. Тъй като в зависимост от scroll позицията, може да се покажат различни части от изображението, браузърите го разпъват да закрие целия екран. Обърнете му внимание в примера от по-горе.

contain е нещо подобно. Изображението отново се уголемява пропорционално, но дотолкова, че все пак да се вижда цялото.

Така при много широк и нисък контейнер, изображението ще се уголеми до височината на контейнера, а отстрани ще остане празно място.