Проста паралаксова техника за превъртане

Добър ден, скъпи хабраузери. Към днешна дата Parallax Scrolling е тенденция и искам да говоря за просто прилагане на този ефект. Техниката се основава на скоростта, с която се променя свойството позиция на фона. Ефектът от паралаксното превъртане е, че фонът се движи по-бавно от съдържанието.

HTML маркиране

Създайте два блока с атрибути "data-type" и "data-speed":

CSS маркиране

Добавете фонови изображения за елементи с идентификатор #home и #about

home-bg.jpg

about-bg.jpg

Стилизиране на самите елементи и тяхното съдържание:

Преминете през всички елементи с атрибут data-type="background":

Добавете функция .scroll() вътре в .each(), която се извиква при превъртане:

Изчисляваме коефициента на промяна на позицията на фона по време на превъртане:

Задайте фонова позиция на променлива и стилови координати:

Hardcore conf в C++. Каним само професионалисти.

---