BookBlock: A Content Flip Plugin
BookBlock là một plugin jQuery mà có thể được sử dụng để tạo ra các thành phần giống như cuốn sách nhỏ cho phép một 'lật trang' chuyển hướng. Nội dung có thể được sử dụng như hình ảnh hoặc văn bản. Các plugin biến đổi cấu trúc chỉ khi cần thiết (tức là khi lật một trang) và sử dụng một số lớp phủ như bóng cho các trang để tạo ra hiệu ứng.
Chúng tôi sẽ sử dụng jQuery++ bởi Bitovi đó có một số tiện ích cho jQuery (cụ thể, để thêm sự kiện swipe).
Cấu trúc sau đây sẽ cho phép để thêm nội dung tùy chỉnh trong một wrapper với các lớp học 'item-cf', đại diện cho một trang mở (bên trái và bên phải):
<div id='bb-bookblock' class='bb-bookblock'> <div class='bb-item'> <!-- custom content --> </div> <div class='bb-item'> </div> <div class='bb-item'> <!-- ... --> </div> <div class='bb-item'> <!-- ... --> </div> <!-- ... --></div>
Bạn có thể gọi plugin :
$(function() { $( '#bb-bookblock' ).bookblock(); });
Một số tùy chỉnh khác :
// speed for the flip transition in ms.speed : 1000, // easing for the flip transition.easing : 'ease-in-out', // if set to true, both the flipping page and the sides will have an overlay to simulate shadowsshadows : true, // opacity value for the 'shadow' on both sides (when the flipping page is over it).// value : 0.1 - 1shadowSides : 0.2, // opacity value for the 'shadow' on the flipping page (while it is flipping).// value : 0.1 - 1shadowFlip : 0.1, // perspective valueperspective : 1300, // if we should show the first item after reaching the end.circular : false, // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.nextEl : '', // if we want to specify a selector that triggers the prev() function.prevEl : '', // callback after the flip transition.// page is the current item's index.// isLimit is true if the current page is the last one (or the first one).onEndFlip : function( page, isLimit ) { return false; }, // callback before the flip transition.// page is the current item's index.onBeforeFlip: function( page ) { return false; }
Bạn có thể hiểu rõ thêm khi xem Demo.
TIN LIÊN QUAN
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
Fullscreen Video Slideshow with BigVideo.js
Chúng tôi sẽ hưỡng dẫn làm thế nào để tạo slideshow nền bằng video động hoặc một slider bằng Bigvideo.js một Plugin JQuery khá đẹp
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'
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
System Info - Thêm thông tin trong mục giới thiệu, sao lưu SHSH blobs ngay trên máy
Apple đã cung cấp cho người dùng một số thông tin về iPhone, iPad trong mục giới thiệu như tên, số hiệu máy, phiên bản hệ điều hành, dung lượng, imei v.v...
Một số thủ thuật đơn giản giúp bạn biến Google Drive thành ổ cứng
Google Drive là một giải pháp lưu trữ trực tuyến tuyệt vời dành cho rất nhiều người dùng. Vậy bạn đã biết cách biến Google Drive thành ổ cứng chưa?
Hướng dẫn tìm kiếm và thay thế trong bảng Excel
Với bảng tính Excel chứa hàng trăm, hàng nghìn dữ liệu chúng việc tìm kiếm và thay thế theo công thức sẽ giúp chúng ta tiết kiệm được rất nhiều thời gian, tăng hiệu quả công việc so với cách làm thủ công.
Trải nghiệm CCleaner phiên bản mới, đi kèm phần mềm Avast Free Antivirus
Do Piriform Software Limited - công ty sở hữu và phát triển CCleaner, đã được Avast Software mua lại nên mới đây, phiên bản mới của phần mềm CCleaner được kèm theo phần mềm Avast Free Antivirus như một tùy chọn hỗ trợ
Vẽ, cắt ảnh và tạo video dễ dàng với ứng dụng Photos trên Windows 10
Tất nhiên ứng dụng Photos của Windows 10 không thể thay thế cho Photoshop hay GIMP, nhưng bạn có thể làm nhiều thứ với nó hơn những gì mình nghĩ. Bài viết sau đây sẽ giới thiệu cho bạn 3 chức năng nhanh, gọn, hữu ích
ĐÁNH GIÁ NHANH
Đánh giá Samsung Galaxy Fit 2: có nổi bật với mức giá khá rẻ?
Samsung Galaxy Fit 2 là chiếc smartband mới nhất của gã khổng lồ công nghệ đến từ Hàn Quốc. Đây là phiên bản nâng cấp của Galaxy Fit trước đây. Thiết kế và màn hình Galaxy Fit 2 sẽ có màn hình hiển thị với kích thước
Đánh giá chi tiết Huawei GR5 2017 Pro
Huawei GR5 2017 Pro vừa được ra mắt gần đây cạnh tranh trực tiếp với các hãng trong phân khúc tầm trung. Giá nhỉnh hơn chiếc GR5 2017 một chút. Cùng xem đánh giá xem siêu phẩm này có đáng sở hữu không nhé?
AirPods 3 có gì mới để bạn bỏ ra hơn 4 triệu đồng mua về?
Mới đây, Apple đã cho ra mắt tai nghe AirPods thế hệ thứ 3 – AirPods 3 với giá từ 4,07 triệu đồng. Vậy, ở lượt nâng cấp này, AirPods 3 có gì mới để bạn bỏ ra hơn 4 triệu đồng mua về. Mời bạn cùng theo dõi bài viết dưới