0

Всем привет. Возник такой вопрос. Как можно реализовать плавный переход картинок (заднего фона) на чистом Javascript? Заранее спасибо

Вопрос ещё в силе.

4 ответа 4

1

Хм, боюсь без шаманств не обойтись. Первое что приходит на ум:

  1. Сделать div (position:relative;), на весь родительский элемент (тот самый чей фон хотим плавно менять);
  2. Положить на него текущий фон, сделать его не прозрачным (если пользователь начинает прокручивать колесиком мыши или тыкая на скроллбар, то придется перехватывать и прокручивать также картинку на этом диве);
  3. Заменить фоновую картинку в родительском элементе, а дальше по таймеру делать фиктивный див постепенно прозрачным (opacity).

Таким образом получаем плавную смену, и самый кульминационный момент - разве эти красивости стоят того? :)

2
  • В данном случае мне нужно и важно реализовать это именно на чистом JS. Картинки (или цвета) должны меняться по таймеру. Всё равно спасибо за ответ
    – Jet
    19 июл 2011 в 19:58
  • Без CSS вы ничего не добьетесь. Да и кто вам мешает создавать дивы на лету и назначать им стили прямо в JS :)
    – GLAGOLA
    19 июл 2011 в 21:04
0

Сталкивался с похожей проблемой. Делал себе фан-сайт по Majesty 2. Там у меня просто прозначный див должен был быть, и я заморочился его сделать именно без картинок прозрачным. В общем я думаю что без fake-подложки, то есть без дива, который будет позиционироваться под фон сайта, не обойтись. Ну а там уже opacity.

Можно конечно нашаманить, сделать переход между фонами через смены однотонных или градиентных картинок с разной прозрачностью, а их накладывать на контейнер уровня веше, чтобы текущий фон затенялся.

0

На чистом JavaScript такое не реализовать трудно. Но это довольно легко сделать используя CSS. Не стоит забывать, что стили для того и нужны. Если правильно сделать предварительную разметку, то свойство background, а это ваш задний фон, можно добавить и элементу html:

html {
    background: url(picture.png);
}

Теперь у вас есть два блока html и body с изображениями, которые накладываются (если правильно установить margin и padding у элемента body) друг на друга. Умелое управление свойствами opacity даёт вам желанный эффект.

3
  • К сожалению, не дает. Opacity влияет на потомков, в данном случае, body и получается так, что они также становятся прозрачными, в результате имеем мерцающий интерфейс. Лично сталкивался с этим в хроме.
    – GLAGOLA
    19 июл 2011 в 21:03
  • В таком случае целесообразней сделать переход в цвет, а из него уже в картинку. Но это уже не то..
    – Spirit
    19 июл 2011 в 21:10
  • @Spirit, на мой взгляд при переходе из картинки в цвет, а потом из цвета в новую картинку может возникнуть проблема если на картинках преобладают разные (а ведь могут и диаметрально противоположенные) цвета.
    – GLAGOLA
    19 июл 2011 в 21:24
0

Куча готовых вариантов На чистом css это сделать невозможно, а на JS вполне.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.