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

Hệ điều hành

Mua bản quyền phần mềm Microsoft thế nào có lợi nhất?

Một trong những nguyên nhân dẫn đến mất an toàn hệ thống là do sử dụng phần mềm không bản quyền hoặc sử dụng phần mềm có bản quyền nhưng không nâng cấp đúng thời hạn. Hiện nay, theo ước tính tại Việt Nam có hơn 90%

Thủ thuật

Một số cách giúp kiểm soát thông báo từ Facebook hiệu quả hơn

Như chúng ta đã biết, ứng dụng Facebook luôn hiển thị thông báo từ bất kỳ hoạt động nào trên mạng xã hội, cung cấp cho người dùng khả năng cập nhật tin tức dễ dàng hơn.

Thủ thuật

Cách sửa màn hình iphone bị đen, không lên màn hình

Màn hình iPhone bị đen là một lỗi rất nghiêm trọng. Tuy ít trường hợp bị màn hình iPhone đen, nhưng người dùng Apple nên trang bị cho mình kinh nghiệm sửa màn hình iphone bị đen để phòng trường hợp không may. Hai cách

Thủ thuật

Những cách cài đặt Microsoft Office trên Linux hiệu quả

Thực tế rằng, người dùng Linux có thể sử dụng LibreOffice, Google Docs, và thậm chí các ứng dụng Web của Microsoft Office, nhưng một số người vẫn cần hoặc chỉ muốn phiên bản máy tính của Microsoft Office. May mắn thay,

Thủ thuật

Cách tắt tự động Update trên Windows 10

Tắt tính năng update trên Windows 10, chặn Win 10 tự động cập nhật, hủy tính năng tự cập nhật trên Windows 10, bạn sẽ phải làm những điều này một cách thủ công vì tùy chọn tắt Update hoàn toàn không còn được tích hợp

ĐÁNH GIÁ NHANH

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

Trên tay Galaxy M32 5G: Camera 48 MP, pin 5.000 mAh, giá từ 6.5 triệu

Galaxy M32 5G đập hộp có phụ kiện ? Galaxy M32 5G cấu hình ra sao? Galaxy M32 5G giá bao nhiêu? Hãy cùng tìm câu trả lời qua bài viết trên tay Galaxy M32 5G dưới đây nhé.

Xe cộ / Đánh giá

Đánh giá nhanh Isuzu mu-X 2018 giá 820 triệu đồng mới ra mắt

Isuzu mu-X 2018 mới cũng góp phần làm cho phân khúc xe SUV 7 chỗ cỡ trung tại Việt Nam cạnh tranh mạnh hơn trong vài tháng gần đây, kể từ khi các đối thủ của mu-X đã lần lượt có các phiên bản mới gồm Chevrolet

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

[Đánh giá] Asus X99-A II - Hiệu năng tương đối, giá tốt

Nền tảng X99 được thiết kế cho những chuyên gia, những người dùng đòi hỏi sức mạnh của nhiều nhân. Tuy nhiên, các nhà sản xuất bo mạch chủ không chú trọng nhiều đến những sản phẩm này, bởi số lượng người dùng quá ít.