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
Nguyên nhân và 5 cách khắc phục tình trạng loa điện thoại bị nhỏ cực hiệu quả mà bạn nên thử ngay
Loa điện thoại bị nhỏ trong quá trình sử dụng là do nguyên nhân nào gây ra? Hãy cùng tìm hiểu cách khắc phục tình trạng này cực đơn giản trong bài viết.
Thủ thuật tiết kiệm 60% pin với màn hình OLED trên iPhone X
Chúng ta sẽ thực hiện tối ưu thời lượng pin bằng cách kết hợp 3 mẹo sau. Dùng hình nền đen tuyệt đối, đảo màu thông minh và màu xám (grayscale).
Hưỡng dẫn Lồng folder vào nhau trên iOS
Chắc hẳn dùng iPhone các bạn thường gom các ứng dụng vào 1 foder để màn hình gọn gàng hơn. Nhưng các bạn thử gom 2 thư mục vào nhau xem thử có được không? Câu trả lời chắc chắn là không thể...
Hưỡng dẫn cài đặt Zpanel tối ưu hóa nhất cho Server
Chào các bạn hôm nay mình sẽ hưỡng dẫn độc giả cài đặt chi tiết từ đầu trên máy chủ chạy trình quản lý Zpanel và tối ưu hóa nhất cho VPS.
Cách bảo vệ camera iPhone 13 series bằng miếng dán JCPAL và Mipow
Phần camera của iPhone 13 series nhô ra sẽ khiến nó dễ trầy, vỡ. Hôm nay, hãy cùng mình xem cách bảo vệ camera iPhone 13 series bằng các miếng dán kính camera...
ĐÁNH GIÁ NHANH
Đánh giá Huawei GR5: Thiết kế đẹp, hiệu năng ổn, thời lượng pin khá
Huawei GR5 là chiếc smartphone tầm trung đang nhận được rất nhiều sự chú ý của người dùng bởi giá bán hợp lý nhưng lại sở hữu thiết kế đẹp, đặc biệt là cảm biến vân tay ở mặt sau tích hợp nhiều tính năng hay.
Đánh giá camera Zenfone 3 Max 5,5 inch: Nhiều tính năng,...
Tuy không được Asus nhấn mạnh vào camera mà nhấn mạnh vào pin, nhưng Zenfone 3 Max phiên bản 5,5 inch lại có một camera rất khá so với các sản...
Đá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ũ,