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.

Từ khoá : BookBlock, Content, Flip, Plugin

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

Làm thế nào để xem lại lịch sử thông báo trên Android?

Phải làm sao khi có thông báo nhấp nháy trên smartphone nhưng trước khi có cơ hội đọc nó, bạn đã vô tình xóa (vuốt bỏ) nó đi? Những thông báo đó đã biến mất mãi mãi hay vẫn còn ở đâu đó? Nếu bạn sử dụng thiết bị

Tổng hợp tất cả các phím tắt trong Word

Sử dụng phím tắt trong Word sẽ giúp bạn thao tác và xử lý văn bản trên Microsoft Word nhanh hơn, tiết kiệm được nhiều thời gian hơn.

Hướng dẫn chơi Võ Lâm Truyền Kỳ Mobile giả lập trên PC

Ngay khi Võ Lâm Truyền Kỳ Mobile của nhà phát hành VNG ra mắt bản Alpha Test, cộng đồng game thủ đã ráo riết truy tìm code kích hoạt tài khoản để kịp thời trải nghiệm.

Hướng dẫn chỉnh sửa ảnh đơn giản, nhanh trên Android lẫn iOS bằng Google Photos

Tuỳ mỗi hãng mà Google Photos sẽ được cài sẵn hoặc không, nhưng phần lớn thì mình thấy cái sẵn. Các bạn dùng iOS cũng có thể dùng ứng dụng này, phiên bản…

Một số tổ hợp phím tắt hữu ích có trên macOS

Về cơ bản, phím Command (⌘) sẽ có chức năng tương tự với Ctrl (Control) trên các máy tính thông thường. Tuy nhiên, trên macOS sẽ có đôi chút khác biệt về cách dùng, từ cả những điều đơn giản như di chuyển (move).

ĐÁNH GIÁ NHANH

Đánh giá Xiaomi Pad 6 xách tay: Sự lựa chọn tuyệt vời cho tablet Android phân khúc 7 triệu đồng

Trong sự kiện tổ chức vào ngày 18/4 theo giờ Việt Nam, Xiaomi đã giới thiệu mẫu máy tính bảng mới nhất của họ là Xiaomi Pad 6, song song với sản phẩm Xiaomi 13 Ultra. Với giá khoảng 7 triệu đồng cho phiên bản xách tay,

Đánh giá chi tiết Volkswagen Passat Bluemotion giá 1,45 tỷ đồng

Tại thị trường Việt Nam, Passat là một cái tên rất mới. Volkswagen Passat chỉ mới “chân ướt chân ráo” đến thị trường Việt hồi đầu tháng 6/2016 tại triển lãm DAS Volkswagen Fest và mẫu xe này vẫn đang

Đánh giá chi tiết BMW X4 M40d 2019 về thiết kế nội ngoại thất

Mẫu xe thể thao đa năng BMW X4 M40d 2019 đã được nới hơn 76 mm chiều dài, 38 mm chiều rộng và 76 mm chiều dài cơ sở. Mặc dù kích thước tăng lên đáng kể song BMW X4 mới lại sở hữu khối lượng nhẹ hơn 50 kg, trọng tâm