Способ исчезнуть в фоновом режиме при загрузке?

Я работаю над дизайном веб-сайта, и мне нужен способ затухать в фоновом изображении тега тела, когда он полностью загружен (возможно, тогда пауза в 500 мс).

Если вы видите August дизайн веб-сайта, вы увидите, что фон затухает; однако это делается с использованием флэш-фона. Есть ли способ сделать это с помощью jQuery или JavaScript?

Обновление 9/19/2010:

Итак, для тех, кто поступает из Google (в настоящее время это результат номер один для "затухания в фоновом режиме при загрузке", я просто подумал, что я сделаю более ясный пример реализации для всех.

Добавьте <div id="backgroundfade"></div> в свой код где-нибудь в нижнем колонтитуле (вы также можете добавить это через JavaScript, если вы не хотите, чтобы ваш DOM был загроможден.

Стиль как таковой -

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

Затем добавьте это в свой скриптовый файл JavaScript (требуется jQuery):

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

Это приводит к исчезновению элемента #backgroundfade (поле "покрытие" вашего фактического фона) через 1 секунду после завершения DOM.

Ответы

Ответ 1

Я не сделал этого сам, но он может работать.

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

Ответ 2

Да:

Не придайте телу фоновое изображение. Затем подготовьте анимированный GIF с эффектом затухания. В Javascript:

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

В jQuery это будет

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

Если вы не хотите делать анимированный трюк GIF, но нуждаетесь в поддержке JPEG или PNG, он становится неприятным. Вам нужно будет создать заполнитель <div/>, поместить его в нужное место и сыграть с непрозрачностью. Вы также должны обнаружить, когда загружено фоновое изображение, чтобы вы не получали глупых прыжков на медленных соединениях. Нерабочий пример:

var x = new Image();
x.onload = function () {
  /*
    create div here and set it 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";

Приветствия,

Ответ 3

Я не уверен, есть ли способ затухать фоновое изображение, но один из способов сделать это - использовать абсолютно позиционированное изображение с отрицательным 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:

$(window).load(function() {

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

Ответ 4

Я вижу эту ссылку,

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

Идея такова:

примените свой фон к div, которому присвоен низкий индекс z, абсолютное позиционирование и фон (подумайте об этом как обратном/обратном модальном). затем создайте свой контент на другой слой поверх него с прозрачным фоном....

теперь вы можете ссылаться на нижний уровень по id и изменять непрозрачность.

все, что ему нужно, это стек/массив фоновых магов для применения в качестве свойства слоя...

Ответ 5

Почему бы не использовать готовый script: этот делает фоновое изображение затухающим при загрузке страницы.

Он также подходит для изображения к размерам окна, но это может быть отключено, если не нужно.

Ответ 6

Мое решение:

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);

    };
};