Thư viện lập trình web: Tạo hiệu ứng hình ảnh TV Poster

Tạo hiệu ứng hình ảnh cho TV Poster với CSS3 & jQuery Awesome

Xem Demo Tải về máy tính
Pass giải nén: hoangluyen.com

(Thư viện lập trình web Image Effects) Hiệu ứng giúp bạn tạo một TV Poster quảng cáo trên website cực đẹp bằng cách sử dụng CSS và Jquery. Bạn sẽ thấy một TV Poster có hiệu ứng thay đổi khi di chuột và có lớp tuyết phủ trên ảnh giống như bạn đang xem phim 3D vậy. Để làm được hiệu ứng này bạn cần lập trình với HTML và CSS như sau:

HTML

 Mã nguồn HTML gồm một thẻ div bao quanh các thẻ div còn lại có class=”poster”

<div class="poster"> <div class="shine"></div> <div class="layer-1"></div> <div class="layer-2"></div> <div class="layer-3"></div> <div class="layer-4"></div> <div class="layer-5"></div></div>

CSS

Phần thứ 1: là định dạng css chung không quan trọng (bỏ css này đi nếu bạn nhúng vào website của bạn)

body, html { height: 100%; min-height: 100%;}body { background: -webkit-linear-gradient(top, #f6f7fc 0%, #d5e1e8 40%); background: linear-gradient(to bottom, #f6f7fc 0%, #d5e1e8 40%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(800px); transform: perspective(800px);}

 Phần thứ 2:  là định dạng css cho TV Poster giúp tạo hiệu ứng hình ảnh 

.btn { text-decoration: none; color: #fff; background: #AEBEC7; font-size: 12px; border-radius: 3px; padding: 10px; text-transform: uppercase; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); position: absolute; left: 50%; top: 75px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}.poster { width: 320px; height: 500px; position: absolute; top: 50%; left: 50%; margin: -250px 0 0 -160px; border-radius: 5px; box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4); overflow: hidden;}.poster .shine { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%); z-index: 100;}.poster div[class*="layer-"] { position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; -webkit-transition: 0.1s; transition: 0.1s;}.poster .layer-1 { background-image: url("../images/1.png");}.poster .layer-2 { background-image: url("../images/2.png");}.poster .layer-3 { top: 0; bottom: 0; left: 0; right: 0; background-image: url("../images/3.png");}.poster .layer-4 { background-image: url("../images/4.png");}.poster .layer-5 { background-image: url("../images/5.png");}

Kết luận

Hoàng Luyến giới thiệu thư viện lập trình web kỳ này hy vọng giúp bạn Tạo hiệu ứng hình ảnh cho TV Poster lung linh cho Website của bạn. Với Website bằng Responsive bạn chú ý bổ xung thêm độ rộng của ảnh để đảm bảo hiển thị tốt trên Mobile. Bài viết này tham khảo từ website designmodo.com/apple-tv-effect/

Editor: Hoàng Luyến

Tag: Thư viện hiệu ứng hình ảnh cho website: Thu vien lap trinh web, thu vien thiet ke web, tai lieu thiet ke web , tai lieu lap trinh web, thu vien image effects.