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

Những cách hạn chế tốc độ tải về của Microsoft Store

Đôi lúc, Microsoft Store cũng là một nhân tố ảnh hưởng rất xấu đến tốc độ mạng trên Windows 10. Dĩ nhiên, điều này cũng có thể được khắc chế với một vài thủ thuật đơn giản sau đây.

Giới thiệu về cơ sở dữ liệu - Database

Microsoft Access là công cụ tạo và quản lý cơ sở dữ liệu. Để hiểu về Access trước hết bạn phải hiểu về cơ sở dữ liệu (database).

Chỉ 5 phút để biến smartphone thành ‘máy chiếu 3D’

Để biến smartphone của bạn thành một máy chiếu 3D, bạn cần chuẩn bị những món đồ sau: giấy ô ly, hộp đĩa CD, bút, kéo, băng dính/ keo dán, dao dọc giấy và một chiếc smartphone.

Hướng dẫn bảo mật tài khoản Twitter nâng cao

Chắc chắn bạn đã sử dụng số điện thoại của mình để làm xác thực hai yếu cho tài khoản Twitter. Tuy nhiên, nếu bạn muốn đảm bảo an toàn thực sự tài khoản của mình, bạn nên xem xét việc tạo mật khẩu dành riêng cho ứng

Cài biểu tượng đồng hồ số trên màn hình chờ Windows 10

Khi chúng ta chưa tắt máy tính và không dùng, màn hình máy tính sau một thời gian theo thiết lập sẽ chuyển sang chế độ chờ. Trên chế độ này chúng ta có thể cho chạy ảnh hoặc các hiệu ứng khác, tuy nhiên bài viết này sẽ

ĐÁNH GIÁ NHANH

Đánh giá nhanh Honda SH 2017: Đẹp, an toàn và mạnh mẽ hơn

Ngoài những điểm mới ở mặt thiết kế đèn pha, đèn định vị, đèn hậu sử dụng công nghệ LED, Honda SH 2017 còn ở hữu hệ thống chống bó cứng phanh ABS hiện đại, động cơ cũng vận hành mạnh mẽ hơn, ...

Đánh giá nhanh smartphone giá rẻ Nokia 1 giá 1,9 triệu

Là một sản phẩm giá rẻ, không ngạc nhiên khi thiết kế của Nokia 1 không mấy ấn tượng. Máy có phần thân làm bằng nhựa và khá dày (9.5 mm) với viền màn hình cũng khá lớn, khiến nó trông giống như một thiết bị ra đời từ

Khám phá bên trong Apple Watch Series 7: Có nhiều thay đổi so với thế hệ trước

Apple Watch Series 7 hiện là mẫu smartwatch mới nhất của Apple với nhiều cải tiến và nâng cấp. Mới đây, iFixit đem Apple Watch Series 7 lên “bàn mổ”. Vậy bên trong Apple Watch Series 7 có gì đặc biệt? Chúng ta cùng đi