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

Hướng dẫn cài thông tin người thân trên điện thoại để liên hệ trong trường hợp tai nạn

Qua nay trên Facebook râm ran về việc một người bị tai nạn giao thông nhưng do iPhone bị khóa vân tay và passcode nên người đi đường không thể nào liên hệ được với người nhà nạn nhân. Thực ra trên iPhone và Android đều

Cách đóng băng USB an toàn trước mọi loại virus

Để bảo vệ USB không bị nhiễm virus thì cách tốt nhất là đóng băng USB. Dưới đây chúng tôi sẽ chia sẻ với các bạn cách đóng băng USB an toàn hiệu quả để tránh virus. Cách chuyển sang định dạng NTFS Để đóng băng được USB

Intel Performance Maximizer là gì? Cách ép xung CPU chỉ với 1 click chuột

Trong bài viết, sẽ giải đáp chi tiết Intel Performance Maximizer là gì, đồng thời hướng dẫn bạn cách cài đặt phần mềm, tối ưu hóa và một số kinh nghiệm để quá trình ép xung đạt hiệu quả cao nhất.

Hướng dẫn format USB Pendrives bằng Command Prompt

Theo mặc định, thông thường người dùng Windows có thể Format ổ cứng, thẻ nhớ hay USB bằng cách click chuột phải vào đó rồi click chọn tùy chọn Format.

5 điều cần làm để bảo mật smartphone của bạn

Smartphone rất tiện dụng và là công cụ trợ giúp đắc lực trong cuộc sống hàng ngày của chúng ta, nhưng, nếu bạn không có những phương pháp bảo mật đúng cách, chúng hoàn toàn có thể bị kẻ gian lợi dụng để từ đó đánh cắp

ĐÁNH GIÁ NHANH

Huawei Nova 3e: Smartphone "tai thỏ" đáng mua tầm giá 7 triệu đồng

Thiết kế chính là điểm nối bật nhất trên sản phẩm này, với phần khung kim loại kết hợp với mặt lưng kính vô cùng bóng bẩy, tạo nên vẻ sang trọng cho bất cứ ai cầm vào. Thêm vào đó, phần mặt kính này còn phản chiếu và

Genesis GV70 2022 - Đối trọng của Mercedes-AMG, BMW và Audi

Với Genesis GV70 2022, nhà sản xuất xe Hàn Quốc đang dần chứng tỏ được năng lực của mình trong cuộc chạy đua khốc liệt với những thương hiệu tên tuổi đến từ Đức.

Đánh giá nhanh điện thoại OPPO R9s phiên bản màu xanh tuyệt đẹp

OPPO R9s cũng có RAM 4 GB, bộ nhớ trong 64 GB như F3 Plus, nhưng nó lại yếu hơn một chút khi chỉ trang bị con chip Snapdragon 625 và GPU Adreno 506. Ngoài ra, máy có pin dung lượng 3010 mAh, thấp hơn so với F3 Plus