Tôi có một khách hàng với trang web lập kế hoạch sự kiện yêu cầu các trang của mình mờ dần vào nhau. Tôi không có ý tưởng làm thế nào tôi có thể thực hiện điều này. Bất kỳ ý tưởng? Có anyway để làm điều này mà không có đèn flash?Làm thế nào để bạn làm cho một trang html mờ dần trong khi một mờ dần trong?
Chắc chắn có được giữ của một khuôn khổ javascript. jQuery là phổ biến (vì nó là ace), nhưng có Mootools, Prototype, và Dojo đến tên một vài.
Tôi không chắc chắn nếu crosssfading có thể được thực hiện đáng tin cậy trên tất cả các trình duyệt mà không có hiện vật nhảy/nhảy. Ngay cả những ví dụ Dancrumb chỉ là một chút ropey (không có xúc phạm dự định Dan).
Process-khôn ngoan, bạn có thể có 3 lớp (trên xuống dưới)
khi người dùng cố gắng điều hướng đến trang thứ hai, hãy tải nó vào vùng chứa bằng ajax. Khi trang đã tải xong, hãy bắt đầu làm mờ màn hình. Khi màn hình ở mức Opacity 100%, thao tác DOM để di chuyển nội dung đã tải ra khỏi vùng chứa ẩn và vào trang hiện tại, sau đó bắt đầu làm mờ màn hình trở lại.
EDIT trên sidenote - Tôi sẽ triệu tập tất cả mojo webdev của mình và cố gắng thuyết phục khách hàng ý tưởng xấu của tôi là trang bị mờ hoàn toàn trên trang web được thiết kế để giao tiếp thông tin. Rõ ràng là tôi biết FA ngọt ngào về dự án này nên cảm thấy tự do để tát tôi xuống; nhưng tôi chưa bao giờ thấy một trường hợp mà các hiệu ứng và chuyển tiếp ưa thích đã cải thiện khả năng sử dụng của một trang web khi được sử dụng ở cấp trang. Tôi biết nó sẽ kích thích tôi nếu tôi phải chờ đợi một quá trình chuyển đổi ưa thích để kết thúc trước khi tôi có thể tiếp tục điều hướng ...
+1, đặc biệt là đối với sidenote – sleske
Nếu đó là một hiệu ứng nhanh, như 0.5s, sau đó tôi không đồng ý ... Windows có các menu animate đẹp và thu nhỏ.tối đa hóa chức năng như MacOS (Trong thực tế nhiều hơn như vậy). –
Mở menu và tối thiểu/tối đa hóa màn hình là các tương tác hoàn toàn khác nhau để điều hướng trang mặc dù ..., – Mathew
Bạn có thể tải nội dung bằng cách sử dụng yêu cầu AJAX và sau đó sử dụng javascript để làm mờ một trang và mờ dần trong một trang khác? Trong jQuery, nội dung nào đó dọc theo dòng:
$.get('newpage.html', {}, function(res){
$('#content-container').fadeOut().html(res).fadeIn();
});
Không hoàn hảo, nhưng đó là một bước đi đúng hướng? Đây không phải là một cái gì đó thực sự HTML đã được thực hiện cho ...
Cảm ơn, Joe
trang chuyển tiếp được hỗ trợ natively với IE, sử dụng thẻ META. Xem Microsoft page about Filters and Transitions để biết thêm
Đối với một cách tiếp cận trình duyệt bất khả tri (sử dụng Javascript), xem this Stack Overflow question
Bạn có liên kết cho nội dung trên IE? –
Lưu ý: Bộ lọc và Chuyển tiếp không được dùng nữa kể từ IE9. – Darwyn
Sẽ không hoạt động trong IE, nhưng WebKit và FireFox đều trên thuyền với quá trình chuyển đổi CSS, và chúng chạy trơn tru hơn rất nhiều so với bất kỳ JavaScript nào.
này nên làm việc, mà không dựa vào Ajax (jQuery):
$(function(){
/*
Add this code to every page.
We start by hiding the body, and then fading it in.
*/
$('body').hide().fadeIn('fast');
/*
Now we deal with all 'a' tags...
*/
$('a').click(function(){
/*
Get the url from this anchors href
*/
var link = $(this).attr('href');
/*
Fade out the whole page
*/
$('body').fadeOut('fast', function(){
/*
When that's done (on the 'callback') send the browser to the link.
*/
window.location.href = link;
});
return false;
});
});
Worth lưu ý tuy nhiên là nếu bạn đang tải js ở dưới cùng của trang (như chúng tôi thường được yêu cầu làm), trên một trang tải chậm trang có thể được nhìn thấy, sau đó vô hình, và sau đó mờ dần trong một lần nữa ... Mà sẽ trông rất lạ.
Một giải pháp sẽ là chỉ ẩn nội dung trong CSS, nhưng bạn có thể, có thể, có khách truy cập với JS đã tắt nhưng CSS được bật, sau đó họ sẽ chỉ có một trang trống. Ngoài ra, bạn có thể sử dụng một lượng nhỏ js ở đầu trang (không phụ thuộc vào jQuery) để che giấu cơ thể.
Cuối cùng, tuy nhiên, tại sao? Tôi nghĩ nếu tôi truy cập trang web của bạn, những hiệu ứng này sẽ bắt đầu làm tôi khó chịu một cách nhanh chóng. Tại sao không chỉ đưa người dùng đến trang mà họ yêu cầu?
thử plugin jQuery này. đó là tutorial on page transitions
Điều gì sẽ xảy ra với các trang chứa yếu tố Flash/Video hoặc các nội dung phức tạp khác? Liệu những phai đó có đúng không?
Đây là cách hacky mà tôi vừa nghĩ đến. Tương tự như câu trả lời của Alex Lawford, nhưng hy vọng một chút tốt hơn:
Khi nhấp vào liên kết, hãy gửi yêu cầu AJAX cho trang mới, nhưng không làm bất kỳ điều gì với câu trả lời. Khi bạn nhận được phản hồi, sau đó làm mờ trang hiện tại, đưa ra lệnh tiêu chuẩn window.location = <newurl> và có javascript ở bên đó ngay lập tức ẩn rồi mờ dần trong tài liệu mới.
Hy vọng ở đây là phản hồi từ cuộc gọi AJAX được lưu vào bộ nhớ cache, vì vậy thời gian giữa mờ dần và mờ dần sẽ không đáng kể.
Tôi sẽ chỉ nhắc lại câu đầu tiên: đây là hacky.
Điều này có thể hơi trễ một chút, nhưng để làm mờ một trang Khi tải, và sau đó mờ dần Khi nhấp chuột, tôi khuyên bạn nên sử dụng jQuery. Tôi đã viết kịch bản nhỏ này nhanh chóng mà sẽ làm các trick rằng sau của bạn. Hãy xem nó, và tôi sẽ giải thích dưới đây.
CSS
body { display:none; }
Các JS
$(document).ready(function()
{
$('body').fadeIn("slow", 0.0);
$('body').fadeIn("slow", 0.1);
$('body').fadeIn("slow", 0.2);
$('body').fadeIn("slow", 0.3);
$('body').fadeIn("slow", 0.4);
$('body').fadeIn("slow", 0.5);
$('body').fadeIn("slow", 0.6);
$('body').fadeIn("slow", 0.7);
$('body').fadeIn("slow", 0.8);
$('body').fadeIn("slow", 0.9);
$('body').fadeIn("slow", 1.0);
$('a').click(function(){
$('body').fadeOut();
setTimeout("nav('"+this.href+"')",1000);
return false;
});
});
function nav(href){
location.href=href;
};
CSS giữ lại màn hình hiển thị của cơ thể, cho phép người JS để bắt đầu hiệu ứng mờ dần trên tải của trang. Phần thân fadeIn được đặt theo khoảng thời gian để cho phép hiệu ứng mờ dần mượt mà hơn, cho phép tải trang web. Tôi đã đặt hiệu ứng fadeOut để kích hoạt khi bất kỳ liên kết anchor nào được bấm (bạn có thể thay đổi nó bất cứ điều gì bạn muốn hoạt động như kích hoạt mờ dần). Khi trang bị mờ dần, nó sẽ mờ dần thành màn hình 'Trắng'. Để tránh điều này, hãy đặt màu nền HTML của bạn thành bất kỳ HEX nào để phù hợp với màu của trang web.
Tập lệnh đó có lẽ là giải pháp tốt nhất và nhanh nhất để cấy ghép trên bất kỳ trang web nào. Nó đã được thử nghiệm trên IE7-8, FF 3+ và Opera 9-10 và hoạt động như một sự quyến rũ. Thưởng thức!
Trang chuyển tiếp mờ dần luôn có vẻ như "mùi giao diện người dùng web" đối với tôi. – Pierreten
Tôi không đồng ý về nguyên tắc đó là một ý tưởng sai, nhưng làm thế nào điều này sẽ làm việc trong thực tế khi tải trang mất vài giây? Thông thường, một trang sẽ tăng dần khi mỗi hình ảnh/phần được nhận, bạn sẽ phải đợi toàn bộ trang, bao gồm các phần tử flash để tải trước khi bắt đầu mờ dần không? –
@John - Ajax có thể giải quyết vấn đề này. Hiển thị gif tải nhỏ trong khi tải trang -> mờ dần vào/ra. –