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

Question

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

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

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

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

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

Добавьте <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.

539 6

jQuery javascript background

6 ответов:

Comments

Ничего не найдено.

Assaf Lavie · Accepted Answer · 2009-06-28 21:34:11

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

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

Boldewyn · Accepted Answer · 2009-06-28 22:04:46

Да:

Не давайте телу фонового изображения. Затем подготовьте анимированный 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'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";
Ура,

Haim Evgi · Accepted Answer · 2009-06-28 21:57:26

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

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

Идея такова:

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

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

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

Matt Bridges · Accepted Answer · 2009-06-28 22:51:36

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

</body>
JQuery:
$(window).load(function() {

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

Erwan · Accepted Answer · 2012-12-18 06:02:53

Почему бы не использовать готовый скрипт: Этот заставляет фоновое изображение исчезать при загрузке страницы.

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

Kalinin · Accepted Answer · 2010-11-08 14:20:11

Мое решение:

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

    };
};