Create Page Flip Animation Css| Page Flip Animation(Source Code)

Create Page Flip Animation Css| Page Flip Animation(Source Code)

 

 

Welcome to the codewithrandom blog. In this article, we create page flip animation using css code. We use html,css, and javascript code for page flip animation.

Hope you enjoy our blog so let’s start with a basic html structure for a page flip animation.

100+ Front-end Projects for Web developers (Source Code)

Page Flip animation HTML code

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

This is all the code for page flip animation. Now, you can see output without css and javascript, then we write css & javascript for the page flip animation.

Output page flip animation

Page Flip Animation CSS Code

 :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 {  
  bottom: 3vh;  
  font-size: 2vh;  
  left: 0;  
  position: absolute;  
  text-align: center;  
  transition: opacity 500ms var(--ease-out);  
  width: 100%;  
 }  

Here is our updated output Of page flip animation CSS.

output

Portfolio Website Using HTML CSS And JAVASCRIPT ( 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;  
  }  
 });  

Final output Of page flip animation

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

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

Codepen by – Jake Albaugh

Share on:

0 thoughts on “Create Page Flip Animation Css| Page Flip Animation(Source Code)”

Leave a Comment