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

Nguyên nhân và cách khắc phục lỗi loa điện thoại bị nhỏ

Loa được biết đến là một linh kiện vô cùng quan trọng của điện thoại giúp bạn gọi điện, nghe nhạc, xem video,... Nếu loa điện thoại bị nhỏ, hư bị chắc chắn sẽ gây ảnh hưởng không nhỏ đến công việc cũng như giải trí của

Hướng dẫn dịch văn bản trong ảnh với Google Translate

Đừng lo lắng! Google Translate (Google Dịch) trên điện thoại cho phép sử dụng camera trên chính thiết bị của bạn để dịch văn bản, cho dù với hình ảnh được chụp tại thời điểm đó hay bước ảnh đã được lưu từ trước.

Hai cách kiểm tra dung lượng pin chính xác nhất từ phiên bản iOS 11.3

Việc kiểm tra dung lượng pin là vô cùng cần thiết với người dùng iPhone/ iPad. Vì chúng ta sẽ biết được tình trạng pin, qua đó có quyết định thay pin đúng lúc nhằm tránh tình trạng iPhone bị chậm đi do pin bị chai. Đây

Xóa mọi thông tin được lưu trên bức ảnh trên iPhone với Siri Shortcuts

Thông thường, khi mở bộ sưu tập ảnh trong ứng dụng Photos của iPhone, iPad thì bạn sẽ thấy mỗi bức ảnh đều đi kèm với vị trí mà bạn đã chụp. Đây là một tính năng vô cùng hữu ích để bạn biết được bức ảnh đó đã được chụp

Sửa lỗi Cốc Cốc không tải được video về máy tính

Một trong những ưu điểm của trình duyệt Cốc Cốc là cho phép tải video trên mạng về máy nhanh chóng chỉ trong một cú nhấp chuột.

ĐÁNH GIÁ NHANH

Đánh giá Lenovo A7010: 'Ngon, bổ, rẻ!'

Có giá chỉ 5 triệu đồng nhưng smartphone trung cấp Lenovo A7010 vẫn được tích hợp nhiều công nghệ thú vị, hiệu năng ổn định, thời lượng pin dài và đặc biệt là những công nghệ âm...

Đánh giá camera sau Galaxy J8: Đáp ứng hầu hết nhu cầu chụp ảnh của các bạn trẻ hiện nay

Trước hết hãy lướt qua một chút về cấu hình của camera trên Galaxy J8, thiết bị sở hữu cụm camera kép phía sau với 1 cảm biến ảnh 19MP và 1 cảm biến đạt độ phân giải 5MP, cả hai đều có khẩu độ lớn F/1.9, mang lại khả