Based on the new attributes of CSS3, Animation and transform implement similar book-turning effects, css3animation
Note: The JS part of this example is written in native JS, which is not applicable to native JS and can be rewritten using jQuery and other third-party frameworks.
First: (the style is a little ugly. You can ignore the effect below. The effect will be good. Later, it will be added to other projects to facilitate the change of 0.0)
Similar to the book flip effect, the original meaning is to use JS to control, click once and use setInterval to control the page flip animation, when the page flip 180 °, clear setInterval, however, when I click continuously, the pages that have not been flipped for 180 ° will not be able to continue to complete the previous action. You can clear the setInterval method, but the animation effect is always poor, of course there are other solutions, but suddenly we thought that CSS3 provided us with an animation. Why don't we use it? We just need to add an animation to avoid this problem, by default, animation is executed every time. Therefore, when a link occurs, as shown in the figure, every page is naturally displayed, and the following code is attached, and implementation steps:
Html part: (this part is really true ~.~)
<Body> <! -- Content of the displayed book --> <div class = "book"> <div class = "page"> <span> 1 </span> <span> 2 </span> </div> <div class = "page"> <span> 3 </span> <span> 4 </span> </div> <div class = "page"> <span> 5 </span> <span> 6 </span> </div> <div class = "page"> <span> 7 </span> <span> 8 </span> </div> <div class = "page"> <span> 9 </span> <span> 10 </span> </div> <div class = "page"> <span> 11 </span> <span> 12 </span> </div> <div class = "page"> <span> 13 </Span> <span> 14 </span> </div> <div class = "page"> <span> 15 </span> <span> 16 </span> </div> <div class = "page"> <span> 17 </span> <span> 18 </span> </div> <div class = "page"> <span> 19 </span> <span> 20 </span> </div> <! -- Used to control previous and next page operations --> <input type = "button" value = "Previous Page" id = "before"/> <input type = "button" value = "next page" id = "after"/> </body>
CSS part: (the flip Effect of book pages is achieved by changing the value of rotatey in transform)
1 <style> 2. book {3 width: 460px; 4 height: 300px; 5 position: relative; 6 margin: 150px 400px; 7-webkit-transform-style: preserve-3d; 8-moz-transform-style: preserve-3d; 9-ms-transform-style: preserve-3d; 10 transform-style: preserve-3d; 11 transform: rotatex (30deg); 12} 13. page {14 width: 230px; 15 height: 300px; 16 17 border: 1px solid #666; 18 position: absolute; 19 right: 0; 20 transform-origin: left; 21 transform-style: preserve-3d; 22 backface-visibility: hidden; 23 font-size: 60px; 24 text-align: center; 25 line-height: 300px; 26} 27. page span {28 display: block; 29 width: 100%; 30 position: absolute; 31 background-color: #00 FFFF; 32} 33. page span: nth-child (2) {34 transform: rotatey (-180deg); 35 backface-visibility: hidden; 36} 37 38 39/* the following two animations can only use the first one. The animation has a reverse and can be executed in reverse order, 40 when used, you need to click the previous page in JS to add the animation to change the attribute value */41/* to flip the next page */42 @ keyframes page {43 0% {44 transform: rotatey (0deg ); 45} 46 100% {47 transform: rotatey (-180deg); 48 z-index: 10; 49} 50} 51/* an animation of the previous book flip */52 @ keyframes page1 {53 0% {54 transform: rotatey (-180deg); 55 z-index: 10; 56} 57 100% {58 transform: rotatey (0deg); 59} 60} 61 62 </style>
JS section (the JS section mainly adds the animation attribute for the corresponding div when you click the previous or next page)
1 <script> 2 var before = document.querySelector("#before"); 3 var after = document.querySelector("#after"); 4 var book = document.querySelector(".book"); 5 var page = document.getElementsByClassName("page"); 7 rotate(); 8 9 function rotate(){10 var middle = 0;12 for(var z=0;z<book.children.length;z++){13 page[z].style.zIndex = book.children.length-z;14 }15 after.onclick = function(){16 if(middle != book.children.length){17 page[middle].style.animation = "page 1.5s linear 1 forwards";18 middle++;19 }else{20 middle = book.children.length;21 }22 };23 before.onclick = function(){24 if(middle != 0){25 page[middle-1].style.animation = "page1 1.5s linear 1 forwards";26 middle--;27 }else{28 middle = 0;29 }30 }31 }32 </script>
The main function of the last JS part is to add the animation attribute to the corresponding div when you click the previous or next page. For details about the animation, you still need to view the API.
For compatibility issues, the better solution here is to add class instead of adding animation to adapt to more browsers, you need to add the prefix-webkit-and-moz-·, so you can write these things in a class and directly add the class, or write a function, encapsulate and output the required strings directly.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
