done

mstrinkyakter · Oct 30, 2023 · cd0f9a5 · cd0f9a5
1 parent ddbaed6
commit cd0f9a5
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 <body>
     <div class="wrapper">
         <div class="cover cover-left"></div>
-        <div class="cover cover-right turn"></div>
+        <div class="cover cover-right"></div>
 
         <div class="book">
             <div class="book-page page-left">

diff --git a/script.js b/script.js
@@ -0,0 +1,91 @@
+// turn pages when click next or prev button 
+const pageTurnBtn = document.querySelectorAll('.nextprev-btn');
+
+pageTurnBtn.forEach((el, index) => {
+        el.onclick = () => {
+            const pageTurnId = el.getAttribute('data-page');
+            const pageTurn = document.getElementById(pageTurnId);
+            if(pageTurn.classList.contains('turn')){
+               pageTurn.classList.remove('turn');
+               setTimeout(() =>{
+                pageTurn.style.zIndex = 20 - index;
+               }, 500)
+            }
+            else{
+                pageTurn.classList.add('turn');
+                setTimeout(() => {
+                    pageTurn.style.zIndex = 20 + index;
+                }, 500)
+            }
+        }
+})
+
+// contact me when button click 
+const pages = document.querySelectorAll('.book-page.page-right');
+const contactMeBtn = document.querySelector('.btn.contact-me');
+
+contactMeBtn.onclick = () =>{
+    pages.forEach((page,index) => {
+        setTimeout(() => {
+            page.classList.add('turn');
+            setTimeout(() => {
+                page.style.zIndex = 20 + index;
+            }, 500)
+        },(index + 1) * 200 + 100)
+    })
+}
+
+// create reverse  index function 
+let totalPages = pages.length;
+let pageNumber = 0;
+
+function reverseIndex(){
+    pageNumber--;
+    if(pageNumber < 0){
+        pageNumber = totalPages - 1;
+    }
+}
+
+// back profile button when click 
+const backProfileBtn = document.querySelector('.back-profile');
+
+backProfileBtn.onclick = () => {
+    pages.forEach((_, index) => {
+        setTimeout(() => {
+            reverseIndex();
+            pages[pageNumber].classList.remove('turn');
+            setTimeout(() => {
+                reverseIndex();
+                pages[pageNumber].style.zIndex = 10 + index;
+            }, 500)
+        }, (index + 1) *200 + 100)
+    })
+}
+
+// opening Animation 
+const coverRight = document.querySelector('.cover.cover-right');
+const pageLeft = document.querySelector('.book-page.page-left')
+// opening animation (cover right animation)
+setTimeout(() =>{
+    coverRight.classList.add('turn');
+}, 2100)
+
+setTimeout(() =>{
+    coverRight.style.zIndex = -1;
+}, 2800)
+
+setTimeout(() =>{
+    pageLeft.style.zIndex = 20;
+}, 3200)
+
+// opening animation (all page right animation)
+pages.forEach((_, index) => {
+    setTimeout(() => {
+        reverseIndex();
+        pages[pageNumber].classList.remove('turn');
+        setTimeout(() => {
+            reverseIndex();
+            pages[pageNumber].style.zIndex = 10 + index;
+        }, 500)
+    }, (index + 1) *200 + 2100)
+})
diff --git a/style.css b/style.css
@@ -28,12 +28,25 @@ body{
     min-height: 100vh;
     background: var(--bg-color);
     color: var(--text-color);
+    overflow: hidden;
 }
 .wrapper{
     position:relative;
     width: 66rem;
     height: 40rem;
     padding: 2rem;
+    perspective: 250rem;
+    animation: show-animate 2s forwards;
+}
+@keyframes show-animate{
+    0%,30%{
+        opacity: 0;
+        transform: rotate(-20deg);
+    }
+    100%{
+        opacity: 1;
+        transform: rotate(0deg);
+    }
 }
 .cover{
     position: absolute;
@@ -51,7 +64,9 @@ body{
 .cover.cover-left{
     z-index:-1;
 }
-
+.cover.cover-right{
+    z-index: 100;
+}
 .cover.cover-right.turn{
     transform: rotate(180deg);
 }
@@ -60,6 +75,7 @@ body{
     width: 100%;
     height: 100%;
     display: flex;
+    perspective: 250rem;
 }
 .book .book-page{
     position: absolute;
@@ -70,6 +86,9 @@ body{
     display: flex;
     padding: 2rem;
 }
+.book-page.page-left{
+    box-shadow: -.6rem .6rem .6rem rgba(0,0,0,.1);
+}
 .profile-page{
     display: flex;
     flex-direction: column;
@@ -149,6 +168,7 @@ body{
     right: 0;
     transform-style: preserve-3d;
     transform-origin: left;
+    transition:transform 1s cubic-bezier(.645, .045, .355, 1 );
 }
 .book-page.page-right.turn{
     transform: rotateY(-180deg);