Sắp diễn ra SOLIDWORKS Innovation Day ngày hội công nghệ do ViHoth tổ chức
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
Trải nghiệm Find X Launcher Pro, launcher phong cách iPhone XS Max đang miễn phí
Mặc dù tên gọi và giao diện người dùng khá giống với chiếc smartphone mới ra mắt của hãng điện thoại OPPO, nhưng Find X Launcher Pro lại có nhiều điểm tương đồng với iPhone XS Max hơn, đặc biệt
Cách chuyển vùng để tải ứng dụng xuyên quốc gia
Switchr là ứng dụng web được thiết kế đơn giản giúp bạn chuyển vùng quốc gia trên Appstore một cách nhanh chóng và thuận tiện nhất. Và sau đây là hướng dẫn chi tiết cách thực hiện.
Hướng dẫn sửa lỗi No Audio Output Device is Installed trên Windows 10
Theo Microsoft, driver audio Intel kết nối không chính xác tới các thiết bị qua Windows Update, driver âm thanh không tương thích có thể là một trong số nguyên nhân ngay ra sự cố này. Dưới đây là một số giải pháp giúp
Hướng dẫn sử dụng một số tính năng tiện ích trên Windows 10
Nhiều lúc khi sử dụng Windows 10, bạn ít nhiều gặp các quảng cáo gây cản trở công việc hoặc thấy vướng mắt. Hãy cùng FPTShop tìm cách tắt những quảng cáo này đi
Cách tắt bình luận bài đăng trên Instagram
Không còn nghi ngờ gì nữa, Instagram là một trong những mạng xã hội phổ biến nhất hiện nay. Mọi người có xu hướng chia sẻ những thứ diễn ra trong cuộc sống của mình lên mạng xã hội này. Tuy nhiên, không tránh khỏi
ĐÁNH GIÁ NHANH
Đánh giá thời lượng pin Samsung Galaxy A03s: Đứng đầu phân khúc giá
Galaxy A03s chỉ nằm trong phân khúc giá rẻ nhưng lại sở hữu viên pin dung lượng khủng 5.000 mAh so với các đối thủ. Vậy dung lượng trên có đủ để đáp ứng nhu cầu sử dụng của người dùng hay không? Hãy cùng chúng tôi đánh
Thiết kế OnePlus 5: không mới nhưng thân thiện, nhẹ, dễ cầm
Nếu anh không làm ra được một cái hay hơn cái có sẵn thì hãy học hỏi từ nó rồi nhúng những nét riêng của anh vào. Đây chính xác là những gì OnePlus đang làm.
Đánh giá chi tiết Xiaomi Mi 5s: máy đẹp, hiệu năng mạnh, pin tốt
Xiaomi Mi 5s có vẻ như đang bị rơi vào lãng quên, nhưng thực sự thì đây vẫn là chiếc điện thoại được đánh giá rất nên mua vào thời điểm này