자바 스크립트를 사용하여 배경을 희미하게 만들기

Question

Hello는 아래 30 초마다 변화하는 배경 이미지를위한 JS 코드입니다. 이 예제 코드도 연구에서 얻었습니다. 누군가 제발 제 JS에 예제 코드를 통합하는 방법을 보여 주실 수 있습니다. 그래서 변화하는 이미지가 사라집니다. 완전히 잃어버린 느낌을 시작하고 어디에서 느낄 수 있는지 알지 못합니다. 나는 또한

var img = document.getElementById("fade"); 

var fadeLength = 5500; 
var opacity = 0; 
var startTime = Date.now(); 

requestAnimationFrame(function me() { 
// It's faded in, stop animating! 
if (opacity >= 1) { 
    return; 
} 

opacity = (Date.now() - startTime)/fadeLength; 
img.textContent = opacity;  
img.style.opacity = opacity;   
requestAnimationFrame(me); 
}); 

CSS를 사용하지 않고 자바 스크립트에서 브라우저 창에 배경에 맞게 할 수있는 방법이 통합 할

내 JS

<script> 
bgArr = ['images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg']; 
bgCur = 0; 
backgroundSwitch = function() 
{ 
if (bgCur == bgArr.length) bgCur = 0; 
document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')'; 
} 
window.setInterval(backgroundSwitch, 30000); // Switch every 30 seconds. 
</script> 

예 JS?

감사합니다. 누군가 도와주세요!

Answer 1

한 가지 해결책은 CSS 전환을 사용하는 것입니다. JS 전환이 필요하지 않습니다.

transition: background-image 6s; 

Example