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

Cách format USB trên Macbook đúng cách và an toàn

Khác với trên Windows, cách format USB trên Macbook sẽ có chút phức tạp hơn, tuy nhiên quá trình này vẫn sẽ không làm mất nhiều thời gian của bạn.

2 mẹo để không còn bị iTunes làm phiền mỗi khi cắm iPhone vào máy tính

Đối với những người dùng iPhone khi sạc pin hay chuyển file qua máy tính chắc hẳn rất 'phiền' với những thông báo back up, đồng bộ hoá,... của iTunes. Nhưng với 2 mẹo nhỏ sau đây sẽ chấm dứt tình trạng này để không còn

3 hướng dẫn giúp chụp xóa phông đẹp hơn, đỉnh hơn trên smartphone

Chụp xóa phông là một thuật ngữ, mà khi chụp phần hậu cảnh mờ đi còn chủ thể sắc nét. Điều này sẽ giúp bức ảnh có điểm nhấn và nổi bật hơn so với cách chụp thông thường.

Hướng dẫn cách xoá vĩnh viễn tài khoản Facebook của mình

Hiện tại, chưa biết vì lý do gì mà Facebook không hiển thị tuỳ chọn xoá tài khoản trong trang Cài Đặt. Khi vào phần Quản lý tài khoản, bạn chỉ có hai chọn lựa là xoá tài khoản sau khi qua đời và Vô hiệu hoá tài khoản

Cách tạo thông báo nhóm theo ứng dụng trong iOS 12

Một trong những tính năng yêu thích của mình trong iOS 12 là “Thông báo nhóm - Group Notifications” giúp việc truy cập các thông báo gần đây từ một ứng dụng cụ thể trở nên thuận tiện hơn. Bên cạnh đó, nó cũng giúp cho

ĐÁNH GIÁ NHANH

Trên tay Z2 Force Edition: màn hình chống vỡ, camera kép, thiết kế mỏng hơn đời đầu, pin giảm

Moto Z2 Force Edition vừa xuất hiện tại Việt Nam theo đường “chim bay” với mức giá 11.5 triệu đồng. Z2 Force vẫn có khả năng nâng cấp tính năng thông qua hệ thống nắp lưng độc đáo của dòng Z màn hình chống vỡ như Z

Đánh giá Dell XPS 15 2-in-1: Mạnh mẽ, sang trọng, pin trâu

Laptop Dell XPS 2 in 1 không hẳn là một dòng máy tính mới (về cơ bản nó chính là Dell XPS) nhưng sự linh hoạt của nó giúp ích cho người dùng rất nhiều trong quá trình sử dụng hàng ngày. Bạn có thể sử dụng tại chỗ hoặc