Fullscreen Video Slideshow with BigVideo.js



Đầu tiên, chúng ta hãy đánh dấu cho trang:

Chúng tôi sẽ làm trên trung tâm của màn hình, chúng tôi có một div wrapper có chứa tất cả các màn hình khác nhau. Sau đó, có một nút chúng tôi sẽ sử dụng để di chuyển giữa các màn hình.


<header> <h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1> <p>The videos in this demo are from <a href='http://beachfrontprod.blogspot.com' target='_blank'>Beachfront B-Roll</a>, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!).</p> <p><small>A demo for</small> <a href='http://dfcb.github.com/BigVideo.js/' target='_blank'>BigVideo.js</a> <small>by <a href='http://twitter.com/johnpolacek' target='_blank' rel='author'>@johnpolacek</a></small></p></header> <div class='wrapper'> <div class='screen' id='screen-1' data-video='vid/bird.mp4'> <img src='img/bird.jpg' class='big-image' /> <h1 class='video-title'>#1 Bird</h1> </div> <div class='screen' id='screen-2' data-video='vid/satellite.mp4'> <img src='img/satellite.jpg' class='big-image' /> <h1 class='video-title'>#2 Satellite</h1> </div> <div class='screen' id='screen-3' data-video='vid/camera.mp4'> <img src='img/camera.jpg' class='big-image' /> <h1 class='video-title'>#3 Camera</h1> </div> <div class='screen' id='screen-4' data-video='vid/spider.mp4'> <img src='img/spider.jpg' class='big-image' /> <h1 class='video-title'>#4 Spider</h1> </div> <div class='screen' id='screen-5' data-video='vid/dandelion.mp4'> <img src='img/dandelion.jpg' class='big-image' /> <h1 class='video-title'>#5 Dandelion</h1> </div></div> <nav id='next-btn'> <a href='#' class='next-icon'></a></nav>

TIN LIÊN QUAN

Photo Booth Strips with Lightbox

Băng ảnh đứng đẹp mắt với Lightbox 2 di chuyển bằng cách lăn bi với phong cách lạ với 'Photo Booth Strips with Lightbox'

BookBlock: A Content Flip Plugin

Một plugin jQuery mà sẽ tạo ra một thành phần giống như cuốn sách nhỏ cho phép bạn điều hướng thông qua các mục của nó bằng cách đảo các trang với hiệu ứng (BookBlock: A Content Flip Plugin )

Creative Web Typography Styles

Với một chút CSS ma thuật, chúng ta có thể chuyển đổi văn bản vào kiểu chữ rất đẹp và bỏ qua việc sử dụng các hình ảnh trong nhiều trường hợp

Old School Cassette Player with HTML5 Audio

Vintage định dạng đáp ứng công nghệ web hiện đại: máy nghe nhạc âm thanh HTML5 với các điều khiển thực tế. Hôm nay chúng tôi muốn chia sẻ một máy nghe nhạc âm thanh với giao diện trông giống như một băng nhạc trường học cũ.

THỦ THUẬT HAY

4 cách xử lý iPhone bị đơ khi đang sử dụng

Tình trạng đang sử dụng mà iPhone bị đứng không phải là quá xa lạ. Nếu tình trạng này xảy ra với tần suất thấp thì không có gì phải nói, còn ngược...

Smartphone Android chạy chậm, xử lý làm sao?

Chậm, lag là hiện tượng phổ biến của người dùng smartphone sau một thời gian dài sử dụng, đặc biệt là đối với những điện thoại trong phân khúc giá rẻ và tầm trung. Vậy có cách nào để khắc phục hay không? Cùng tìm hiểu

Hướng dẫn cách gõ tiếng Việt có dấu trên máy tính

Điều kiện cần để bạn có thể gõ được tiếng Việt trên máy tính là phải có cài bộ hỗ trợ gõ tiếng Việt. Có rất nhiều ứng dụng hỗ trợ gõ tiếng Việt nổi bật khác nhau, nhưng chúng tôi chỉ giới thiệu tới các bạn 2 bộ gõ

7 ứng dụng dành cho Android đang miễn phí và giảm giá

Tiếp tục cập nhật danh sách 'Free App' hằng ngày dành cho smartphone Android, TCN đã tổng hợp thêm khá nhiều ứng dụng và game trả phí đang được miễn phí. Nếu bạn quan tâm hãy nhanh tay tải về trước khi bị tính phí trở

Cách cài Windows 10 bằng Hyper-V và cài máy ảo trên Hyper-V

Nếu như bạn đang cần một công cụ, phần mềm để cài Windows 10 hay bất cứ hệ điều hành nào dưới dạng máy ảo thông thường chúng ta sẽ nghĩ đến ngày phần mềm VMWare. Đơn giản vì cài Windows 10 bằng VMWare rất dễ dàng, được

ĐÁNH GIÁ NHANH

So sánh hai mẫu sedan hạng D Mazda6 2.0 và Toyota Camry 2.0E tại Việt Nam

Trong tháng 10 vừa qua, 2 mẫu sedan hạng D là Mazda6 2.0 và Toyota Camry 2.0E mới nhất tại Việt Nam đã được công bố giá bán mới. Phiên bản mới nhất tại thị trường Việt Nam...

Đánh giá Mercedes A45 tại VN - xe thể thao cho người trẻ

A45 trang bị khối động cơ 376 mã lực, có thể tăng tốc từ 0-100 km/h trong 4,2 giây, chở được 5 người lớn cùng hành lý, đủ linh hoạt và dễ điều khiển để có thể sử dụng hàng ngày.

Đánh giá smartphone giải trí Lenovo A7010

Đánh giá smartphone tầm trung Huawei GR5 Đánh giá smartphone selfie Lenovo VIBE S1 Đánh giá smartphone selfie ZTE Blade S7 Đánh giá smartphone Samsung Galaxy S7 Đánh giá bộ đôi máy...