How to Make a Page Flipping Book in HTML

Static PDFs are alright to present your information, but page flipping books in HTML are better option, because they are more interactive, engaging and easily accessible. There are many page flipping book makers that you can use to make your book in just a few minutes. This article focuses on how to make a page flipping book in HTML with the use of FlipHTML5.

Part 1: The Best Softwre to Help Make a Page Flipping Book in HTML

FlipHTML5 offers a wide range of possibilities for you: from making a page flipping book in HTML to easy distribution via websites, email and social networks and powerful content protection. You have the option of deciding whether to start a new project from the uploaded PDF file or uploaded images. It is easy for you to add interactive elements such as hotspots and links to the flipping book. Single password can be created to limit the access to your flipping book that is published to local. Your audience can access the flipping book on any device, generating more leads.

Step 2: Apply and Customize One Template

Templates have been pre-created for you. Double click to apply one template. Custom setting option also gives you a chance to customize the template. You can change the loading setting which includes loading caption color, loading background color and loading picture. The background is also customizable in terms of background image, opacity and position.

Step 3: Add Interactive Elements to the Flipping Book

Click on the “Animation Editor” to enter the editing page where you can add all kinds of interactive elements to the flipping book. With E-Commerce option, you can sell your product directly in the flipping book. Links, images, videos and other interactive elements can be added as easily as one click. Stock images are provided, so that you do not need to spend time searching for images on Internet.

Step 4: Publish the Flipping Book

FlipHTML5 enables you to publish the flipping book to the Cloud. Readers can access your publication easily on modern browsers. You can share the link to the flipping book online. With simple clicks on the link, people can read your publication at once. If you want to distribute the flipping book offline, you can choose to publish the flipping book in EXE or Android App format,which allows for offline viewing. It is also available for you to publish the flipping book as ZIP,which can be sent via email easily.

Part 3: Enjoy Page Flipping Book in HTML5 Made by FlipHTML5

Page Flipping Book Example

Start Creating A Page Flipping Book with FlipHTML5

Источник

Create Flip Page Animation Using HTML,CSS and JavaScript Code

Welcome to the codewithrandom blog. In this article, We Create Flip Page Animation Using HTML, CSS, and JavaScript. In this Page Flip animation, we have 2 images but when the website load there is a full-screen 1 image shown when you click its flip like a book page flip, and the image change, and if you again click you see again book page flip effect and previous image come. so we create this Page Flip Animation Project.

I hope you enjoy our blog so let’s start with a basic html structure for a Page Flip Animation.

CSS Code For Page Flip animation

