CSS фоновое изображение со 100% шириной и анимацией прокрутки, пока изображение не закончится - PullRequest
1 голос
/ 20 марта 2012

Итак, у меня есть этот сайт с большим изображением в качестве фона.Теперь вместо того, чтобы выцветать изображение до плоского цвета или рисунка, мне нужно, чтобы оно масштабировалось до 100% ширины области просмотра.

Это не решает проблему, которую вы могли бы видеть толькочасть изображения (в зависимости от размера браузера), и мне нужно, чтобы все изображение было видимым.Простая прокрутка вниз не будет достаточной, потому что тогда изображение закончится и появится любой цвет, который я выбрал для фона (это плохо).

Так что я думал, что, если бы у меня было

  • фоновое изображение масштабируется до 100% ширины области просмотра с минимальным размером ширины изображения и
  • также анимируются вертикально вниз при прокрутке до
  • Вы достигаете конца высоты изображения, которое затем останавливается, пока вы не выполните прокрутку назад и не возобновится к верхней части изображения,
  • с эффектом параллакса.

Наличие каждого из них в отдельности просто достаточно , но я не смог найти их комбинацию и модификацию для ограничения вертикальной прокрутки.Если кто-то может указать мне правильное направление, я был бы очень благодарен.: D

1 Ответ

0 голосов
/ 20 марта 2012

Я создал рабочую демонстрацию эффекта, который вы описали в jsFiddle: http://jsfiddle.net/qqW3G/ (Примечание: я присвоил изображению высоту 200%, чтобы убедиться, что оно перекрывает высоту окна достаточно для демонстрацииВы можете удалить это, чтобы избежать искажения изображения.)

РЕДАКТИРОВАТЬ: еще один вариант, который вы могли бы рассмотреть, это эффект прокрутки параллакса, в котором содержимое тела прокручивается быстрее, чем фоновое изображение, создавая иллюзиюглубины.Вот пример: http://jsfiddle.net/qPF2G/

...