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

Hướng dẫn download lịch sử chat Yahoo! Messenger

Là phần mềm chat miễn phí đầu tiên có mặt tại Việt Nam, Yahoo đã gắn bó với tuổi thơ và thậm chí là chuyện tình cảm của không biết bao cặp đôi. Nhưng trước sự phát triển như ngày nay của công nghệ và các ứng dụng di

Một số phần mềm ghép ảnh tốt nhất trên máy tính

Bạn có thể ghép nhiều ảnh cùng một chủ đề, cùng một nơi khi đi du lịch và gửi cho bạn bè chẳng hạn, đó cũng là xu thế mà giới trẻ hiện nay hay làm, để giúp các bạn ghép được những bức ảnh đẹp và độc đáo nhất

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

Vô hiệu hóa bàn phím máy tính với ứng dụng KeyboardLocker

KeyboardLocker sẽ giúp bạn khoá bàn phím máy tính để bảo vệ sự riêng tư trong những lúc đi ra ngoài, hay nghỉ trưa,… hoặc đơn giản hơn là troll bạn bè. Để thiết lập khoá bàn phím, các bạn thực hiện theo những thao tác

Hướng dẫn "phá" mật khẩu máy tính chạy Windows

Windows Password Recovery Pro là công cụ mà bất kỳ kỹ thuật viên máy tính nào cũng biết tới, đây là ứng dụng giúp bạn dễ dàng lấy lại mật khẩu Windows khi đã lỡ quên chúng. Cùng tìm hiểu cách cài đặt và sử dụng nhé!

ĐÁNH GIÁ NHANH

So sánh cấu hình, hiệu năng Snapdragon 625 và Exynos 7872: Lựa chọn nào tốt hơn?

Mới đây, Samsung vừa chính thức ra mắt bộ vi xử lý mới thuộc phân khúc tầm trung của hãng là Exynos 7872 và nó đã được trang bị trên chiếc smartphone vừa mới ra mắt của Meizu là M6s.

Đánh giá Dell XPS 13 [2018]: hiệu năng mạnh mẽ, pin trâu, mỏng manh nhưng đầy chắc chắn

Điểm nổi bật của Dell XPS 13 9370 với màu sắc hoàn toàn mới, Bên trong XPS 13 9370 phiên bản vàng rất bắt mắt với toàn một màu trắng từ viền màn hình đến bàn phím và chiếu nghỉ tay.

Đánh giá camera Zenfone Max Pro M2: Chơi game ngon, chụp có đẹp?

Khi ra mắt, Zenfone Max Pro M2 được định hình là smartphone chơi game tầm trung dành cho những ai không có điều kiện sắm ROG Phone. Bên cạnh cấu hình tối ưu cho việc chơi game thì Max Pro M2 còn được trang bị cụm camera