Animations, JavaScript, Sections

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.

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:

VS CODE

Source code of Html:

Paste this code to the Html file

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Flip page in HTML, css and javascript | FantacyDesigns</title>
  </head>
  <body>


 <section>  
  <div class="left next"></div>  
  <div class="right next"></div>  
  <div class="left current"></div>  
  <div class="right current"></div>  
 </section>  
 
<h1 id="title">tap the image to flip</h1>  

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Flip page in HTML, css and javascript | FantacyDesigns</title>

</head>

<body>

</section>

<h1 id="title">tap the image to flip</h1>

</body>

</html>

Source code of CSS:

It is also a markup language and the code for design is given below. Paste it there in the CSS file.

: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;  
 
 html, body, section {  
  height: 100%;  
background-image: linear-gradient(to right top, #336ef2, #325ace, #2d47ac, #26358b, #1c246c);
 }  
 @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: 80%;  
   margin-left:200px;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
 }  
 /* 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 {  
  bottom: 3vh;  
  font-size: 2vh;  
  left: 0;  
  position: absolute;  
  text-align: center;  
  transition: opacity 500ms var(--ease-out);  
  width: 100%;  
 }

: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;

html, body, section {

height: 100%;

background-image: linear-gradient(to right top, #336ef2, #325ace, #2d47ac, #26358b, #1c246c);

}

@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: 80%;

margin-left:200px;

box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;

}

/* 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 {

bottom: 3vh;

font-size: 2vh;

left: 0;

position: absolute;

text-align: center;

transition: opacity 500ms var(--ease-out);

width: 100%;

}

Code of javascript:

It is used for adding functionality to the project. By using javascript libraries we can add functionality to the project and the page is flipping on clicking due to javascript.

<script>
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;  
  }  
 });  

</script>

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;

}

});

</script>

Download source code:

Source code is very important for newbies and it helps them to learn basic things easily. Therefore we have provided the source code for free. So, take advantage of it. You can easily access the file from the below download button.

Task:

You have learned to flip the images. There are 2-3 images. I want you to place multiple images in this gallery. Then flip them. Also, change the transition of flipping from left to right and right to left.

I hope you like the post and if you like the post then must follow us if you have any queries then ask in the comment section.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download