로드가 백그라운드에서 페이드 인하는 방법?

나는 웹 사이트 디자인을하고 있는데, 완전히로드가 끝났을 때 (아마도 500 밀리 초의 일시 정지) body 태그의 배경 이미지가 희미해질 방법이 필요하다.로드가 백그라운드에서 페이드 인하는 방법?

August의 웹 사이트 디자인을 보면 배경이 희미하게 보입니다. 그러나 이것은 플래시 배경으로 수행됩니다. jQuery 또는 JavaScript로이를 수행 할 수있는 방법이 있습니까?

업데이트 2010년 9월 19일는 : 그래서 구글에서 오는 것들에 대한

(이 현재 "부하에 대한 배경 페이드"에 대한 번호를 하나의 결과입니다, 난 그냥 '생각 모든 사람들을위한보다 명확한 구현 예제를 만들 거라고.

가 바닥 글에 어딘가에 코드에 <div id="backgroundfade"></div> 추가 (당신이 당신의 DOM이 어지러워지고 싶지 않은 경우 당신은 또한 자바 스크립트를 통해이를 추가 할 수 있습니다.

을 같은 스타일 -

#backgroundfade { 
    position: fixed; 
    background: #FFF /* whatever color your background is */ 
    width: 100%; 
    height: 100%; 
    z-index: -2; 
}

그런 다음 자바 스크립트 스크립트 파일이 추가 (jQuery를 필요) :

이것은 #backgroundfade 요소 페이딩의 효과가

$(document).ready(function() { 
    $('#backgroundfade').fadeOut(1000); 
});

("커버"상자를 실제 배경) DOM 완료시 1 초 후에

출처

2009-06-28 Brandon Wang

죄송합니다 나는 당신의 예를 들어 사이트 –

페이드 아무것도 표시되지 않습니다 @victor, Chrome의 WFM –

Firefox-Intrepid Ibex –

나는이에게 자신을하지 않은, 그러나 그것은 작동 할 수 있습니다.

배경 이미지를 설정 한 다음 검은 색 배경이있는 큰 오래된 div로 마스크 할 수 있습니다. 그런 다음이 div의 불투명도로 재생하여 페이드 효과를 만듭니다. 이 검은 색 조각은 몸 전체를 가릴 것입니다.

출처

2009-06-28 18:34:11

JS를 사용할 수없는 사용자를 위해 작동해야하기 때문에 이것이 가장 좋은 방법이라고 생각합니다. –

옙 :

신체에 배경 이미지를 제공하지 마십시오. 그런 다음 페이딩 효과로 애니메이션 GIF를 준비하십시오. 자바 스크립트에서 : 당신은 애니메이션 GIF의 트릭을하기를 원하지만, 그것의 불쾌한 얻을 JPEG 또는 PNG에 대한 지원이 필요하지 않은 경우 jQuery를에

document.onload = function() { 
    window.setTimeout (function() { 
    document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)"; 
    }, 500); 
};

그것은

$(function() { 
    $('body').css ('backgroundImage', 'url(/path/...)'); 
});

이 될 것입니다. 자리 표시 자 <div/>을 만들어서 올바른 위치에 배치하고 불투명도로 재생해야합니다. 또한 느린 연결에서 바보 같은 점프를하지 않도록 배경 이미지가로드 된 것을 감지해야합니다. 비 작동 예 :

var x = new Image(); 
x.onload = function() { 
    /* 
    create div here and set it's background image to 
    the same value as 'src' in the next line. 
    Then, set div.style.opacity = 0; (best, when the 
    div is created) and let it fade in (with jQuery 
    or window.setInterval). 
    */ }; 
x.src = "/path/to/img.jpg";

건배,

출처

2009-06-28 18:22:34 Boldewyn

@Boldewyn에서 작동하지 않습니다. 의견을 게시하는 대신 질문을 편집하고 싶습니다. BTW 멋진 아바타;) –

