Всем привет. Возник такой вопрос. Как можно реализовать плавный переход картинок (заднего фона) на чистом Javascript? Заранее спасибо
Вопрос ещё в силе.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуХм, боюсь без шаманств не обойтись. Первое что приходит на ум:
position:relative;
), на весь родительский элемент (тот самый чей фон хотим плавно менять);Таким образом получаем плавную смену, и самый кульминационный момент - разве эти красивости стоят того? :)
Сталкивался с похожей проблемой. Делал себе фан-сайт по Majesty 2. Там у меня просто прозначный див должен был быть, и я заморочился его сделать именно без картинок прозрачным. В общем я думаю что без fake-подложки, то есть без дива, который будет позиционироваться под фон сайта, не обойтись. Ну а там уже opacity.
Можно конечно нашаманить, сделать переход между фонами через смены однотонных или градиентных картинок с разной прозрачностью, а их накладывать на контейнер уровня веше, чтобы текущий фон затенялся.
На чистом JavaScript такое не реализовать трудно. Но это довольно легко сделать используя CSS. Не стоит забывать, что стили для того и нужны. Если правильно сделать предварительную разметку, то свойство background, а это ваш задний фон, можно добавить и элементу html:
html {
background: url(picture.png);
}
Теперь у вас есть два блока html и body с изображениями, которые накладываются (если правильно установить margin и padding у элемента body) друг на друга. Умелое управление свойствами opacity даёт вам желанный эффект.
Куча готовых вариантов На чистом css это сделать невозможно, а на JS вполне.