Применить фейдер для Javascript BackgroundImage изменения

Это мой код, который изменяет фонПрименить фейдер для Javascript BackgroundImage изменения

document.body.style.backgroundImage = "url(img/space1.jpg)";

Как бы я добавить переход непрозрачности к этому в JS?

источник

2017-01-21 CosmicRustle

EDIT: Я updatet это главный комментарий, так что вы имеете полный ответ :)

Вы не можете легко сделать это на фоне тела. Однако вы можете дать эффект этого путем добавления DIV, например, как это (Z-индекс -1 делает 'трюк'):

<body> 
    <div id="js_background_filler" class="background_filler"></div> 
... rest of your body ...

Тогда в вашем стиле/CSS:

.background_filler { 
    background-image: url(img/space1); 
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    bottom: 0; 
    opacity: 0.2; 
    will-change: opacity; 
} 

.background_filler--animate { 
    -webkit-animation: fadein 2s ease-in alternate infinite; 
    -moz-animation: fadein 2s ease-in alternate infinite; 
    animation: fadein 2s ease-in alternate infinite; 
} 

@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

вы, наверное, есть функция JavaScript где-нибудь, который вы хотите, чтобы фон для запуска анимации с, расширить его с чем-то вроде:

var $element = document.getElementById('js_background_filler'); 
$element.classList.add("background_filler--animate");

вы можете возиться с animation: fadein 2s ease-in alternate infinite; (например, сделать его замедленное w, установив его на 20 секунд (в секундах)).

источник

2017-01-21 21:37:22

Выглядит отлично, если бы анимация вызывалась при изменении фонового изображения? – CosmicRustle

На самом деле, я не имел в виду анимированный фон. Так что, когда функция запускается, фоновое изображение меняется, но с постепенным исчезновением: – CosmicRustle

это будет просто «всегда» анимировать (с любым фоном, даже если вы измените фоновое изображение в css). Если вы этого не хотите: вы можете изменить это, добавив имя класса, если вы хотите, чтобы анимация запускалась, например, (или устанавливала ее через javascript). Просто переместите свойство анимации в новое имя класса (например, '. Background_filler - animation {animation-property-here ..}'), и если вы хотите, чтобы он запустил анимацию, просто установите имя класса div, чтобы включить в него 'background_filler-- animate'. –

Вы можете сделать это, используя css. Это проще.

document.getElementsByTagName('img')[0].src ="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRTDYDnkDr8JO6eh9_uXwwZpbHAkLbj02Tsdj3Iy2odb5vPEsXhBA";

.item-fade{ 
 
    vertical-align: top; 
 
    opacity: 1; 
 
    transition: opacity 1s; 
 
} 
 
.item-fade:hover{ 
 
    opacity: 0.2; 
 
}

<span> 
 
    <img class="hover item-fade" src="" /> 
 
</span>

источник

2017-01-21 21:34:20

Применить фейдер для Javascript BackgroundImage изменения

ответ

Смежные вопросы