:root < --duration: 500ms; --ease-in: cubic-bezier(0.85, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.3, 1); --ease-in-out: ease-in-out; --image-current: url(https://images.unsplash.com/photo-1630847911146-edd8828abf14?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjUxMjQ0Ng&ixlib=rb-1.2.1&q=85); --image-next: url(https://images.unsplash.com/photo-1596774468032-915cdd39ea39?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjUxMjg1MQ&ixlib=rb-1.2.1&q=85); >html, body, section < height: 100%; >@keyframes zoom-1 < 0%, 100% < transform: scale(0.8); >50% < transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); >> @keyframes zoom-2 < 0%, 100% < transform: scale(0.8); >50% < transform: scale(0.75); box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); >> section < animation: zoom-1 calc(var(--duration) * 2) var(--ease-in-out); border-radius: 1vh; box-shadow: 0 2vh 4vh rgba(0, 0, 0, 0.2); display: flex; perspective: 2000px; position: relative; transform: scale(0.8); width: 100%; >/* duplicating the animation to get it to fire again */ section.flip < animation: zoom-2 calc(var(--duration) * 2) var(--ease-in-out); >.left, .right < backface-visibility: hidden; background-attachment: fixed; background-position: center center; background-size: cover; height: 100%; position: absolute; top: 0; transition-property: transform; transition-duration: var(--duration); width: 50%; >.current < background-image: var(--image-current); >.next < background-image: var(--image-next); >.left < border-radius: 1vh 0 0 1vh; left: 0; transform-origin: 100% 50%; >.right < border-radius: 0 1vh 1vh 0; right: 0; transform-origin: 0% 50%; >.next.left < transform: rotateY(90deg); transition-delay: 0ms; transition-timing-function: var(--ease-in); z-index: 9; >.current.right < transform: rotateY(0deg); transition-delay: var(--duration); transition-timing-function: var(--ease-out); >.flip .current.right < transform: rotateY(-90deg); transition-delay: 0ms; transition-timing-function: var(--ease-in); >.flip .next.left < transform: rotateY(0deg); transition-delay: var(--duration); transition-timing-function: var(--ease-out); >h1

Here is our Updated Output Of Page Flip Animation CSS Code.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

JavaScript Code For Page Flip animation

const section = document.querySelector("section"); let clicked = false; section.addEventListener("click", (e) => < section.classList.toggle("flip"); if (!clicked) < clicked = true; document.getElementById("title").style.opacity = 0; >>);

These few lines of JavaScript code for Page Flip Animation.

Final Output Of Flip Page Animation Using HTML,CSS and JavaScript

Now we have completed our javascript section for Page Flip Animation, Here is our updated output with javascript code. Hope you like the Page Flip animation.

you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

In this post, we learn how to create a Page Flip animation using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Which code editor do you use for this Page Flip Animation coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

YES! this is a responsive project

Источник

Book Page Turn Flip Animation Using HTML & Pure CSS Codepen

Welcome to the Codewithrandom blog. In this blog, we learn how to create Book Page Flip Animation. We use HTML and CSS for Book Page Flip Animation With Codepen Code.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

HTML Code Book Page Flip Animation

 
 
Turning pages
with css
 
* Images loaded randomly from Picsum.photos
 

First, we’ll make an image loader container with the div tag, and then inside of that container, with the tag, we’ll add the heading “Turning pages with CSS.” To make six pages using the div tag, we will now create another div tag for the book. Last but not least, we’ll build the flips container, which we’ll use with CSS to add the page-turn effect. Seven flip containers will be built inside the image-loading container.

There is all the Html code for the Book Page Turn Flip Animation. Now, you can see output without Css, then we write Css Code for the Book Page Turn Flip Animation.

Only Html Code Output

CSS Code Book Page Flip Animation

@import url(«https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap»); * < padding: 0; margin: 0 auto; box-sizing: border-box; >body < font-family: "Indie Flower", cursive; background-color: #eee; color: #555; text-align: center; padding: 4em 0; >.imgLoader < position: fixed; animation: preLoad 1s steps(1); width: 1px; height: 1px; >@keyframes preLoad < 0% < background-image: url("https://picsum.photos/420/300?random=1"); >10% < background-image: url("https://picsum.photos/420/300?random=2"); >20% < background-image: url("https://picsum.photos/420/300?random=3"); >30% < background-image: url("https://picsum.photos/420/300?random=4"); >40% < background-image: url("https://picsum.photos/420/300?random=5"); >100% < display: none; >> .container < position: relative; width: 420px; border: #fff solid 2px; border-radius: 4px; height: 420px; >.title < position: absolute; top: 45px; left: 0; width: 100%; font-size: 2em; font-weight: normal; line-height: 1; >.credit < position: absolute; top: 100%; left: 0; font-size: 0.9em; text-align: left; >.book < position: relative; perspective: 630px; perspective-origin: center 50px; transform: scale(1.2); filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.25)); >.page < width: 210px; height: 300px; background-color: #bbb; position: absolute; top: 0px; right: 50%; transform-origin: 100% 100%; border: solid #555 2px; background-size: 420px 300px; background-position: center; transform-style: preserve-3d; >.page:nth-child(1) < transform: rotateX(60deg) rotateY(3deg); >.page:nth-child(2) < transform: rotateX(60deg) rotateY(4.5deg); >.page:nth-child(3) < transform: rotateX(60deg) rotateY(6deg); animation: nextPage 25s infinite -24s steps(1); background-size: 420px 300px; background-position: -2px -2px; >.page:nth-child(4) < transform: rotateX(60deg) rotateY(177deg); >.page:nth-child(5) < transform: rotateX(60deg) rotateY(175.5deg); >.page:nth-child(6) < transform: rotateX(60deg) rotateY(174deg); overflow: hidden; >.page:nth-child(6)::after < content: ""; width: 210px; height: 300px; position: absolute; top: 0px; right: 0%; transform-origin: center; transform: rotateY(180deg); animation: nextPage 25s -20s infinite steps(1); background-size: 420px 300px; background-position: 100% -2px; >@keyframes nextPage < 0% < background-image: url("https://picsum.photos/420/300?random=1"); >20% < background-image: url("https://picsum.photos/420/300?random=2"); >40% < background-image: url("https://picsum.photos/420/300?random=3"); >60% < background-image: url("https://picsum.photos/420/300?random=4"); >80% < background-image: url("https://picsum.photos/420/300?random=5"); >> .gap < width: 10px; height: 300px; background: none; transform: rotateX(60deg); transform-origin: bottom; position: absolute; top: 0px; left: calc(50% - 5px); >.gap::after < content: ""; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); background-color: #555; width: 10px; height: 5px; border-radius: 50%; >.pages, .flips < transform-style: preserve-3d; >.flip < width: 32px; height: 300px; position: absolute; top: 0px; transform-origin: 100% 100%; right: 100%; border: solid #555; border-width: 2px 0px; perspective: 4200px; perspective-origin: center; transform-style: preserve-3d; background-size: 420px 300px; >.flip::after < content: ""; position: absolute; top: 0px; right: 0%; width: 100%; height: 100%; transform-origin: center; background-size: 420px 300px; >.flip.flip1 < right: 50%; animation: flip1 5s infinite ease-in-out; border-width: 2px 2px 2px 0; >.flip.flip1::after < animation: nextFlip1 25s -20s infinite steps(1); >.flip:not(.flip1) < right: calc(100% - 2px); top: -2px; transform-origin: right; animation: flip2 5s ease-in-out infinite; >.flip.flip2::after < animation: nextFlip2 25s -20s infinite steps(1); >.flip.flip3::after < animation: nextFlip3 25s -20s infinite steps(1); >.flip.flip4::after < animation: nextFlip4 25s -20s infinite steps(1); >.flip.flip5::after < animation: nextFlip5 25s -20s infinite steps(1); >.flip.flip6::after < animation: nextFlip6 25s -20s infinite steps(1); >.flip.flip7::after < animation: nextFlip7 25s -20s infinite steps(1); >.flip.flip7 < width: 30px; border-width: 2px 0px 2px 2px; >.flip.flip7::after < animation: nextFlip7 25s -20s infinite steps(1); >@keyframes flip1 < 0%, 20% < transform: rotateX(60deg) rotateY(6deg); >80%, 100% < transform: rotateX(60deg) rotateY(174deg); >> @keyframes flip2 < 0%, 20% < transform: rotateY(0deg) translateY(0px); >50% < transform: rotateY(-15deg) translateY(0px); >> @keyframes nextFlip1 < 0% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -178px -2px; transform: rotateY(0deg); >10% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -210px -2px; transform: rotateY(180deg); >20% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -178px -2px; transform: rotateY(0deg); >30% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -210px -2px; transform: rotateY(180deg); >40% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -178px -2px; transform: rotateY(0deg); >50% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -210px -2px; transform: rotateY(180deg); >60% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -178px -2px; transform: rotateY(0deg); >70% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -210px -2px; transform: rotateY(180deg); >80% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -178px -2px; transform: rotateY(0deg); >90% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -210px -2px; transform: rotateY(180deg); >> @keyframes nextFlip2 < 0% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -148px -2px; transform: rotateY(0deg); >10.5% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -238px -2px; transform: rotateY(180deg); >20% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -148px -2px; transform: rotateY(0deg); >30.5% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -238px -2px; transform: rotateY(180deg); >40% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -148px -2px; transform: rotateY(0deg); >50.5% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -238px -2px; transform: rotateY(180deg); >60% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -148px -2px; transform: rotateY(0deg); >70.5% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -238px -2px; transform: rotateY(180deg); >80% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -148px -2px; transform: rotateY(0deg); >90.5% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -238px -2px; transform: rotateY(180deg); >> @keyframes nextFlip3 < 0% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -118px -2px; transform: rotateY(0deg); >11% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -268px -2px; transform: rotateY(180deg); >20% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -118px -2px; transform: rotateY(0deg); >31% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -268px -2px; transform: rotateY(180deg); >40% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -118px -2px; transform: rotateY(0deg); >51% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -268px -2px; transform: rotateY(180deg); >60% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -118px -2px; transform: rotateY(0deg); >71% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -268px -2px; transform: rotateY(180deg); >80% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -118px -2px; transform: rotateY(0deg); >91% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -268px -2px; transform: rotateY(180deg); >> @keyframes nextFlip4 < 0% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -88px -2px; transform: rotateY(0deg); >11.5% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -298px -2px; transform: rotateY(180deg); >20% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -88px -2px; transform: rotateY(0deg); >31.5% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -298px -2px; transform: rotateY(180deg); >40% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -88px -2px; transform: rotateY(0deg); >51.5% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -298px -2px; transform: rotateY(180deg); >60% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -88px -2px; transform: rotateY(0deg); >71.5% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -298px -2px; transform: rotateY(180deg); >80% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -88px -2px; transform: rotateY(0deg); >91.5% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -298px -2px; transform: rotateY(180deg); >> @keyframes nextFlip5 < 0% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -58px -2px; transform: rotateY(0deg); >12% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -328px -2px; transform: rotateY(180deg); >20% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -58px -2px; transform: rotateY(0deg); >32% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -328px -2px; transform: rotateY(180deg); >40% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -58px -2px; transform: rotateY(0deg); >52% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -328px -2px; transform: rotateY(180deg); >60% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -58px -2px; transform: rotateY(0deg); >72% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -328px -2px; transform: rotateY(180deg); >80% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -58px -2px; transform: rotateY(0deg); >92% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -328px -2px; transform: rotateY(180deg); >> @keyframes nextFlip6 < 0% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -28px -2px; transform: rotateY(0deg); >12.5% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -358px -2px; transform: rotateY(180deg); >20% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -28px -2px; transform: rotateY(0deg); >32.5% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -358px -2px; transform: rotateY(180deg); >40% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -28px -2px; transform: rotateY(0deg); >52.5% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -358px -2px; transform: rotateY(180deg); >60% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -28px -2px; transform: rotateY(0deg); >72.5% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -358px -2px; transform: rotateY(180deg); >80% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -28px -2px; transform: rotateY(0deg); >92.5% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -358px -2px; transform: rotateY(180deg); >> @keyframes nextFlip7 < 0% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -2px -2px; transform: rotateY(0deg); >13% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -388px -2px; transform: rotateY(180deg); >20% < background-image: url("https://picsum.photos/420/300?random=2"); background-position: -2px -2px; transform: rotateY(0deg); >33% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -388px -2px; transform: rotateY(180deg); >40% < background-image: url("https://picsum.photos/420/300?random=3"); background-position: -2px -2px; transform: rotateY(0deg); >53% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -388px -2px; transform: rotateY(180deg); >60% < background-image: url("https://picsum.photos/420/300?random=4"); background-position: -2px -2px; transform: rotateY(0deg); >73% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -388px -2px; transform: rotateY(180deg); >80% < background-image: url("https://picsum.photos/420/300?random=5"); background-position: -2px -2px; transform: rotateY(0deg); >93% < background-image: url("https://picsum.photos/420/300?random=1"); background-position: -388px -2px; transform: rotateY(180deg); >> .twitterLink < position: fixed; bottom: 0.5em; right: 0.5em; >.twitterLink img < width: 2em; filter: grayscale(100%); transition: filter 0.25s; >.twitterLink img:hover

Step1:We’ll first import the “Indie Flower” typeface from Google into our turn page project before setting the padding, margin, and box-sizing property to “border-box” using the universal selector (*).

The font family will be set to “Indie Flower” inside the body element selector, and the background colour property will be used to set the font colour to “dark-gray” and the background colour to “off-white.”

Step2:We will now choose the image loader container using the class identifier (.imgloader). We’ll assign the width and height to “1 px” and the position to “fixed” using the position property. In order to create the page turn motion inside the keyframe, we will now add key frames to our image loader. We’ll alter the backdrop at various keyframes.

Step3: Using the class selector, we will now choose the page container; we will then set the position to relative; and using the transform property, we will scale the picture to “2” and set the width and height to 210px and 300px, respectively. The pages will now be selected using the page property, and their positions will be changed using the shift property.

Now we have completed our Book Page Turn Flip Animation Using HTML and CSS Codepen Project.

Here is our final updated output HTML + CSS.

Источник

Flip page in HTML, css and javascript

Hello everyone, in this post we will learn how to flip pages in HTML, CSS, and javascript. In the last post, we created a hover effect on images using Html CSS languages. Today our focus is to flip the pages using HTML, CSS and js.

Flip page in Html:

A flip page is a function and it is used to change the page by showing a transition when flipping the pages from one to another. By clicking on the left or right side of the image you can simply flip the images.

When we click on this image then it flips. It flips by showing a transition of the page. Therefore, It has different images and they flip. They have a simple background and they are centralized using CSS properties. They have a duration and it is also fixed using the timer. So, you can increase or decrease the time of transition of the image.

You might like it:

How to create a flip page in HTML, CSS, and javascript?

A flip page is a simple way to create it using HTML, CSS, and javascript. Html is used for creating the skeleton of the images. CSS is used to design the images and related things related to design. Therefore, Javascript is used for showing transition by clicking on the image.

Download a code editor for Flip page in HTML:

Source code of Html:

Paste this code to the Html file

Источник