Chạy một hoạt ảnh lặp lại rất đơn giản trên một trang web?

Question

Tôi muốn tạo một hoạt ảnh chạy ngay khi có người vào trang web của tôi và mọi thứ đều tải (jQuery có thể làm điều đó không?) Chủ yếu mọi thứ sẽ tĩnh trừ một ít bóng đen của lá.

Hãy suy nghĩ về một phiên bản rất đơn giản của hình ảnh động trang web của Blizzard: http://us.blizzard.com/en-us/

Chỉ cần đơn giản bóng sau một con đường đơn giản, gần thẳng với sự thay đổi nhỏ. Nó sẽ đi trước một vật thể màu trắng lớn.

Cảm ơn bạn.

Answer 1

Điều này chắc chắn là có thể thực hiện được, mặc dù hơi phức tạp một chút. Tôi đang làm điều tương tự trên trang web tôi đang tạo, ngoại trừ với tuyết. Có 2 lớp tệp png và tôi đã sử dụng plugin backgroundPosition để làm cho animate có thể thay đổi vị trí nền - http://cornerstonegreentraining.com/comfortize.com/index.php nếu bạn muốn xem bản nháp. Biến tốc độ chỉ là vì tôi thích làm việc trong vài giây thay vì mili giây. Tôi đã sử dụng mã sau:

$(function(){ 
bgSnow(100000, 1); 
function bgSnow(animateTime, ratio){ 
     var speed = 1000; 
     $('#snow2').animate({ 
       backgroundPosition:"(" + speed*15*ratio + "px "+ speed*15 +"px)" 
     }, animateTime, 'linear'); 
     $('#snow1').animate({ 
       backgroundPosition:"(" + speed*6*ratio + "px "+ speed*4 +"px)" 
     }, animateTime, 'linear', function(){ 
     clearSnow(animateTime, ratio);    
     }); 
} 
function clearSnow(animateTime, ratio){ 
     $('#snow1, #snow2').css('backgroundPosition',"0px 0px"); 
     bgSnow(animateTime, ratio); 
} 
}); 

Bạn có thể thêm một vài hoạt ảnh khác với độ dài thời gian khác nhau cho một số biến thể. Giải pháp này hoạt động với IE7 - bạn sẽ phải tìm một giải pháp xung quanh nếu bạn sử dụng giải pháp css3 hoặc canvas.

Answer 2

Có một số cách để thực hiện việc này.

1. Nếu bạn làm bất cứ điều gì trong hàng đợi hoạt ảnh như vị trí, màu sắc, màu nền, lề, cỡ chữ, bạn có thể sử dụng hàm animate() của JQuery. Vì vậy, bạn có thể tạo hiệu ứng cho vị trí, chiều rộng và chiều cao của các phần tử HTML mà bạn có, mà bạn muốn tạo hình bóng. Bạn có thể đọc thêm về đối tượng động tại đây -

2. Sử dụng phép biến đổi CSS3, bạn có thể chạy nhiều thao tác chia tỷ lệ và chuyển đổi trên các phần tử HTML của mình. Đây là một nơi tốt để bắt đầu tìm hiểu thêm - http://css3.bradshawenterprises.com/. Dưới đây là một plugin khác giúp trong hoạt ảnh CSS3 - http://ricostacruz.com/jquery.transit/

3. Bạn cũng có thể chạy hoạt ảnh bằng yếu tố canvas - http://www.html5canvastutorials.com/. Phần tử canvas có thể được sử dụng cho các hoạt ảnh đơn giản và phức tạp. Đối với các hoạt ảnh 3D phức tạp hơn, đây là một thư viện tuyệt vời - http://mrdoob.github.com/three.js/

4. Nếu bạn cần đồ họa vector và hoạt ảnh trên các vectơ đó, bạn cũng có thể sử dụng SVG. Keith Gỗ đã làm cho một plugin jquery cho cùng - http://keith-wood.name/svg.html

Ngoài ra còn có rất nhiều plugin khác và các thư viện JavaScript/JQuery có thể giúp tạo ra hình ảnh động.

Nếu bạn muốn lớp các hình ảnh động trên một hình ảnh hoặc nền, bạn sẽ cần phải thiết lập HTML của bạn như sau:

<div class='container'> 
    <div class='gallery'> 
     <div id='item1'></div> 
     <div id='item2'></div> 
     <div id='item3'></div> 
    </div> 
</div> 

Vì vậy, bạn có thể thiết lập một nền tảng về lớp 'container' và chạy một Thư viện JQuery trên lớp 'gallery' để trượt giữa các trẻ em '#item' khác nhau mà bạn có. Ví dụ: bạn có thể sử dụng plugin JQuery Cycle - http://jquery.malsup.com/cycle/ - trên 'gallery' và trong mỗi phần tử #item, hãy đặt các phần tử hoạt hình của bạn. Hãy nhớ rằng chỉ mục z của các phần tử hoạt ảnh cần phải cao hơn chỉ mục của vùng chứa chính.

Blizzard sử dụng mô-đun Flash cho hoạt ảnh của họ. Bạn có thể tải toàn bộ hoạt ảnh của mình thông qua JQuery bằng cách sử dụng một trong hai cách:

1. $ (window) .load() - Chạy khi tất cả nội dung đã được tải và là một tính năng chuẩn của Javascript.

2. $ (tài liệu) .ready() - Chạy khi tài liệu HTML đã được tải và cụ thể cho JQuery.

Có một số cách để làm những gì bạn muốn đạt được và tùy theo yêu cầu của bạn, một phương pháp có thể hoạt động hay không. Điều quan trọng cần lưu ý là khía cạnh z-index mặc dù các yếu tố hoạt ảnh cần xuất hiện phía trên các lớp thấp hơn.

Hy vọng điều này sẽ hữu ích.