Introduction to H5_slide.js usage of micro-letter H5 page frame design

1. Habit, usually start writing code before writing a bit of preparation code, completely to reduce the amount of code to facilitate reading

$ = function (sel, holder) {
return [].slice.call (holder| | Document). Queryselectorall (SEL));
};
$.on = function (DOM, EventType, F) {
[].concat (DOM). ForEach (function (d) {
Eventtype.split (/\w+/). ForEach (function (type) {
D.addeventlistener (type, F, false);
});
});
return $;
};

2. The first step to create a similar swiper switch effect, of course, we just operate portrait, in the CSS3 using Transform position transformation + transition effect, it is easy to achieve, the key is the need to calculate when the event binding. In addition, if all pages are 100% wide and 100% high, naturally do not need to consider the internal scrolling events, we need to consider more things, so it is best to use an additional transparent layer to do event binding, and then operate with the real section content.

Container = $ ("#container") [0]
Holder = document.createelement ("div"),
Holder.style.cssText = "position:absolute;width:100%;height:100%;left:0;top:0;z-index:1;";
Container.appendchild (holder);

3. Switching method I temporarily custom-made Transform_set (dom/* current section*/, i/* forward or after moving I section*/); It's probably purple.

var H = document.documentElement.clientHeight;


if ("undefined" = = typeof i) {


i = Dom | 0;


}else if ("number"!= typeof DOM) {


i = Sections.indexof (DOM) + i;


}


i = math.min (Math.max (0, I), sections.length-1);





Css_model = function (h,l) {


Return "-webkit-transform:translate3d (" + (l|0) + "px," + (h|0) + "px, 0); Transform:translate3d ("+ (l|0) +" px, "+ (h|0) +" px, 0); ";


};





Sections.foreach (function (section, index) {


Switch (index) {


Case I:


Current_index = i;


Section.style.cssText = Css_model ();


Break


Case I+1:


Section.style.cssText = Css_model (H);


Break


Case I-1:


Section.style.cssText = Css_model (-h);


Break


Default


Section.style.cssText = Css_model (Index > I)? H:-i);


}


});

4. Note that when the event is bound, you need to determine the direction of the switch to decide whether to move forward or back

Event


var startty, Curty, Endty, Autostep;


