У меня есть одностраничный веб-сайт, и я добавил несколько разделов с большими фоновыми изображениями. Я хотел, чтобы они имели «фиксированный» эффект, чтобы при прокрутке пользователем они не двигались. Поэтому я использовал background-size: cover;
и background-attachment: fixed
. Это делает работу. Однако проблема в том, что в Chrome он очень тормозит, я думаю, что Chrome не кэширует изображения или что-то в этом роде. Вы можете протестировать его здесь:
http://jsfiddle.net/sallar/rwyfZ/1/
это не гладко, как другие браузеры. Поэтому я попытался использовать изображения (в данном случае с помощью $.backstretch). Используя этот метод, задержка прокрутки исправлена и прокручивается очень плавно, но у нее нет «фиксированного» эффекта, которого я хотел. Поэтому я подумал, что должен использовать эффект параллакса. Но ни один из плагинов или методов параллакса, которые я пробовал, не справился с «изображениями», все они были оптимизированы для фонового изображения, которое я не могу использовать из-за этой проблемы в Chrome.
Вот демонстрация примера Backstretch:
http://jsfiddle.net/sallar/FX4Cn/1/
Итак, что мне сделать, чтобы они имели фиксированный стиль и чтобы страница прокручивалась плавно, как во втором примере?
Заранее спасибо.