RSSCSS

Tạo ảnh động chất lượng cao với CSS3 và jQuery

Tạo các hình ảnh động có nhiều màu sắc và kích thước lớn hơn so với các hình dạng GIF thông thường thông qua việc sử dụng JPEG với CSS3 và jQuery.

Tạo các hình ảnh động có nhiều màu sắc và kích thước lớn hơn so với các hình dạng GIF thông thường thông qua việc sử dụng JPEG với CSS3 và jQuery.

Khi khách truy cập vào 1 website, họ chỉ thấy 1 hình ảnh thông thường nhưng sau đó họ sẽ phải bất ngờ khi hình ảnh  chuyển động trên trang đang xem

Có rất nhiều cách để tạo ảnh động trên web nhưng lại có 1 số hạn chế khi tiếp cận ảnh động thường xuyên. Trước đó, ảnh động sử dụng dạng hình GIF, đây là cách đơn giản và linh hoạt để tạo ra hình ảnh động nhưng lại có nhiều hạn chế

1 trong những hạn chế đó là giới hạn về size (kích thước) để tạo 1 hình động GIF, kích thước được trả về tương đối nhỏ. Như vậy, các hình ảnh có thu hút được khách truy cập hay không còn tùy thuộc vào kích thước và vị trí của chúng trên trang.

Bài viết này hướng dẫn các bạn tạo ra các ảnh động với JPG, CSS3 và JQuery

1. Chủ đề

Chọn chủ đề là bước cần thiết đầu tiên để bắt đầu tiến hành các công đoạn tiếp theo

1

2. Import vào Photoshop

Để chuyển đổi hình ảnh sang 1 định dạng phù hợp thì có thể mở trong Photoshop, thiết lập không gian làm việc phù hợp để cài đặt chuyển động, bằng thao tác Window --> Workspace --> Motion. Hình ảnh trong video là những hình ảnh động liên tục và các hiệu ứng phải giống hệt nhau từ ảnh đầu tới ảnh cuối

2

3. Chọn tùy chọn

Khi đã xác định các bit của video để sử dụng, kéo trong khu vực làm việc xử lý trên timeline để đánh dấu khu vực đang thực hiện. Thực hiện theo phương pháp riêng thông qua mỗi frame đã chọn, sử dụng frame để hạn chế chuyển động được hiển thị trong phần cuối cùng, điểm bắt đầu và điểm kết thúc phải cùng 1 vị trí. Khi thấy phù hợp, chọn toàn bộ canvas (entire cavas) - (Ctrl/Cmd + A), sau đó copy (Ctrl/Cmd + C) và paste (Ctrl/Cmd + V) trên 1 layer mới

3

4. Mask

Thêm 1 layer mask vào layer hiện có, sử dụng sơn màu đen trên mask để loại bỏ vùng ảnh mà chúng ta không muốn có trong phần ảnh động. Khi làm điều này, thao tác sẽ tạm dừng mỗi khi hình ảnh bị che trong mask, đảm bảo video chứa đủ trong các khoảng trống trong frame

4

5. Render Video

Khi đã có kết quả rõ ràng với phần hình ảnh có giới hạn, chọn File --> Export --> Render Movie để lưu sản phẩm thành 1 video mới. Giảm tỷ lệ frame từ 12 đến 15 frame mỗi giây thì sẽ giảm được số lượng frame cần để render trong spire cuối cùng, từ đó có thể giảm kích thước tập tin.

5

6. Tải video

Khi đã có video, mở lại bằng Photoshop bằng thao tác File --> Import --> Video Frame to Layer. Tùy chọn này cho phép render từng frame trên 1 layer mới và dễ dàng xuất ra 1 loạt các tập tin JPEG, không tick vào tùy chọn Make Frame Animation trong phần import

6

7. Xuất ra JPG

Cần save layer dưới dạng JPEG để đạt chất lượng cao, có thể lưu tự động bằng thao tác File --> Scripts --> Export Layers to Files. Nếu muốn đảo các hình ảnh động thì copy các frame đảo và sắp xếp chúng trong các layer trước khi xuất để có được vòng lặp các ảnh động liền mạch.

7

8. Bố trí sprite và màu sắc

Tạo 1 new document trong Photoshop cùng độ rộng và chiều cao với frame của ảnh động. Tạo 1 sprite và thêm bất kỳ hiệu chỉnh màu sắc nào cho từng phần hoặc cho tổng thể mà bạn muốn áp dụng

8

9. Tạo vùng chứa