$.on (Holder, "Touchstart", function (e) {


var touch = e.touches[0];


Startty = Curty = Touch.clienty;


}). On (Holder, "Touchend", function (e) {


var touch = e.changedtouches[0],//Only single point of contact control


Endty = Touch.clienty;


Transform_set (Sections[current_index], Startty > endty? 1:-1);


Startty = Curty = endty = 0;


}. On (document, "KeyDown", function (e) {//Key and mouse events just for the convenience of PC browsers


Switch (e.keycode) {


Case 32:


Case 39:


Case 40:transform_set (Sections[current_index], 20); Break


Case 37:


Case 38:transform_set (Sections[current_index],-20); Break


}


}. On (document, "MouseWheel", function (e) {


Transform_set (Sections[current_index], E.wheeldeltay < 0 20:-20);


});

This section first came here, in fact, has completed a convenient swiper effect. However, the complex content of wood has begun (scrolltop position detection, built-in elements of the relative transform settings and parameter design, animation elements grouped, picture loading, button element simulation penetration, etc.), details of this series of articles.

In the previous article, we simply talked about a mobile end of the whole page switching effect processing, this paper mainly to identify the rolling animation progress interface settings.

Considering that the single page scrolling height may vary with different screen resolutions, the interface we are designing is simply to provide a scrolling percentage of the parameter, which can range from 0 ~ 1.

Run (per/* scrolling percent */,dir/* rolling direction/)//scrolling direction is not necessarily used, leave it for a while.

We register this run assumption on top of the native DOM element and add a run classname to identify it, and the relevant code is as follows:

$.on (Holder, "Touchstart", function (e) {


var touch = e.touches[0];


Startty = Curty = Touch.clienty;


}). On (Holder, "Touchmove", function (e) {


var touch = E.changedtouches[0],


Endty = Touch.clienty;


Run (Curty-endty, E);


Curty = Endty;


});


function Run (dir, e) {


E.stoppropagation ();


E.preventdefault ();


var _this = Sections[current_index];


var st = _this.scrolltop,


ch = _this.clientheight,


SH = _this.scrollheight;


scrollty = st;


st = _this.scrolltop = _this.scrolltop + dir;





And here's the logic of the jump-switch page.





$ (". Run", _this). ForEach (function (r) {//all. Run loops in the current section to determine if there is a Run method


if (typeof R.run = = "function") {


var per = _this.scrolltop = = (sh-ch)? 1: _this.scrolltop/(SH-CH);


R.run (per, dir); There is this method of executing it, bringing the per on. The per calculation comes from the current scroll height of the maximum rolling height


}


});


}

After the event, we need to achieve the effect is actually purple:

document.getElementById (' logo '). Run = function (per, dir) {
var W = document.documentElement.clientWidth;
This.style.cssText =
"-webkit-transform:translate3d (" + (140+w) * per |) + "px," + (this.parentnode.scrolltop|0) + "px, 0);"
+ "Transform:translate3d ((140+w) * per |) +" px, "+ (this.parentnode.scrolltop|0) +" px, 0); ";
};

To bind a run, you can perform a scrolling animation according to the rules.

Demo:http://cardistry.cn/hero/demo.html

Suggest using your mobile phone to view, or use Chrome's mobile side to debug the console.

When you look at the source code, you will find the following code:

. set = function (Set,w,h,w,h) {


Set.begin ({x:0,y:0,rotate:0, scale:1}). Then ({


Per:. 3,


X:w-w,


Y:300,


rotate:180,


Scale:. 5


}). Then ({


Per:. 5,


X:-100,


Y:200,


Opacity:1,


Rotate:360,


Scale:1


}). Then ({


Per:. 7,


X:-100,


Y:200,


Opacity:1,


rotate:240,


scale:1.5


}). Then ({


Per:. 8,


X:-100,


Y:200,


Opacity:.2,


ROTATE:120,


Scale:1


}). End ({x:w-w,y:h-h,rotate:0, scale:1});


};

It seems to be more convenient to write an animation when it looks very tall. This is actually based on the above run of a linear package, concrete implementation

As mentioned above, we use a run method to pass in the parameter per execution when scrolling inside a page, expecting the interface user to make it easier to invoke.

In fact, however, there are a number of common execution processes that can be drawn, such as we expect to write animations in the following ways:

. set = function (Set,w,h,w,h) {


Set.begin ({x:0,y:0,rotate:0, scale:1}). Then ({


Per:. 3,


X:w-w,


Y:300,


rotate:180,


Scale:. 5


}). Then ({


Per:. 5,


X:-100,


Y:200,


Opacity:1,


Rotate:360,


Scale:1


}). Then ({


Per:. 7,


X:-100,


Y:200,


Opacity:1,


rotate:240,


scale:1.5


}). Then ({


Per:. 8,


X:-100,


Y:200,


Opacity:.2,


ROTATE:120,


Scale:1


}). End ({x:w-w,y:h-h,rotate:0, scale:1});


};

Looks like the css3-animation implementation process bawl. Based on the fact that the run method can already be instrumented, we can find a way to build this data into a Run method:

1. Processing process storage and Parameters section:

var trace = [],


Set = {


Begin:function (d) {d.per = D.per | | 0;trace.push (d);


End:function (d) {d.per = D.per | | 1;trace.push (d);


Then:function (d) {Trace.push (d); return this;}


},


W = r.offsetwidth,


h = r.offsetheight,


W = Document.documentElement.clientWidth,


H = Document.documentElement.clientHeight;

2. Execute the DOM's set method and store the procedure in the trace array:

R.set (SET,W,H,W,H);

3. Encapsulation becomes the Run method (loop array in sequence, when the linear transformation of the attributes within the interval is computed and assigned) the supported attributes are limited, and the position transformation mobile end cannot use left or top:

R.run = function (per, dir) {


for (var i = 1; i < trace.length; i++) {


if (trace[i-1].per <= && trace[i].per >= per) {


var prev = trace[i-1],


Next = Trace[i],


Rate = (per-prev.per)/(Next.per-prev.per),


_x = (prev.x+ (next.x-prev.x) *rate) | | 0,


_y = (prev.y+ (next.y-prev.y) *rate) + sections[current_index].scrolltop | | 0,


_o = (prev.opacity+ (next.opacity-prev.opacity) *rate),


_s = (prev.scale+ (next.scale-prev.scale) *rate),


_r = (prev.rotate+ (next.rotate-prev.rotate) *rate),


_s = isNaN (_s)? 1: _s;


_r = isNaN (_r)? 0: _r;


var csstext =


"-webkit-transform:scale (" +_s+ ") Translate3d (" +_x+ "px," +_y+ "px, 0) rotate (" +_r+ "deg);"


+ "Transform:scale (" +_s+ ") Translate3d (" +_x+ "px," +_y+ "px, 0) rotate (" +_r+ "deg);"


+ (isNaN (_o)? "": ("opacity:" + _o+ ";"));


This.style.cssText = Csstext;


return;


}


};


};