2013

Parallax for iPad

Not long ago, while working on a project, flash2html, we were faced with the task of implementing Parallax Scrolling in applications for iOS, and the result I would like to share.

First, what is Parallax Scrolling? Parallax Scrolling is a design method that allows you to create the effect of multi-level and volume of the page. A good example of a site using Parallax technology Scrolling is "Active" (http://activatedrinks.com/).

As you can see on the page views, while scrolling down, some of the layers (blue dots on the background) move with a speed different from the elements in the foreground.

Another interesting example – site of application http://benthebodyguard.com/index.php . In the process of scrolling the page, we take a walk on the dark streets of the city in the company of a bodyguard:

This technology allows you to create interesting promotional pages that attract the user's attention.

Parallax Scrolling works by positioning elements in any given moment, depending on $ (window). ScrollTop (); (in case of using a framework jQuery). Ie at every moment of scrolling the page, we define the position of the screen, and depending on the positioning of this provision place all necessary elements.

Now, lets describe the problem. One of the foundations of the project flash2html is to correct the work of developed webpages on mobile devices. So we could not afford any mistakes in the promotional page of this project on mobile devices.

The iOS feature is one in which in the process of scrolling down the page, it is impossible to track the current position of the page. In essence instead of a smooth animation while scrolling, we have a sharp movement of objects at the end of the scroll.

In this case the user does not understand why all the objects on the page begin to twitch, in addition, only half pictures are displayed which change their position in the scroll.

One solution would be to develop a separate version of the site for mobile devices. But we wanted to develop this feature. Therefore, armed with tenacity and Google, we started looking for a solution.

It turns out that the task of tracking the scroll on mobile devices has been faced by many but normal working solutions have not been found.

Since we can not keep track of the time of the standard scroll, we will emulate this scroll.

First, when the webpage is displayed in the browser iOS (Safari), it disables the ability of the standard scroll:

$(document).bind("dragstart", function() { return false; });

 

Moreover, we framed all the content of our website into div с:

Width: 100%;

Height: 100%;

Overflow: hidden;

 

Next we used the script:

$(document).live(touchstart, function(e) {

e.preventDefault();

startpos = e.originalEvent.touches[0].pageY;

endscroll = -10;

});

$(document).live(touchmove, function(e) {

            e.preventDefault();

            endscroll = e.originalEvent.changedTouches[0].pageY;

 var diffscroll = endscroll-startpos;

             marginTop = curscroll + diffscroll;

             if(curscroll+diffscroll>0)marginTop=0;

             if(marginTop

marginTop = $(window).height()-$("#frames_holder").height();

}

            $("#pagescroller").css({"margin-top": marginTop});

positionElements(marginTop);

});

 

So, what are we doing?:)

1. At the start of the touch of a finger to the screen, we fix the position of the scroll.

2. At this time, as we move a finger, its current position is compared to the primary, which allows us to determine the distance-axis Y (var diffscroll = endscroll-startpos ;)

3. Next, put a limit - a space above shall not be greater than 0 or less than the height of the content (that we can not move content off the screen).

4. After that, we will change the Margin-top moving the entire content block ($ ("# pagescroller"). Css ({"margin-top": marginTop}) ;)

Well, we made an emulation of the scrolling page but so far there is no special meaning. Next, we need to place all our items according to the current scroll. We call the function position Elements in the moment of scroll, in which giving the value of ​​marginTop. The same function, we use in the normal version of the site while scrolling:

$(window).scroll(function(){

            positionElements();

})

In function we process the data of scrolling:

function positionElements(vl){

            if(typeof(vl)==="undefined"){

                        var top = $(window).scrollTop();

                        var mobile = false;

            }else {

                        var top = vl*(-1);       

                        var mobile = true;

            }

Here locating all elements according to scroll

}

If we passed into the function scroll value we use it, but if not, we operate on the PC version of the site, so we can use the $ (window). ScrollTop ();

 

In the end we have success. We were able to experience all the charms of Parallax scrolling on the iPhone and iPad. The following function, which we plan to finish is the inertia effect in screen scrolling.