Home > Developer > Web Develop
Prerequisites:
A lot of activities are now using a similar full-screen scrolling effect especially in the inside I developed a quick build of this kind of project control is different from most of the market, this control also supports the animation effect of elements and provides a variety of element effects based on Zepto.js
Feature List:
1 quickly achieve full-screen scrolling effect of the page. and offers a variety of page flipping effects, compatible with most iOS and Android systems.
2 support to add a variety of animation elements in the page effect to achieve fade in, slide into the effect.
3 supports configuring music features.
4 support shake and shake interface function.
Component Core Code principle:
1 page scrolling
On the mobile page if you want to use scrolling, if there is no animation effect, then certainly everyone first thought is to use the scroll bar to scroll, but this kind of scrolling is more monotonous, the implementation of animation is more difficult, so came up with the use of CSS3 and Div absolute positioning to achieve.
<Body> <Divclass= "Item Item1"> </Div> <Divclass= "Item Item2"> </Div> <Divclass= "Item Item3"> </Div></Body>
Then set the absolute positioning style for each div
. item { position:absolute; top:0; left:0; width:100%; height:100%; Overflow:hidden; Background-position:center;}Each div on the page would be the equivalent of a page that just overlaps, and then use JavaScript and CSS to scroll through the pages (using touch time to change the transform of the Div for scrolling)
functionTouchstart (event) {if(DragStart!==NULL)return; if(event.touches) {event= Event.touches[0]; } //where to crawlDragStart =Event.clienty; } functionTouchMove (event) {if(DragStart = = =NULL)return; if(event.touches) {event= Event.touches[0]; } //gets the percentage of the difference in progress when the fetch startsPercentage = (dragstart-event.clienty)/window.screen.height;//Compare with screen height if(Percentage > 0) { ////Drag up varTranslatey = 1-0.4*percentage;//position factor, can fine-tune$ (event.target). Next (). CSS ('-webkit-transform ', ' Translatey (' +translatey*100+ '%) ');//move on next item } Else { //drag down varTranslatey =-(0.4*percentage); $ (event.target). CSS ('-webkit-transform ', ' Translatey (' +translatey*100+ '%) ');//move under current item } } functionTouchend (event) {DragStart=NULL;//flag bit value NULL //after the grab stops, make the corresponding judgment according to the critical value if(Percentage >= dragthreshold) {//Scroll down$ (event.target). CSS ('-webkit-transform ', ' Translatey (-100%) '); $ (event.target). Next (). CSS ('-webkit-transform ', ' translatey (0) '); } Else if(Math.Abs (percentage) >= dragthreshold) {//Scroll up$ (event.target). CSS ('-webkit-transform ', ' Translatey (100%) '); } Else{//failed to reach critical value restored as-is$ (event.target). Next (). CSS ('-webkit-transform ', ' Translatey (100%) '); } //Reset PercentagePercentage = 0; }
Here are a few notes:
1) using Translate3d to replace the Translatey can turn on hardware acceleration to be better in rendering.
2) When you perform the next or previous page, you can add a CSS3 animation to the DIV to make it scroll with a certain animation effect, and the component provides a 8 page turn effect.
2 Fading of elements:
The animation effect of element entry is mainly using CSS3 to realize
. FadeIn{Animation-name:FadeIn;-webkit-animation-name:FadeIn;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:Ease-in-out;-webkit-animation-timing-function:Ease-in-out; }@keyframes fadeIn{0% {Transform:Scale (0);Opacity:0.0; }60%{Transform:Scale (1.1); }80%{Transform:Scale (0.9);Opacity:1; }100%{Transform:Scale (1);Opacity:1; }} @-webkit-keyframes fadeIn{0% {-webkit-transform:Scale (0);Opacity:0.0; }60%{-webkit-transform:Scale (1.1); }80%{-webkit-transform:Scale (0.9);Opacity:1; }100%{-webkit-transform:Scale (1);Opacity:1; } }
. FadeIn{Animation-name:FadeIn;-webkit-animation-name:FadeIn;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:Ease-in-out;-webkit-animation-timing-function:Ease-in-out; }@keyframes fadeIn{0% {Transform:Scale (0);Opacity:0.0; }60%{Transform:Scale (1.1); }80%{Transform:Scale (0.9);Opacity:1; }100%{Transform:Scale (1);Opacity:1; }} @-webkit-keyframes fadeIn{0% {-webkit-transform:Scale (0);Opacity:0.0; }60%{-webkit-transform:Scale (1.1); }80%{-webkit-transform:Scale (0.9);Opacity:1; }100%{-webkit-transform:Scale (1);Opacity:1; } }
The element is hidden first, when the page slides into the window to display it, it will apply on the CSS3 set animation effect, extend not only fadein effect, many effects can be set, in addition, you can add data-delay attributes to the element to control the order of execution of elements.
How to use components:
How to use the component: {' Type ': 1,//There are 8 ways to use the animated page' Pageshow ':function(page) {},' Pagehide ':function(page) {},' Useshakedevice ': {//do you want to use your phone to shake the interface' Speed ': 30, ' Callback ':function(page) {}},' Useparallax ':true,//Use the Parallax effect to see the demo on page sixth' Usearrow ':true,//whether to use arrows' Useanimation ':true,//whether to use element animation effects' Usemusic ': {//whether to use music' AutoPlay ':true, ' Loopplay ':true, ' src ': ' Http://mat1.gtimg.com/news/2015/love/FadeAway.mp3 ' } };
Original address: Https://github.com/lvming6816077/H5FullscreenPage
Full-screen scrolling effect h5fullscreenpage.js
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
