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

Hướng dẫn cách đăng nhập Zalo trên PC thật chi tiết

Tất cả tin nhắn, danh bạ được đồng bộ giữa máy tính và điện thoại, giúp bạn không bỏ lỡ bất kỳ cuộc trò chuyện nào. Tuy nhiên, nhiều người lại quen sử dụng Zalo trên điện thoại, khi chuyển sang máy tính hơi bỡ ngỡ.

Tìm hiểu công nghệ Overstroke trên laptop ASUS

Khi nói về bàn phím không thể không nhắc tới ASUS Overstroke - công nghệ sẽ thay đổi cách nhìn của người dùng về laptop gaming cho khả năng điều khiển nhanh và chính xác.

Có thể bạn chưa biết? Hướng dẫn hẹn thời gian gửi tin nhắn trên iPhone

Bí kiếp tán gái. Đừng trở thành người độc thân vì quên chúc ngủ ngon bạn gái, hãy thử ngay tính năng này của iMessage Tính năng iMessage trên iPhone khi bạn không cần phải canh giờ gửi tin nhắn để chúc mừng sinh nhật,

Đánh giá 10 Hosting tốt nhất năm đầu năm 2015

Dựa vào bảng xếp hạng 'Top những hosting tốt nhất cuối năm 2014 và đầu năm 2015' của website đánh giá nổi tiếng toptenreviews.com. Sau đây TCN sẽ điểm danh từng nhà cung cấp Hosting có số điểm cao nhất trong bảng xếp

6 cách sửa lỗi iPhone không bật được Bluetooth

Không ít người dùng iOS đang gặp phải lỗi iPhone không bật được Bluetooth. Điều này gây ảnh hưởng không nhỏ đến quá trình sử dụng. Tuy nhiên, bạn hoàn toàn có thể khắc phục được nó nếu làm theo hướng dẫn sau đây. Không

ĐÁNH GIÁ NHANH

Đánh giá Nokia 2.4: Sử dụng ngôn ngữ thiết kế mới, pin trâu dùng cả ngày, giá chỉ hơn 2 triệu đồng

Sự xuất hiện của Nokia 2.4 mới đây sẽ cho người dùng phổ thông thêm một sự lựa chọn trong giỏ hàng tham khảo. Máy sở hữu ngôn ngữ thiết kế nổi bật, ấn tượng trong mức giá hơn 2 triệu đồng. Vậy hãy cùng trải nghiệm và

So sánh AirPods 3 và AirPods Pro: Đâu là sản phẩm đáng mua hơn cả?

AirPods 3 và AirPods Pro đều là những mẫu tai nghe cao cấp được trang bị nhiều tính năng thông minh, hấp dẫn của Apple. Vậy khi đặt lên bàn cân so sánh AirPods 3 và AirPods Pro thì đâu là sản phẩm đáng mua hơn cả? Hãy

Đánh giá Smartwatch DT No.1 G8: Phong cách trẻ trung, hiện đại

DT No.1 G8 với phong cách trẻ trung, hiện đại. Chiếc smartwatch này được tích hợp nano sim, hỗ trợ việc nghe gọi cũng như nhắn tin.