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 cài Kodi trên iPhone, iPad, xem phim trực tuyến

Muốn cài đặt ứng dụng Kodi, người dùng đều nghĩ đến việc phải Jaibreak thiết bị. Tuy nhiên hiện nay không cần Jaibreak iPhone, iPad bạn vẫn có thể cài Kodi để nghe nhạc, xem video trên iPhone dễ dàng. Bài viết sau

Cách chơi Instant Games trên Facebook Messenger cực vui

Chắc có lẽ nhiều bạn cũng đã biết Facebook mới cho ra mắt thêm tính năng Instant Games trên Messenger. Để sử dụng được tính năng này thì ứng dụng...

Chuyển danh bạ từ iPhone sang Android nhanh chóng và đơn giản

Đa phần người dùng iOS hiện tại đều đã có tài khoản iCloud, và chúng ta sẽ tận dụng để tải xuống tệp danh bạ cho việc đồng bộ sang Android - Hoặc nếu đã sao lưu danh bạ bằng itunes, bạn có thể sử dụng file vcf có sẵn

Mách bạn cách chơi Squid Game trong Roblox trên smartphone

Squid Game là một bộ phim mới nổi trên Netflix, và nếu bạn nào là fan của bộ phim này thì không nên bỏ qua tựa game cùng tên. Game dịch ra tiếng Việt là “Trò chơi con mực”. Trong bài viết này mình sẽ chỉ bạn cách chơi

Mang Control Center trên iOS lên máy Android của bạn

Control Center là một tính năng rất hữu ích cho người dùng iOS. Tuy nhiên, những ai xài Android cũng có thể mang tính năng này lên thiết bị của...

ĐÁNH GIÁ NHANH

Những tính năng chụp ảnh đáng chú ý trên Vivo X70 Pro dành cho các fan sống ảo

Vivo X70 Pro đã chính thức có mặt tại Việt Nam và trở thành flagship ấn tượng nhờ khả năng chụp ảnh đỉnh cao. Nếu bạn là người có niềm đam mê với nhiếp ảnh, thích sống ảo trên mạng xã hội thì các tính năng chụp ảnh

Đánh giá camera Xiaomi Mi Mix 2: chưa xứng tầm ở phân khúc cao cấp

Xiaomi Mi Mix 2 sở hữu thiết kế màn hình viền siêu mỏng ấn tượng cùng hiệu năng cực mạnh là điều không phải bàn cãi. Tuy nhiên có một yếu tố mà Xiaomi chưa bao giờ làm tốt, kể cả trên các điện thoại cao cấp của họ, đó

Đánh giá nhanh Huawei Y7 Pro 2018 với màn hình tràn viền, camera sau kép

Khi nhìn thoáng qua kiểu dáng bên ngoài, phần lớn người dùng khó có thể tin rằng Y7 Pro lại cho giá bán dưới 4 triệu đồng khi sở hữu thiết kế màn hình tràn viền, mặt lưng bố trí camera sau kép. Y7 Pro cũng là mẫu điện