The technical analysis of "The Month Bear Zhi"--immersion browsing experience

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

"Monthly Bear" for you to provide a immersive browsing experience, users can be in the page switch to experience the true 3D effect of the book, very cool. To achieve this effect, you need to use the CSS3 3D transform and JavaScript, and in order to achieve a unified experience across browsers and across devices, use the Hammer.js library to handle sliding operations.

Example effect:

The structure of the Web page is very simple, the entire magazine is an ID magazine Div, child elements. Page, which is also included, contains one layer. Page-content layer.

HTML:

CSS:

. page {

Position:absolute;

top:0;

left:0;

width:100%;

height:100%;

Overflow:hidden;

Display:none;

}

. page-content {

Position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

When the user drags the page, we copy a copy of the current page and the next page, as the elements of the 3D page are present, and the relationships between the layers are as follows:

$currentPage-> Current Page

$newPage-> A new page (previous page/next page)

The $newpage of $pageBack-> clones

The $currentpage of $pageFront-> clones

In addition to the other pages of the current page, to display only half of the page, you need to set the width of the outer div to 50%, and set the. 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 dragging, use the mouse position to determine the direction of the page in the left or right side of the screen and copy the pages. Then, when dragging, the page is calculated according to the moving distance and converted to an angle applied to the element. Finally, use CSS transitions to complete the rest of the animation.

JS Code key parts:

$ ("#magazine"). Hammer ({prevent_default:true}). On ("DragStart", function (event) {

Start dragging

Determine whether the new page is the previous or next page based on the position of the pointer

var pagex = Event.gesture.center.pageX;

_. $newPage = Pagex > CenterX? _. $currentPage. Next (". Page"). AddClass ("Next"): _. $currentPage. Prev (". Page"). AddClass ("prev");

Copy the current page and a new page

_. $pageFront = $ ("

"). Append (_. $currentPage. Children (). Clone ());

_. $pageBack = $ ("

"). Append (_. $newPage. Children (). Clone ());

$ (this). On ("Drag", function (event) {

Drag and drop

Get the direction of the gesture

var direction = event.gesture.direction;

If it's left or right, move on.

if (direction!= "left" && direction!= ' right ') return;

Get the mouse x coordinates, and the width of the window to divide by percent and angle

var deltax = Math.max (_.direction = "Left" -1:1) * Event.gesture.deltaX, 0),

progress = Deltax/winwidth,

Angle = (Direction = = "Left" -180:180) * progress;

Flip a page with transform

_. $pageFront. CSS ("transform", "Perspective (2200px) Rotatey (" + angle + "deg)");

_. $pageBack. CSS ("transform", "Perspective (2200px) Rotatey (" + (angle-180) + "deg");

}. On ("Dragend", function (event) {

Drag and Drop 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 exceeds half of the screen or the speed is greater than 0.5, the page is considered to have been turned over

Duration =!flipped? 1-progress:progress,

Angle =!flipped? 0: _.direction = "Left"? -180:180;

Complete the remaining animations by CSS3 transitions

_. $pageFront. css ({

"Transitions": "All" + Duration + "s Ease-out",

"Transform": "Perspective (2200px) Rotatey (" + Angel + deg) "

});

_. $pageBack. css ({

"Transitions": "All" + Duration + "s Ease-out",

"Transform": "Perspective (2200px) Rotatey (" + (angel-180) + "deg")

});

});

});

If your page contains elements like video or canvas, you'll need to do some extra work because these elements cannot be copied directly in the same state.

Finally, if you need to be compatible with CSS3 browsers. Modernizr can be used to determine the level of sliding to switch the page.

if (modernizr.csstransforms3d && modernizr.csstransitions) {

Support

else {

does not support

};

In fact, there are many special effects on the site production, we can go to experience: http://moonbear.animalsasia.org/ie/. Hope this article can bring you some inspiration, apply to their own website development.