Форум

Fkercaj · #1 (**permalink**) 07.11.2015, 13:23

Добрый день!

Задача такова: необходима прокрутка картинки фона, без прокрутки содержимого.

Картинка фона вертикальная. С горизонтальным монитором видна только верхняя ее треть. Необходимо скроллить фон (при том, что все содержимое остается на своих местах и нет полосы прокрутки).

Фон задан параметром: style="background-repeat:no-repeat; background-position: top center; background-size:cover".

Для наглядности: http://shmhsn.ru/

Нахожу только описания параллакс-прокрутки или базовые параметры для background. Подозреваю, есть простой способ, но никак не соображу.

EmperioAf · #2 (**permalink**) 07.11.2015, 13:51

в вашем примере это достигается за счёт того, что в одном html файле написано:

<body background="images/4gW-auT8RZg.jpg" Link="#000000" VLink="#000000" ALink="#000000" style="background-repeat:no-repeat;background-position:center bottom; background-size:cover">

в другом:

<body background="images/4gW-auT8RZg.jpg" Link="#000000" VLink="#000000" ALink="#000000" style="background-repeat:no-repeat;background-position:center; background-size:cover">

а в третьем:

<body background="images/4gW-auT8RZg.jpg" Link="#000000" VLink="#000000" ALink="#000000" style="background-repeat:no-repeat;background-position: top center; background-size:cover">

рони · #3 (**permalink**) 07.11.2015, 13:59

Fkercaj,
вычислить разницу размеров окна и картинки и менять background-position в пределах этой величины по событию mousewheel

Fkercaj · #4 (**permalink**) 07.11.2015, 14:03

Сообщение от EmperioAf

в вашем примере это достигается за счёт того, что в одном html файле написано:

<body background="images/4gW-auT8RZg.jpg" Link="#000000" VLink="#000000" ALink="#000000" style="background-repeat:no-repeat;background-position:center bottom; background-size:cover">

в другом:

<body background="images/4gW-auT8RZg.jpg" Link="#000000" VLink="#000000" ALink="#000000" style="background-repeat:no-repeat;background-position:center; background-size:cover">

а в третьем:

<body background="images/4gW-auT8RZg.jpg" Link="#000000" VLink="#000000" ALink="#000000" style="background-repeat:no-repeat;background-position: top center; background-size:cover">

да, я сделал это специально. На каждой странице задана определенная область фона, но теперь каждую из них нужно заставить двигаться при скролле.

Форум

Справочник

Discord чат

Курсы javascript