HTML5-one of CSS3 3D transform profiling Learning

Recently, I found that the "Asian animal fund" has made a lot of public welfare advertisements on the subway, attracting one month's bear ads. It's cute. I went back and searched for it. I found this website was made in HTML5, and it was amazing.

So I want to learn about the traditional method of learning, imitating and analyzing, and seeing how people do it.

This website provides an immersive page reading experience. Users can experience the real 3D book turning effect during page switching, which is extremely cool. To achieve this, CSS3 3D transform and JavaScript are required. To achieve a unified cross-browser and cross-device experience, the hammer. js library is used to process sliding operations. It looks like this, very beautiful:

 

Example:

 

Check the code and find that the structure of the webpage is very simple. The whole magazine is a div with the ID of magazine. The child element. page is the page element, which also needs to contain a. page-content layer.

When you drag a page, we copy the current page and the next page, which exist as elements of 3D page flip. The relationship between layers is as follows:

$ CurrentPage-> current page

$ NewPage-> New Page (Previous Page/next page)

$ PageBack-> cloned $ newPage

$ PageFront-> cloned $ currentPage

 

To display only half of the current page, you must set the width of the outer div to 50% and. page-content to 200%.

CSS:.page.front,.page.back,.page.prev,.page.next {    width: 50%;}.page.front .page-content,.page.back .page-content,.page.prev .page-content,.page.next .page-content {    width: 200%;}

　　

When you start to drag a page, you can use the cursor to the left or right of the screen to determine the direction of the page turning and copy the page. Then, when dragging, the page flip progress is calculated based on the moving distance and converted to an angle and applied to the element. Finally, use css transition to complete the remaining animation.

Key Parts of JS Code:

$ ("# Magazine "). hammer ({prevent_default: true }). on ("dragstart", function (event) {// start dragging // judge whether the new page is the previous page or the next page var pageX = event based on the pointer position. gesture. center. pageX ;_. $ newPage = pageX> centerX? _. $ CurrentPage. next (". page "). addClass ("next "):_. $ currentPage. prev (". page "). addClass ("prev"); // copy the current page and the new page _. $ pageFront = $ ("<div class = 'page front'/> "). append (_. $ currentPage. children (). clone ());_. $ pageBack = $ ("<div class = 'page back/> "). append (_. $ newPage. children (). clone (); $ (this ). on ("drag", function (event) {// drag in progress // obtain the gesture direction var direction = event. gesture. direction; // if it is left or right sliding, continue if (direction! = "Left" & direction! = "Right") return; // get the x coordinate of the mouse, and get the percentage and angle var deltaX = Math. max (_. direction = "left "? -1: 1) * event. gesture. deltaX, 0), progress = deltaX/winWidth, angle = (direction = "left "? -180: 180) * progress; // use transform to flip the page _.20.pagefront.css ("transform", "perspective (2200px) rotateY (" + angle + "deg )"); _.w.pageback.css ("transform", "perspective (2200px) rotateY (" + (angle-180) + "deg )");}). on ("dragend", function (event) {// drag the end var deltaX = Math. max (direction = "left "? -1: 1) * event. gesture. deltaX, 0), time = event. gesture. deltaTime, progress = deltaX/winWidth, flipped = progress> 0.5 | deltaX/time> 0.5, // If the sliding distance is more than half of the screen or the speed is greater than 0.5, the page is deemed to have been turned over duration =! Flipped? 1-progress: progress, angle =! Flipped? 0: _. direction = "left "? -180: 180; // use css3 transition to complete the remaining animation _.20.pagefront.css ({"transition": "all" + duration + "s transition-out", "transform ": "perspective (2200px) rotateY (" + angel + "deg)"}); _.20.pageback.css ({"transition": "all" + duration + "s release-out ", "transform": "perspective (2200px) rotateY (" + (angel-180) + "deg )"});});});

　　

If your page contains video, Canvas, and other elements, you still need to do some additional work, because these elements cannot be directly copied in the same state.

 

Finally, if you need to be compatible, the CSS3 browser is not supported. You can use Modernizr to determine how to switch pages horizontally.

If (Modernizr.css transforms3d & Modernizr.css transitions ){

// Supported

} Else {

// Not supported

};

 

Today is written here, want to see the effect of students, you can go to http://moonbear.animalsasia.org/ie/ to see it. It is really beautiful. I will continue to analyze the implementation of other effects tomorrow.