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

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

11 голосов
/ 28 июня 2009

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

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

Обновление от 19.09.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.

Ответы [ 6 ]

4 голосов
/ 28 июня 2009

Yep:

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

Приветствия

2 голосов
/ 28 июня 2009

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

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

Идея такова:

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

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

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

2 голосов
/ 28 июня 2009

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

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

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

0 голосов
/ 08 ноября 2010

Мое решение:

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

    };
};
0 голосов
/ 08 июля 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...