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

Wifi nhà bạn có thể bị hack trong một nốt nhạc nếu không tắt WPS

Không kể đến các ứng dụng chia sẻ mật khẩu wifi, vẫn có những công cụ có thể đánh cắp mật khẩu wifi nhà bạn một cách đúng nghĩa bằng các lỗ hỗng bảo mật, ở đây là tính năng WPS. Cùng chúng tôi tìm hiểu và khắc phục nhé.

Cách khôi phục, sao lưu tin nhắn trên Line dễ chưa từng thấy

Line là một ứng dụng được nhiều người yêu thích vì tính năng gọi điện và nhắn tin nhanh. Nếu bạn đã sử dụng ứng dụng này, có thể bạn cũng từng có lúc muốn sao lưu và khôi phục lại lịch sử các cuộc trò chuyện trên Line

eType Hỗ trợ soạn thảo đa ngôn ngữ

eType là từ điển đa ngôn ngữ trực tuyến với các bản dịch và thay thế từ hầu như bất kỳ ngôn ngữ trên thế giới. Hướng dẫn bằng văn bản cho phép bạn gõ nhanh hơn và tăng mức độ của sự tự tin trong văn bản. Ngoài ra giúp

6 bước khắc phục, sửa lỗi “Write Protection” trên USB

Trong quá trình sử dụng USB để copy file, thỉnh thoảng bạn sẽ gặp thông báo lỗi từ USB 'The disk is write protected. Remove the write protection or use another disk' hoặc thông báo tương tự không cho phép xem, sửa hay

Hướng dẫn sử dụng tính năng Nearby Share trên điện thoại Android để chuyển dữ liệu lên máy tính Windows

Nearby Share là một tính năng được giới thiệu lần đầu vào năm 2020, cho phép người dùng chuyển tệp tin và dữ liệu giữa các thiết bị Android. Tuy nhiên, với bản cập nhật mới nhất của Google, tính năng này đã được mở

ĐÁNH GIÁ NHANH

Tính năng Photographic Styles trên iPhone 13 Series là gì, có gì mới?Sử dụng như thế nào?

Năm nay, Apple trình làng iPhone 13 Series với rất nhiều cải tiến mới về camera. Một trong số đó phải kể đến Photographic Styles. Vậy tính năng Photographic Styles trên iPhone 13 Series là gì? Hãy cùng mình đi tìm hiểu

Đánh giá nhanh Xiaomi Redmi 5A: thiết kế trẻ trung, hiệu năng khá, trải nghiệm tốt trong tầm giá bán

Redmi 5A có thiết kế trẻ trung, cấu hình tầm trung, thời lượng pin dài, bộ đôi camera đều chụp ảnh khá ổn nhưng giá bán chỉ khoảng 2.4 triệu đồng. Khi kết hợp yếu tố phiên bản màu hồng nhìn đẹp, Redmi 5A nhìn quyến rũ,

Trên tay AirPods 3: Thiết kế nhỏ gọn, âm thanh sắc nét cũng nhiều tính năng vượt trội

Giữa tháng 10 vừa qua, Apple đã khiến nhiều người dùng bất ngờ khi cho ra mắt dòng sản phẩm AirPods thế hệ thứ 3 – AirPods 3 với thiết kế nhỏ gọn giống Airpods Pro, chất lượng âm thanh tốt hơn cùng một số tính năng mới