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

Đem nút View Image trở lại trên trình duyệt Chrome, Firefox

Hôm nay TCN chia sẻ cho các bạn một extension giúp đem nút View Image trở lại trên trình duyệt Chrome, Firefox. Hãy tải và trải nghiệm nhé.

Tiện ích Internet

Hướng dẫn cài MultiStar - Nâng cấp khả năng đa nhiệm cho smartphone Samsung

MultiStar là một add-on trong Good Lock, tập trung vào các tùy chọn hoạt động đa cửa sổ, bạn có thể cài đặt riêng mà không cần cài Good Lock (nếu muốn cài cả bộ Good Lock, bạn tham khảo tại đây, ở bài này chúng ta chỉ

Hệ điều hành

[iOS/Jailbreak] Danh sách các tweak hay tương thích với bản Jailbreak 10.2 - Phần 1

Tweak là một trong những thứ không thể thiếu đối với những ai đã Jailbreak thiết bị, nhưng ở phiên bản thử nghiệm dành cho iOS 10.2, số lượng tweak khá hạn hẹp. Tuy nhiên, TECHRUM đã tổng hợp một danh sách các tweak

Thủ thuật

Hướng dẫn cài đặt phiên bản Electra Jailbreak RC 1.3

Mới đây, phiên bản Electra Jailbreak RC 1.3 tiếp tục bị rò rỉ bởi các lập trình viên, mặc dù chưa được phát hành chính thức nhưng khả năng hoạt động tạm ổn và có thể cài được khá nhiều tinh chỉnh thông qua Cydia.

Thủ thuật

Active Win 10 cài vĩnh viễn, bao gồm Product Key miễn phí

Bạn đang tìm kiếm cách dễ nhất để kích hoạt windows 10 miễn phí phải không? Hãy cùng trangcongnhe.vn tìm hiểu chi tiết cách kích hoạt miễn phí các phiên bản windows 10 (windows pro, home và các phiên bản khác).

ĐÁNH GIÁ NHANH

Xe cộ / Đánh giá

Ưu nhược điểm và giá bán chính thức của Ford Explorer 2018

Ford Explorer 2018 cùng với Toyota Land Cruiser Prado là 2 Lựa chọn xe SUV 7 chỗ cao cấp được ưa chuộng trong tầm giá 2 tỷ đồng tại Việt Nam hiện nay. Ford Explorer trang bị nhiều tính năng cao cấp, công nghệ hiện đại

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

Đánh giá Samsung Galaxy J2 (2016): “Ngon” trong tầm giá

Điện thoại thông minh Galaxy J2 2016 là thiết bị Android giá rẻ mới nhất của Samsung. Đây là phiên bản kế thừa của chiếc J2 2015 với những nâng cấp về cấu hình, và...

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.