완료, 내 아바타 (;-)에 대한 의견을 지적 해 주셔서 감사합니다). – Boldewyn

@Brandon Wang, 전체 코드에서 Boldewyn 솔루션 (두 번째 부분)을 설계했습니다. 아래 답변을 참조하십시오. – Kalinin

배경 이미지가 희미해질 수 있는지 확실하지 않지만 음수 Z- 인덱스가있는 절대 위치 이미지를 사용하는 방법이 있습니다. 그런 다음 jquery를 사용하여 이미지를 페이드 인 할 수 있습니다. 타일링 또는 반복 할 배경 이미지가 필요한 경우이 방법이 더 까다로울 수 있습니다.

html로 :

<body style="z-index: -2"> 
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;"> 
<!-- The rest of your HTML here --> 
</body>

JQuery와 :

AP : 아이디어가

http://fragged.org/dev/changing-and-fading-body-background-image.php

내가이 링크를 참조

$(window).load(function() { 

    $("#backgroundImage").fadeIn("slow"); 
});

출처

2009-06-28 18:35:22

$ (document) ready() 대신 $ (window) .load()를 사용해야합니다. 이렇게하면 이미지가 이미로드되어 있기 때문입니다. 그러면,이 방법은 나의 접근 방식과 동등하다 (페이지 의미론을 모듈로한다). – Boldewyn

또 다른 문제 : z- 인덱스 : -1은 img go ** ** body 요소 뒤에 있습니다. 본문에 배경이 적용되어 있으면 img가 표시되지 않습니다. Z- 인덱스를 건너 뛰고 img 요소가 몸의 첫 번째 요소인지 확인하는 것으로 충분합니다. – Boldewyn

맞아, 예제 코드를 수정했다. 실제로 렌더링 된 페이지만큼 큰 div를 생성하고 페이드 아웃 (배경을 바둑판 식으로 배열/반복하는 문제를 해결하는) 솔루션을 좋아합니다. div가 충분히 큰지 확인하거나 전체 문서의 offsetHeight 및 offsetWidth를 사용해야합니다. –

, 낮은 z- 인덱스, 절대 위치 지정 및 배경이 지정된 div에 배경을 플라이합니다 (역/뒷면 모달로 생각). 투명 배경으로 다른 레이어에 콘텐츠를 생성하십시오.

이제 하단 레이어를 ID로 참조하고 불투명도를 변경할 수 있습니다. this one는 페이지로드에 배경 이미지 페이드한다 :

이 필요로하는 모든

는

는 기성품 스크립트를 사용하지 왜

출처

2009-06-28 18:36:44

은 ... 배경의 스택/배열이 레이어에 속성으로 적용하는 마법사입니다 .

또한 이미지를 창의 크기에 맞 춥니 다. 필요하지 않은 경우이 기능을 비활성화 할 수 있습니다.

출처

2010-07-08 00:21:33 Erwan

-1

내 솔루션 :

HTML :

<img id='myImg' />

CSS :

#myImg{ 
    opacity: 0;    
    -moz-opacity: 0;   
    -khtml-opacity: 0;  
    filter: alpha(opacity=0); 
}

JS :

var img = document.getElementById('myImg'), 
    steps = 30, 
    appearTime = 1000; 

img.src = "/path/to/img.gif"; 

img.onload = function(){ 
    for(i=0; i<=1; i+=(1/steps)){ 
     setTimeout((function(x){ 
      return function(){ 
       img.style.opacity = x; 
       img.style.MozOpacity = x; 
       img.style.KhtmlOpacity = x; 
       img.style.filter = "alpha(opacity=" + (x*100) + ")";      
      }; 
     })(i), i*appearTime); 

    }; 
};

출처

2010-11-08 12:20:11 Kalinin

그는 이미지가 아닌 배경 이미지를 희미하게 보이기를 원합니다. –

로드가 백그라운드에서 페이드 인하는 방법?

답변

관련 문제