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>

Cập nhật ngày:
19-09-2012, 17:03

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

Tiện ích Internet

7 lựa chọn miễn phí thay thế tốt nhất cho Google Now Launcher mà bạn nên thử qua

Google Now Launcher là bộ giao diện được nhiều người yêu thích bởi sự nhẹ nhàng và thuần gốc nhất. Tuy nhiên, theo một số thông tin thì trong thời gian tới Google sẽ gỡ bỏ hoàn toàn launcher này ra khỏi kho ứng dụng

Thủ thuật

Những mẹo và thủ thuật hay trong Windows 7(Phần 2 )

Windows 7 là hệ điều hành tuyệt vời, nó sẽ còn tuyệt hơn khi bạn nắm trong tay nhưng thủ thuật và mẹo dưới đây. Hãy cùng khám phá phần 2 nhé.

Thủ thuật

Hướng dẫn cách giảm dung lượng ảnh, nén hình Online giữ nguyên chất lượng

Hình ảnh nặng tải lên, tải xuống rất lâu. Vì vậy bạn nên nén hình ảnh lại trước khi tải lên internet. Cách làm rất đơn giản. Xem hướng dẫn ở đây. → Nếu bạn thích sử dụng phần mềm để nén ảnh, Caesium là một lựa chọn

Thủ thuật

Chụp ảnh xóa phông ảo diệu trên iPhone 7 Plus/ 8 Plus với ứng dụng Focos

Ứng dụng Focos được tạo ra mởi Xiaodong Wang, một nhà phát triển người Trung Quốc. Người đã tạo ra 2 ứng dụng nổi tiếng trên iTunes vào năm 2015, 2016 là Colorburn và MaxCurve.

Hệ điều hành

Tăng cường bảo mật cho Mac OS X

Trước nguy cơ tấn công của các phần mềm độc hại đối với người dùng Mac, hãng bảo mật Kaspersky Lab đã đưa ra những lời khuyên đáng giá để tăng cường bảo vệ cho máy Mac.

ĐÁNH GIÁ NHANH

Thiết bị số / Đánh giá

Mở hộp và trên tay nhanh pin sạc dự phòng Energizer "khủng" 20100mAh

Chắc hẳn các bạn đều thân quen với cái tên Energizer khi mà rất nhiều đồ dùng điện tử, đồ chơi sử dụng những viên pin AA (pin tiểu) hay AAA nhỏ hơn trong những chiếc remote. Và không có gì bất ngờ khi một thương hiệu