Một cách để làm mờ trong nền khi tải?

Tôi đang làm việc trên thiết kế trang web và tôi cần một cách mờ dần trong hình nền của thẻ body khi nó được tải hoàn toàn (có thể sau đó tạm dừng 500 mili giây).Một cách để làm mờ trong nền khi tải?

Nếu bạn thấy thiết kế trang web của August, bạn sẽ thấy nền mờ dần; tuy nhiên, điều này được thực hiện với nền Flash. Có cách nào để làm điều này với jQuery hay JavaScript?

Cập nhật 2010/09/19:

Vì vậy, đối với những người đến từ Google (điều này hiện là một trong số kết quả cho "phai trong nền trên tải", tôi chỉ nghĩ rằng tôi d làm cho một ví dụ thực hiện rõ ràng hơn cho mọi người.

thêm một <div id="backgroundfade"></div> mã của bạn ở đâu đó ở chân (bạn cũng có thể thêm này qua JavaScript nếu bạn không muốn DOM của bạn nhận được lộn xộn.

Phong cách như vậy -

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

Sau đó thêm video này vào tập tin kịch bản JavaScript của bạn (jQuery bắt buộc):

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

này có tác dụng làm mờ #backgroundfade phần tử (hộp "bao gồm" nền thực tế của bạn) trong 1 giây sau khi hoàn thành DOM.

Nguồn

2009-06-28 Brandon Wang

Xin lỗi tôi không thấy bất cứ điều gì mờ dần trong ví dụ trang web của bạn –

@victor, WFM trên Chrome –

Nó không hoạt động trên Firefox-Intrepid Ibex –

tôi đã không làm điều này bản thân mình, nhưng nó có thể làm việc.

Bạn có thể, tôi đoán, hãy thiết lập hình nền và sau đó che nó bằng một div cũ lớn có nền đen. Sau đó chơi với độ mờ đục của div này để tạo hiệu ứng mờ dần. Div màu đen này sẽ bao phủ toàn bộ cơ thể.

Nguồn

2009-06-28 18:34:11

Tôi nghĩ điều này có vẻ là cách tốt nhất vì tôi phải làm việc đó cho những người dùng không bật JS. –

Yep:

Không cung cấp hình nền cho cơ thể. Sau đó, chuẩn bị một GIF động với hiệu ứng mờ dần. Trong Javascript:

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

trong jQuery nó sẽ là

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

Nếu bạn không muốn làm GIF lừa động, nhưng cần sự hỗ trợ cho JPEG hoặc PNG, nó lấy của khó chịu. Bạn sẽ phải tạo một trình giữ chỗ <div/>, đặt nó vào đúng vị trí và phát bằng độ mờ. Bạn cũng phải phát hiện khi hình nền đã tải, do đó bạn không nhận được những bước nhảy ngớ ngẩn khi kết nối chậm. Một phi làm việc Ví dụ:

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

Chúc mừng,

Nguồn

2009-06-28 18:22:34 Boldewyn

@Boldewyn bạn muốn chỉnh sửa câu hỏi của mình thay vì đăng nhận xét. BTW avatar đẹp;) –

thực hiện, cảm ơn cho điểm ra (và cho các bình luận trên avatar của tôi ;-)). – Boldewyn

@Brandon Wang, tôi đã thiết kế giải pháp Boldewyn (phần thứ hai) trong mã hoàn chỉnh, xem câu trả lời của tôi bên dưới – Kalinin

Tôi không chắc liệu có cách nào để làm mờ ảnh nền hay không, nhưng một cách bạn có thể làm là sử dụng hình ảnh được định vị hoàn toàn với chỉ mục z âm. Sau đó bạn có thể sử dụng jquery để mờ dần trong hình ảnh. Cách tiếp cận này có thể phức tạp hơn nếu bạn cần hình nền để xếp hoặc lặp lại.

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>

Các jQuery:

$(window).load(function() { 

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

Nguồn

2009-06-28 18:35:22

Bạn nên sử dụng $ (window) .load() thay vì $ (document) ready(), vì cách này bạn đảm bảo rằng hình ảnh đã được tải. Sau đó, cách này là tương đương (modulo ngữ nghĩa trang) để tiếp cận của tôi. – Boldewyn

Một vấn đề khác: z-index: -1 làm cho img go ** đằng sau ** phần tử body. Nếu cơ thể có một nền áp dụng cho nó, bạn sẽ không thấy img. Nó là đủ, nếu bạn bỏ qua chỉ mục z và đảm bảo rằng phần tử img là phần tử đầu tiên trong cơ thể bạn. – Boldewyn

Bạn nói đúng, tôi đã sửa đổi mã ví dụ. Tôi thực sự thích giải pháp mà bạn tạo ra một div lớn như trang kết xuất và làm mờ nó ra (chăm sóc của vấn đề với tiling/lặp đi lặp lại nền). Bạn phải chắc chắn rằng div của bạn là đủ lớn mặc dù, hoặc sử dụng offsetHeight và offsetWidth của toàn bộ tài liệu. –

tôi thấy liên kết này,

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

ý tưởng là:

ap ply nền của bạn để một div đó được chỉ định một z-index thấp, vị trí tuyệt đối và một nền (nghĩ về nó như là một phương thức đảo ngược/trở lại). sau đó tạo nội dung của bạn thành một lớp khác ở trên cùng với nền trong suốt ....

giờ đây bạn có thể tham chiếu lớp dưới cùng theo id và thay đổi độ mờ.

tất cả những gì cần là một chồng/mảng của nền Mage để áp dụng làm tài sản cho lớp ...

Nguồn

2009-06-28 18:36:44

Tại sao không sử dụng một kịch bản làm sẵn: this one làm cho một hình nền fade-in trên tải trang .

Nó cũng phù hợp với hình ảnh với kích thước của cửa sổ, nhưng điều này có thể bị vô hiệu hóa nếu không cần thiết.

Nguồn

2010-07-08 00:21:33 Erwan

-1

Giải pháp của tôi:

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

    }; 
};

Nguồn

2010-11-08 12:20:11 Kalinin

Anh ấy muốn làm mờ hình nền chứ không phải hình ảnh. –

Một cách để làm mờ trong nền khi tải?

Trả lời

Các vấn đề liên quan