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.

BẠN SẼ QUAN TÂM

Những item cực độc của 360Mobi Cờ Tỷ Phú khác biệt hoàn toàn với board game truyền thống

Thế giới Games / Game Mobile 21-09-2018, 18:16

Cùng là luật chơi của board game Cờ Tỷ Phú nhưng 360Mobi Cờ Tỷ Phú lại được xây dựng rất nhiều tính năng cải tiến đặc.

Xuất hiện item mới hồi lại ‘full’ cả máu lẫn giáp trong Fortnite: Battle Royale

Thế giới Games / Game Online 25-01-2018, 10:48

Chug Jug là item giúp người chơi FBR hồi lại đầy đủ lượng máu và tăng tối đa giáp – nên nó được coi là item hồi phục.

Cách bật, tắt plugin Adobe Flash Player trên Chrome

Thủ thuật 18-09-2017, 07:52

Mặc dù máy tính đã cài đặt Flash Player hoặc cập nhật Flash Player mới nhất nhưng khi chơi game hay duyệt web, trình.

Last Day on Earth v1.5.5: Giảm độ khó của Bunker A, thêm item mới

Thế giới Games / Game Mobile 21-08-2017, 14:24

Phiên bản mới của Last Day on Earth đã đến tay người chơi vào hôm qua (19/08) với một vài thay đổ nhỏ về gameplay..

Troll Warlord có set item đầu tiên sau...4 năm

Thế giới Games 20-10-2016, 17:40

Một trong những hero bị...hắt hủi nhiều nhất Dota 2 cuối cùng cũng nhận được sự quan tâm..

Jquery j360 - Hiển thị sản phẩm 360 độ

Thủ thuật 31-03-2015, 23:16

Plugin j360 phù hợp giới thiệu sản phẩm cho các Website thương mại điện tử. Bạn có thể hiển thị sản phẩm 3D quay 360.

Giao diện bán xe TROY Automotive Cars Portal - HTML Template

Thủ thuật 20-01-2015, 00:28

Sang trọng quý phái với giao diện Troy Car đây là mẫu chuyên sử dụng trong lĩnh vực thiết kế website bán xe ô tô. Khá.

Giao diện Đẳng cấp với Porto - Responsive HTML5 Template v3.7

Thủ thuật 19-01-2015, 23:32

Đúng với cái tên của nó, Porto là một mẫu giao diện đứng số 1 trong cửa hàng bán giao diện Themeforest về lượng người.

ĐỪNG BỎ LỠ