Creating a slide up effect on a mobile device using CSS/JS

Question

What I need to achieve is that when you swipe up the page from the arrows, the page needs to slide up and the user will be redirected to another page (as an intro).

I currently have a working way to use the slider:

The question is: how do I actually make an effect that looks like the page goes up when the slider is used?

Answer 1

You can use Hammer.js

var swipe = new Hammer.Swipe();
swipe.recognizeWith(swipeup);

See swipe-recogniser.

So once you recognise the swipe-up gesture, you can animate the div to translate up using css.

div {
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px);
}

Refer this

Answer 2

There are many different ways to do it. As I prefer to do it without plugins (well except jQuery), here's my way to achieve this:

1. Detect the Swipe

This can be achieved with the "touchstart" and "touchend" events. If the touchstart event is fired, you'll get the coordinates of the touch position. When the touch ends, get it again and compare the distance.

There are many really helpful articles about this topic.

here or here or just google "javascript swipe"

2.Scroll down

Can be done in many different ways, depends on what animation you want. Google for "smooth scrolling javascript". If you use jQuery, this might be the easiest way:

  function afterscrolling(){
        $('html, body').animate({
            scrollTop: $( YOUR_ELEMENT ).offset().top
        }, 500);
        return false;
};

Answer 3

Made a Codepen http://codepen.io/keephacking/pen/RaYxpm
Used jQuery touchSwipe and slideUp in jquery for the effect
For more about TouchSwipe ,Check link below. https://github.com/mattbryson/TouchSwipe-Jquery-Plugin