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 chuyển CCleaner sang ngôn ngữ tiếng Việt

Tuy nhiên, bạn đang dùng phiên bản tiếng Anh nên khó trải nghiệm hết các tính năng thú vị mà phần mềm này đem lại. Muốn chuyển sang ngôn ngữ mẹ đẻ để sử dụng thuận tiện hơn, nhưng không biết phải làm thế nào?

Những cách bảo mật tin nhắn trên iPhone

Thông thường màn hình khóa hay hiển thị một phần nội dung tin nhắn. Nếu muốn chặn thông báo tin nhắn, bạn truy cập vào Settings (Cài đặt)/ Notifications (thông báo)/ Messages (Tin nhắn) và sau đó gạt tắt Show on Lock

Hướng dẫn tắt thông báo update iOS11.1 trong khi đã lên 11.2 beta

iPhone vẫn thông báo bạn lên iOS11.1 chính thức mặt dù bạn đang chạy iOS11.2 Beta. Để tắt thông báo này anh em cần xóa profile/cấu hình mà anh em từng cài vào máy để cho iOS lên các bản Beta giành cho Dev. Sau khi xóa

Cách xuất mật khẩu đã lưu trên trình duyệt Chrome mà bạn nên dùng

Để đơn giản hóa quá trình đăng nhập, cũng như tránh việc người dùng tự quên mật khẩu của chính mình, Google Chrome được tích hợp sẵn tính năng tự động gợi ý người dùng lưu mật khẩu trên chính trình duyệt này. Những mật

Hướng dẫn tạo màn hình ảo mới trên Windows 10

Để tạo một màn hình ảo mới trên Windows 10, bạn chỉ cần nhấn vào nút Task View trên thanh taskbar (biểu tượng 2 hình chữ nhật nằm song song). Hoặc sử dụng phím tắt Windows + Tab.

ĐÁNH GIÁ NHANH

Đánh giá Infiniti QX60 - Bất ngờ ở phân khúc crossover hạng sang

Infiniti QX60 là mẫu xe mang lại nhiều điều bất ngờ với những ưu điểm ở trang bị tiện nghi, thiết kế ngoại thất và động cơ.

Đánh giá laptop Dell Inspiron 15 7570 với vi xử lý Intel là i7-8550U

Phần cứng khác bao gồm ổ cứng SSD M.2 128GB và HDD 1TB 5400rpm, hỗ trợ khe cắm M.2 SATA/NVMe, màn hình Full HD IPS 15,6 inch và GPU rời GeForce MX150. Tuy nhiên, có rất nhiều chi tiết khác mà các tờ thông số kỹ thuật

Đánh giá chi tiết Loa Bluetooth Tronsmart Studio 30W: thiết kế ấn tượng, âm trầm mạnh mẽ

Là thế hệ loa indoor mới của Tronsmart, Studio 30W sở hữu thiết kế ấn tượng, vỏ kim loại bền chắc có viền bo cong tinh tế. Công nghệ Sound Pulse và 3 chế độ EQ giúp dải âm bass sâu, chắc, mạnh mẽ đem lại trải nghiệm âm