An interactive digital book showcasing various of my web projects, created using the turn.js library. Hosted in Vercel

FlipBook sreenshot

This project creates a virtual flipbook that displays multiple web projects in an interactive book-like interface. Users can flip through pages to see different projects embedded as iframes.

• Book-like page turning animations
• Hardcover front and back
• Embedded iframes for displaying live websites
• Responsive design with background texture

• HTML5
• CSS3
• JavaScript
• jQuery (dependency for turn.js)
• turn.js library for page flip effects

flipbook/
├── index.html          # Main HTML file
├── style.css           # CSS styling
├── jquery.js           # jQuery library
├── turn.js             # Page flip library
├── denim.png           # Coverpage texture image
└── fancy-cushion.webp  # Background texture image

1. Clone this repository:

   git clone https://github.com/username/projects-flipbook.git
   cd projects-flipbook

2. Ensure all dependencies are in the correct location:

   • jQuery library (jquery.js)
   • turn.js library (turn.js)
   • Background texture (fancy-cushion.webp)

3. Open index.html in your browser or deploy to a web server.

The flipbook automatically initializes when the page loads. Users can:

• Click on the right edge of the book to flip forward
• Click on the left edge to flip backward
• Drag corners to manually turn pages

The flipbook consists of multiple div elements inside a parent container with the class "flipbook":

<div class="flipbook">
  <!-- Hard cover front -->
  <div class="hard">...</div>
  
  <!-- Pages with content -->
  <div>...</div>
  
  <!-- Hard cover back -->
  <div class="hard">...</div>
</div>

1. Hard Cover: Pages with class "hard" represent the book covers
2. Content Pages: Regular divs containing project iframes
3. Table of Contents: Lists all projects included in the book

The flipbook showcases the following projects:

1. Fireworks - New Year celebration page (https://2025.dudo.fi)
2. News App - RSS reader application (https://rss.dudo.fi)
3. CV - Personal resume site (https://dudo.fi)
4. Portfolio - Project showcase (https://risto.dudo.fi)
5. Fortune Wheel - Interactive spinning wheel (https://spin.dudo.fi)
6. CLI - Command line interface (https://start.dudo.fi)

To add new pages to the flipbook:

<div class="flipbook">
  <!-- Existing pages -->
  
  <!-- New page -->
  <div>
    <iframe src="https://your-project-url.com" style="width:800px; height:800px; scale: 0.5;"></iframe>
    <small>Project Description</small>
  </div>
  
  <!-- Back cover -->
  <div class="hard">Thank You <small>~ Dudo</small></div>
</div>

The appearance can be customized by modifying the CSS properties in style.css.

The flipbook is initialized with:

$(".flipbook").turn();

For more advanced configurations:

$(".flipbook").turn({
  width: 800,
  height: 600,
  autoCenter: true,
  gradients: true,
  acceleration: true
});

• jQuery - Required for turn.js
• turn.js - HTML5-based page flip effect

This project works best in modern browsers with HTML5 support:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributions are welcome! Please feel free to submit a Pull Request.

This project is open source and available under the MIT License.

Created by Dudo(aka ristoxxx) - https://dudo.fi