Shapito27
@Shapito27
php, laravel

Можно ли сделать прокрутку в другую сторону?

У боди задана картинка:
body {
    background-image: url('/images/bg2.jpg');
    background-position: 50% 100px;
    background-size: cover;
}

На странице имеется просвет между блоками, в который видно фоновую картинку.
https://jsfiddle.net/L1yeu682/2/
Соответственно при прокрутке вниз, через просвет, я вижу картинку всё выше и выше.
А цель , сделать так, чтобы при прокрутке вниз background-position-y фоновой картинки уменьшался, с чуть большей скоростью, и при прокрутке вверх background-position-y увеличивался , с чуть большей скоростью, чем прокрутка страницы.

Вопросы:
1)Можно ли обойтись средствами css?
2)Накидал скриптик https://jsfiddle.net/L1yeu682/9/ , но он косячит с прибавлением и уменьшением. Если прокрутить вниз и вернуться наверх, не будет исходного значения background-position-y
3) И на реальном проекте используется картинка довольно большая, и есть ощущение, что данный скрипт очень сильно напрягает страницу. Можно ли оптимизировать скрипт или может есть более хорошее решение?
  • Вопрос задан
  • 338 просмотров
Решения вопроса 1
Exomode
@Exomode
Архитектор ПО
Если я правильно тебя понял, ты пытаешься добиться эффекта т.н. "Parallax"? Есть готовые библиотеки JS, так же можно сделать на CSS3, оптимизация во втором случае будет заметно лучше, особенно на больших изображениях.

50+ Best jQuery Parallax Plugin
Параллакс на чистом CSS
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы