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>

Cập nhật ngày:
19-09-2012, 17:03

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

Thủ thuật

Cách kiểm tra tình trạng pin siêu nhanh trên iPhone, iPad và MacBook

Sau một thời gian sử dụng, các thiết bị điện tử chắc chắn sẽ bị chai pin. Điều này xảy ra khi Pin lithium-ion - loại pin thường được dùng trong các thiết bị như điện thoại, máy tính bảng hay laptop ngày nay, bị mất pin

Thủ thuật

Hướng dẫn lấy lại mật khẩu gmail, tài khoản google bị mất

Tuy nhiên, trong quá trình sử dụng vì một lý do nào đó bạn không thể đăng nhập vào tài khoản Gmail của mình. Trong trường hợp này bạn sẽ phải xử lý như thế nào? Đừng lo, bài viết này TCN sẽ hướng dẫn bạn cách lấy lại

Thủ thuật

Nhận ổ cứng nhưng không hiển thị: Nguyên nhân và cách khắc phục

Nhận ổ cứng nhưng không hiển thị thì hai nguyên nhân phổ biến nhất là controller bị lỗi và bạn chưa định dạng ổ cứng chưa đúng cách.

Thủ thuật

Cách kích hoạt giao diện trình duyệt Chrome mới trên iOS

Bằng cách kích hoạt giao diện mới của trình duyệt Chrome trên iOS, người dùng sẽ có được một giao diện mới đẹp mắt, hiện đại và dễ dàng thao tác hơn khi so với giao diện cũ. Bên cạnh đó, nhờ giao diện mới mà người dùng

Thủ thuật

9 gói giao diện miễn phí đến từ Microsoft, mời các bạn tải về

Microsoft vừa phát hành 09 giao diện (theme) mới hoàn toàn miễn phí cho Windows 10 trên Microsoft Store. Nếu muốn thay giao diện và hình nền Windows 10 mới, hãy lựa chọn và tải về nhé.

ĐÁNH GIÁ NHANH

Điện thoại / Đánh giá

[MWC 2017] Đánh giá LG G6: Không còn mang người dùng ra thử nghiệm, LG đã đi đúng hướng hơn

Techrum - LG đã chính thức giới thiệu chiếc flagship mới nhất của hãng là G6 trong sự kiện thường niên MWC 2017. So với thế hệ tiền nhiệm, G6 có nhiều thay đổi rất lớn: ngoài từ bỏ thiết kế kiểu module vốn đã được thử

Điện thoại / Đánh giá

Trên tay và đánh giá nhanh Vivo V3 Max: Thiết kế cao cấp, cấu hình mạnh

V3 Max là một trong những chiếc điện thoại đầu tiên của nhà sản xuất Vivo được bán chính hãng tại Việt Nam với thiết kế cao cấp và cấu hình mạnh mẽ.

Thiết bị số / Đánh giá

Đánh giá WD My Passport SSD 1 TB: USB-C, ruột là ổ M.2 SanDisk, hiệu năng khá nhưng giá quá cao

WD My Passport SSD là chiếc ổ SSD di động đầu tiên của Western Digital và cũng là đầu tiên trong dòng My Passport. Chiếc ổ này chỉ vừa được bán ra, có 3 tùy chọn dung lượng là 256/512 GB và 1 TB.