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 xóa file gốc sau khi nén bằng winRAR

Thường thì với quá trình nén file, sau khi thực hiện xong, chúng ta sẽ thu được một file mới và đồng thời các file cũ cũng vẫn sẽ được giữ nguyên. Thực ra điều này là không cần thiết, bởi trong file nén các bạn vừa tạo

Có những kỹ năng công nghệ này trong CV, bạn sẽ nắm chắc “tấm vé” vào vòng phỏng vấn

Kỹ năng công nghệ giờ đây đang được rất nhiều nhà tuyển dụng chú ý khi tìm kiếm nhân tài cho tổ chức. Nếu bạn đang sở hữu ít nhất một trong các kỹ năng được liệt kê trong danh sách này thì hãy tự tin thể hiện chúng

9 c&#225;ch khắc phục lỗi kh&#244;ng truy cập được v&#224;o Facebook

Người dùng Internet Việt Nam không thể truy cập vào được Facebook. Bạn đã thử nhiều cách, trong đó có thiết lập DNS mới (Google DNS, Open DNS, Norton DNS,…) cho máy tính nhưng không hiệu quả. Chưa biết rõ nguyên nhân

Những lưu ý khi sử dụng máy giặt cửa trước

Máy giặt cửa trước đòi hỏi chất tẩy rửa công thức đặc biệt để sử dụng trong các máy này. Hãy tìm kiếm các sản phẩm có nhãn 'HE' và xác minh rằng chúng mang lại hiệu năng cao hiệu quả thực sự, chứ không chỉ là 'HE

Hướng dẫn vào Safe Mode trên Mac OS

Hãy cùng điểm qua một số thói quen xấu không ít những người chụp ảnh gặp phải để nhìn nhận và rút kinh nghiệm cho bản thân nhé.

ĐÁNH GIÁ NHANH

Có nên mua iPad mini 6 không?5 lý do dưới đây sẽ giúp bạn giải đáp

iPad mini 6 được Apple trình làng cùng iPhone 13 series hồi tháng 9 và hiện đã lên kệ tại nhiều quốc gia. Thuộc thương hiệu cao cấp nhưng không ít bạn vẫn đắn đo có nên mua iPad mini 6 không. Bài viết này sẽ đưa ra 5

Đánh giá camera Zenfone Max Pro M2: Chơi game ngon, chụp có đẹp?

Khi ra mắt, Zenfone Max Pro M2 được định hình là smartphone chơi game tầm trung dành cho những ai không có điều kiện sắm ROG Phone. Bên cạnh cấu hình tối ưu cho việc chơi game thì Max Pro M2 còn được trang bị cụm camera

Đánh giá loa vi tính 2.0 GoldSound GS51- Bluetooth

Nhân vật chính ngày hôm nay nay của chúng ta là mẫu loa GoldSound GS51-Bluetooth, là bản cải tiến thứ 3 của dòng loa vi tính 2.0 của công ty GoldSound.