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

Đây là 5 cách sửa lỗi Zalo không gửi được ảnh

Bạn là người thường xuyên sử dụng ứng dụng Zalo để gửi hình ảnh. Bạn đang cần gửi ảnh cho bạn bè và người thân nhưng điện thoại đang đang gặp lỗi Zalo không gửi được ảnh.

Cách giải quyết hoàn toàn vấn đề máy tính chạy chậm bất thường!

Nguyên nhân khiến máy tính trở nên chậm chạp có rất nhiều. Trong quá trình sử dụng có rất nhiều phần mềm được cài đặt có thể xung đột lẫn nhau, có nhiều rác hệ thống khiến hệ thống bị ì ạch.

Top 5 giải pháp thay thế Google Play tốt nhất cho Android

Google Play được cho là cửa hàng ứng dụng lớn nhất và là nơi hoàn hảo để tải các ứng dụng trên Android. Tuy nhiên, có rất nhiều giải pháp thay thế cửa hàng trực tuyến này - nơi bạn có thể tải các ứng dụng không có trên

Làm thế nào để giải phóng bộ nhớ iPhone hiệu quả?

Sở hữu một chiếc iPhone hiện nay không khó nhưng để mua những phiên bản bộ nhớ 64GB hay 128GB thì có lẽ vẫn còn hơi cao so với nhiều người. Chính vì thế chúng ta thường chấp nhận sống chung với phiên bản 16GB nhưng

ĐÁNH GIÁ NHANH

Đánh giá iPhone 15 Plus từ chuyên trang newphone15.com

Những thông tin về những tính năng, diện mạo… của iPhone 15 Plus luôn là chủ đề bàn tán sôi nổi của iFans trong khoảng thời gian gần đây. Liệu phiên bản Plus năm nay được trang bị những cải tiến gì nổi trội so với tiền

Đánh giá nhanh miếng dán cường lực 3D tràn màn hình cho iPhone

Trong bài này mình chia sẻ với anh em về trải nghiệm của mình sau khi sử dụng miếng dán cường lực 3D cho iPhone màn hình bo 2.5D sau hơn 2 tuần sử dụng. Cảm giác đầu tiên là nặng, rất nặng.

Đánh giá chi tiết thời lượng Pin Galaxy C9 Pro

C9 Pro được trang bị màn hình 6 inch Super AMOLED, Full HD, mật độ điểm ảnh 367 ppi, chạy chip Snapdragon 653, dung lượng RAM 6GB, chạy Android 6.0 Marshmallow, 2 SIM. Camera trước/sau đều 16MP, pin 4.000 mAh, hỗ trợ