Vì có 1 spire ảnh duy nhất  mà không phải là 1 loạt các tập tin nên phải hiện thị các hình đầu tiên khi tải. Thực hiện bằng cách thiết lập thẻ <div> để định dạng kích thước khung viền. Frame đầu tiên của ảnh động sẽ đưa vào vùng này và phần sprite còn lại sẽ load ra khỏi tầm nhìn


 

9

10. Bổ sung CSS

Đây là cách đơn giản nhất, cần dùng ảnh làm hình nền. Thêm CSS hiển thị vị trí đặt thẻ <div>, thiết lập độ rộng và chiều cao trong thẻ <div>. Lưu ý: sử dụng định vị hình ảnh tuyệt đối để hình ảnh đạt chất lượng tốt hơn

	#mycinemagraph {
	        position:       relative;
	        margin:                 auto;
	        width:          960px;
	        height:                 540px;
	        border:                 20px solid #fff;
	        box-shadow: 0px 0px 10px #000;
	        background: transparent url(cinemagraph.jpg) no-repeat 0px 0px;
	        -moz-animation:  flipframes 3s infinite;
	        -webkit-animation: flipframes 3s infinite;
	        animation:  flipframes 3s infinite;
	}

10

11. Sử dụng hiệu ứng CSS

Sử dụng hiệu ứng CSS để đạt hiệu quả như mong đợi khi cho hiển thị trên trình duyệt

	@keyframes flipframes {
	        0% {
	                background-position: 0px 0px;
	        }
	        6.999% {
	                background-position: 0px 0px;
	        }
	        7% {
	                background-position: 0px -540px;
	        }
	        13.999% {
	                background-position: 0px -540px;
	        }
	        14% {
	                background-position: 0px -1080px;
	        }
	        20.999% {
	                background-position: 0px -1080px;
	        }
	        21% {
	                background-position: 0px -1620px;
	        }
	        27.999% {
	                background-position: 0px -1620px;
	        }
	        28% {
	                background-position: 0px -2160px;
	        }
	        34.999% {
	                background-position: 0px -2160px;
	        }
	        35% {
	                background-position: 0px -2700px;
	        }
	        41.999% {
	                background-position: 0px -2700px;
	        }
	        42% {
	                background-position: 0px -3240px;
	        }
	        48.999% {
	                background-position: 0px -3240px;
	        }
	        49% {
	                background-position: 0px -3780px;
	        }      
	        54.999% {
	                background-position: 0px -3780px;
	        }
	        55% {
	                background-position: 0px -4320px;
	        }
	        61.999% {
	                background-position: 0px -4320px;
	        }
	        62% {
	                background-position: 0px -4860px;
	        }
	        68.999% {
	                background-position: 0px -4860px;
	        }
	                background-position: 0px -5400px;
	        }
	        75.999% {
	                background-position: 0px -5400px;
	        }
	        76% {
	                background-position: 0px -5940px;
	        }
	        82.999% {
	                background-position: 0px -5940px;
	        }
	        83% {
	                background-position: 0px -6480px;
	        }
	        89.999% {
	                background-position: 0px -6480px;
	        }
	        90% {
	                background-position: 0px -7020px;
	        }
	        94.999% {
	                background-position: 0px -7020px;
	        }
	        95% {
	                background-position: 0px -7560px;
	        }
	        99.999% {
	                background-position: 0px -7560px;
	        }
	        100% {
	                background-position: 0px 0px;  
	        }                                      
	}

11

12. Modernizr các trình duyệt cũ

Không phải mọi trình duyệt đều tương thích với CSS3, vì vậy đối với các trình duyệt cũ cần phải lựa chọn: giữ lại hình ảnh tĩnh hoặc dùng script. Thêm Modernizr Javascript plugin để tạo jQuery bằng cách tìm hỗ trợ từ HTML5. Các ảnh động đơn giản chỉ là 1 vòng lặp và định vị hình ảnh nền trên 1 frame cho mỗi lần lặp. 

	        i=0; // counter to indicate which frame we're showing
	        frameheight = 540; // height of the frame
	        numframes = 15 // total number of frames in sprite
	 
	        $(document).ready(function(){
	                // Only apply the fallback to non-capable browsers
	                $(".no-cssanimations").each(function(){
	                        var t = setInterval("changeframe()",200); // aim for around 10fps
	                });
	        });
	 
	        function changeframe() {
	                i = i + 1;
	                if (i>(numframes-1)) {
	                        i=0;
	                }
	                newposition = 0 - (i*frameheight);
	                $("#mycinemagraph").css({backgroundPosition:"0px "+newposition+"px"});
	        }

12

Nguồn: netmagazine.com
Tác giả: Sam Hampton-Smith

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu