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.
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
Thủ thuật phát Wi-Fi từ máy tính trực tiếp trên Windows 10
Đôi khi bạn sẽ muốn biến chiếc máy tính của mình thành điểm phát Wi-Fi để có thể chia sẻ cho người khác hay đơn thuần là phát cho smartphone của mình để lên mạng. Trong bài này, TECHRUM sẽ hướng dẫn bạn từ A-Z cách
Cách cài nhạc MP3 bất kỳ làm nhạc chuông cho iPhone
Nếu muốn sử dụng một bản nhạc MP3 bất kỳ làm nhạc chuông cho iPhone bạn cần thực hiện khá nhiều bước. Theo dõi bài viết sau đây của chúng tôi để biết cách thao tác nhé.
Sống đẹp là gì và 29 cách giúp bạn sống đẹp
Nhà thơ Tố Hữu đã từng nói rằng 'Ôi sống đẹp là thế nào hỡi bạn?' Ai cũng muốn sống đẹp nhưng liệu mấy ai hiểu thực sự sống đẹp là gì và làm thế nào để sống đẹp?
3 cách đơn giản để kiểm tra cấu hình, thông tin phần cứng máy tính, laptop
Để kiểm tra thông tin cấu hình máy tính trên Windows XP, Vista, 7, 8, 8.1 và Windows 10 không hề khó khăn chút nào, các bạn có thể làm theo cách thủ công hoặc dùng phần mềm hỗ trợ. Trong bài viết dưới đây, Quản Trị
Nhận biết iPhone X dùng modem Qualcomm hay Intel cực đơn giản
Đối với iPhone X mã A1865, máy sẽ sử dụng Qualcomm MDM9655 X16 của Snapdragon, và iPhone X mã A1901 sẽ là modem Intel XMM 7480. Dựa theo biểu đồ so sánh, khi cường độ tín hiệu dưới mức -120dBm thì modem của Qualcomm có
ĐÁNH GIÁ NHANH
Trên tay HP Omen 15 – Thiết kế đậm chất game, màn hình 120Hz, tản nhiệt chuẩn Max-Q
Omen 15 là mẫu laptop chuyên game mới của HP và sự thay đổi lớn nhất là nó thể hiện được bản chất của một sản phẩm dành cho game thủ.
Đánh giá bàn phím cơ Cooler Master Masterkeys Pro M: Bàn phím cơ với layout lạ
Cooler Master đã mang đến một thiết kế lạ cho Masterkeys Pro M khi hợp nhất cụm Numpad cùng các phím điều hướng và chỉnh trang, khiến sản phẩm này trông khá lạ.
Cùng đánh giá chiếc điện thoại Xiaomi Mi 5 có cấu hình mạnh mẽ
Với bản Xiaomi Mi 5 Pro (giá 499 USD) cao cấp, chúng ta sẽ được sử dụng 128 GB bộ nhớ trong, 4 GB RAM và vỏ gốm màu đen.