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

5 website kiểm tra tốc độ Internet hiệu quả

Tốc độ kết nối Internet mà bạn đang sử dụng nhanh “như gió” hay chậm như sên. Làm sao để biết được tốc độ mạng mà bạn đang sử dụng có đúng như những gì mà nhà cung cấp dịch vụ Internet cung cấp hay không? Dưới đây là 5

Giải quyết tình trạng điện thoại chạy chậm dần theo thời gian

Nếu cảm thấy chiếc điện thoại của bạn bỗng dưng chạy chậm đi trông thấy, bạn hãy kiểm tra xem liệu mình đã thực hiện những thao tác sau chưa.

Những điều bạn cần biết trước khi quyết định làm Developer theo phong cách hài hước

Rất ít ai biết rằng, để trở thành một developer giỏi thì việc trang bị đầy đủ kiến thức chuyên môn, mức độ từ duy cao và kinh nghiệm làm việc cá nhân vẫn là chưa đủ. Chắc chắn bạn sẽ phải tự rèn luyện thêm cho mình bộ

5 kênh YouTube hướng dẫn sử dụng PicsArt từ cơ bản đến nâng cao

PicsArt là một trong số những ứng dụng chỉnh sửa hình ảnh trên smartphone phổ biến nhất hiện nay với rất nhiều công cụ hỗ trợ chuyên nghiệp. Chính vì vậy, ở bài viết này mình xin chia sẻ 5 kênh YouTube hướng dẫn sử

Tổng quan về Office Deployment Tool

Office Deployment Tool bao gồm hai file: setup.exe và configuration.xml. Để làm việc với công cụ này, bạn có thể chỉnh sửa file cấu hình để xác định tùy chọn bạn muốn, rồi chạy setup.exe từ dòng lệnh. Ví dụ, bạn có thể

ĐÁNH GIÁ NHANH

Đánh giá laptop HP Pavilion Power 15 – Mỏng nhẹ, thể hiện chất game, màn hình 4K

Bên cạnh mẫu laptop Omen 15 dành cho số ít người dùng đam mê công nghệ và chuyên game thì HP cũng mở rộng nhóm máy tính chơi game sang phân khúc phổ thông, có cấu hình phần cứng và nhất là giá bán hấp dẫn hơn với số

Trải nghiệm nhanh camera kép trên Galaxy J7 Duo

Nói là chụp ban ngày nhưng trong chuyến đi này bầu trời tại Vịnh Hạ Long ngày đầu đến khá âm u, rất ít nắng, có thể nói là điều kiện ánh sáng không lý tưởng. Dù cảnh rất đẹp nhưng hình ảnh ghi lại không được tươi, qua

[MWC 2017] Đánh giá LG G6: Không còn mang người dùng ra thử nghiệm, LG đã đi đúng hướng hơn

Techrum - LG đã chính thức giới thiệu chiếc flagship mới nhất của hãng là G6 trong sự kiện thường niên MWC 2017. So với thế hệ tiền nhiệm, G6 có nhiều thay đổi rất lớn: ngoài từ bỏ thiết kế kiểu module vốn đã được thử