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

Cách ẩn tài khoản Zalo giúp không cho người khác tìm thấy cực kì thú vị

Để bảo mật tài khoản hơn hoặc tăng thêm tính riêng tư cho mình, bạn có thể ẩn tài khoản Zalo của mình một cách đơn giản, người khác sẽ không thể gửi lời mời kết bạn cũng như không tìm thấy trang cá nhân của mình.

Cách cập nhật iOS 15.1 chính thức để sở hữu nhiều tính năng mới xịn sò

iOS 15.1 chính thức của Apple phát hành cho iPhone với tính năng mới như SharePlay trong FaceTime, ProRes, chứng nhận tiêm chủng Covid-19 trong Ví (Apple Wallet). Sau đây là cách cập nhật iOS 15.1 chính thức...

Cách đưa phím Home trên iPhone X lên một chiếc smartphone Android

Đầu tiên bạn cần bật chế độ Không rõ nguồn gốc trong phần Cài đặt (tùy theo các hãng mà đường dẫn tới cài đặt này có thể khác nhau) bạn có thể truy cập nhanh bằng cách tìm ở trên phần 'Tìm kiếm' của cài đặt.

Hướng dẫn root điện thoại Android bằng Magisk

Root - quá trình “trao quyền' truy cập hệ thống cho một số ứng dụng và tiện ích nhất định - từ lâu đã là một phần trải nghiệm của một số người dùng đam mê sử dụng Android. Nhưng đứng trước mối đe dọa từ một tính năng

12 ứng dụng iOS trị giá 56 USD đang được miễn phí

Tiếp tục với chuỗi bài viết chia sẻ 'Free App', TCN xin gửi đến bạn đọc danh sách ứng dụng iOS đang được miễn phí trong thời gian ngắn. Nếu các bạn quan tâm hãy nhanh tay tải về trước khi tính phí trở lại. Lưu ý là một

ĐÁNH GIÁ NHANH

Đánh giá hiệu năng Vivo Y55: Khả năng chơi game đáng khen trong tầm giá 4 triệu!

Vivo Y55 được trang bị chip Snapdragon 430 và 2GB RAM, một cấu hình tốt so với mức giá chỉ 4 triệu đồng. Hãy cùng đánh giá hiệu năng của sản phẩm này nhé!

Đánh giá Module âm thanh B&O Hi-Fi Plus trên LG G5

LG G5 có một bộ Module giải mã âm thanh chuyên nghiệp B&O Hi-Fi Plus. Liệu bộ giải mã DAC này có khác biệt gì so với LG V10 và LG G5 thông thường, chúng ta cùng đến với bài đánh giá chi tiết

Đánh giá nhanh Apple Watch tại Việt nam

Apple Watch hiện có ba phiên bản nhằm đáp ứng nhu cầu sử dụng khác nhau của người dùng là Apple Watch Sport, Apple Watch và Apple Watch Edition.