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 sử dụng iPhone để điều khiển, xuất hình ảnh lên Smart Tivi Samsung

Ở bài trước TCN đã giới thiệu các bạn cách dùng iPhone để điều khiển SmartTV Sony, nhưng nếu sở hữu SmartTV của Samsung, bạn vẫn có thể thực hiện được điều trên với mẹo nhỏ dưới đây.

Cách kết nối đồng hồ BeU với điện thoại để bạn theo dõi cơ thể tốt hơn

Để tối ưu tốt nhất cho đồng hồ thông minh BeU thì bạn cần kết nối nó với điện thoại. Hôm nay, hãy xem ngay cách kết nối đồng hồ BeU với điện thoại của chúng ta nhé.

[Bật mí] Hướng dẫn nạp Tiktok giá rẻ không phải ai cũng biết

Để nâng cao trải nghiệm người dùng, TikTok đã liên tục cập nhật các tính năng mới, trong đó có xu TikTok (hay còn gọi là TikTok Coin). Tuy nhiên, nhiều người dùng vẫn chưa biết cách sử dụng xu TikTok và cách nạp nó như

Những cách chụp ảnh màn hình trên Galaxy Note9

Một trong những tính năng có trên hầu hết các điện thoại thông minh hiện nay chính là chụp ảnh màn hình. Nếu bạn vừa mới mua được flagship tốt nhất của Samsung, bạn sẽ muốn tìm hiểu cách chụp ảnh màn hình trên Galaxy

Quản lý chipset Nvidia Optimus trong Ubuntu với Bumblebee

Các hệ thống Ubuntu đi kèm với Nvidia Prime cung cấp cách để người dùng có thể chuyển đổi giữa GPU của Intel và Nvidia. Vấn đề ở đây là nó chỉ hoạt động cho desktop và không cho phép người dùng thiết lập GPU cho ứng

ĐÁNH GIÁ NHANH

“Mổ xẻ” và khám phá bên trong AirPods 3, có nhiều điểm khác biệt so với AirPods Pro

AirPods 3 đã chính thức được ra mắt sau nhiều ngày mong đợi. Thiết kế mẫu tai nghe mới này được đánh giá tương tự AirPods Pro. Tuy nhiên, khi “mổ bụng” và xem bên trong AirPods 3 thì lại có nhiều điểm không giống bản

So sánh vivo V20 SE và vivo Y20s: Lựa chọn nào tốt hơn

Khác với vivo Y20s - phiên bản nâng cấp của Y20, vivo V20 SE là phiên bản rút gọn của dòng V20. Tuy nhiên, cả hai chiếc máy này đều sở hữu những điểm mạnh riêng, liệu chiếc máy nào sẽ tốt hơn ở thời điểm hiện tại.

Đánh giá những ưu nhược điểm của xe máy điện PEGA Xmen Trans

Xmen Trans là chiếc xe máy điện hội tụ những công nghệ hiện đại và tốt nhất của hãng PEGA. Xe nổi có thiết kế cá tính và trẻ trung nên đã thu hút được đối tượng học sinh sử dụng là học sinh, sinh viên.