The effect of flipping images on the web as if turning the pages of a book provides users with a fresh experience and enhances the appeal of a site.
This is particularly useful for digital catalogs, online books, portfolio sites, and other contexts where strong visual impact is desired.
In this article, we will explain in detail how to implement this using the jQuery plugin jquery.onebook3d.js, in a way that beginners can easily understand.
It also seems to be available as a WordPress plugin.
Trying to create a page-flipping effect from scratch with JavaScript can be quite challenging, right?
What is jquery.onebook3d.js?
jquery.onebook3d.js is a jQuery plugin that allows you to display multiple images as if they were a 3D book.
By using this plugin, even those with little coding knowledge can add professional-looking effects without writing complex JavaScript.
It can also be utilized as a WordPress plugin, making it applicable in an even broader range of cases.
CSS Settings
First, set up the basic CSS for your web page. Here, you define styles that affect the entire page, such as background color, text color, and font size.
<style>
body {
margin: 0;
padding: 0;
font-size: 18px;
text-align: center;
width:100%;
margin:0px;
padding:0px;
background-color: #000;
color: #fff;
}
h1{
text-align: center;
font-size: 20px;
line-height: 2em;
padding: 30px 0 0 0;
}
</style>
HTML Structure
Next, write the HTML. Use a div tag to specify the area where the images will be displayed.
Here, we prepare an area (id="books") to display multiple images that flip like a book.
<h1>Using jquery.onebook3d.js to flip images like a book.<br>Try right-clicking on the image below and moving it left and right.</h1>
<div style="padding: 0 30px 30px 30px;">
<div id="books"></div>
</div>
JavaScript Settings
Now, configure the JavaScript to enable the plugin’s functionality.
Load the necessary library files and set up an array of image files, then apply the plugin with the appropriate code.
You will need to load the following files: jquery-1.11.0.min.js, jquery.mousewheel.min.js, three.min.js, and jquery.onebook3d-2.33.js.
Prepare multiple images (1 ～ 8.jpg), assign their paths to an array (arry), and then call $('#books').onebook(arry);.
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="jquery.onebook3d-2.33.js"></script>
<script>
$(function(){
var arry = [];
arry = [
'1.jpg',
'2.jpg',
'3.jpg',
'4.jpg',
'5.jpg',
'6.jpg',
'7.jpg',
'8.jpg'
];
$('#books').onebook(arry);
});
</script>
Demo Page: Displaying Images as a Page-Flipping Book with jquery.onebook3d.js
To see how it actually works, you can check out the demo page from the link below.
Through this demo, you can experience the effect firsthand and get further customization ideas.
Demo page using jquery.onebook3d.js to flip images like a book
Source: WP Plugin 3d book gallery, 2018
For more details and additional information about this plugin, please refer to the following link:
WP Plugin 3d book gallery, 2018
Conclusion
By using jquery.onebook3d.js, anyone can easily incorporate a page-flipping book effect into their website.
I hope this article provides new inspiration for your website or project.
※ Please use at your own risk.
Do not reuse the Google Analytics tag found in the head section of the demo page.
