how to make effect pull from top to bottom 1 page like android title bar use css3

Question

I am trying to make a effect in html look like the effect pull title bar from top to bottom in android.

Anyone have an idea how to do it? Or what tool i need?

When I swipe, the page just shows follow animation but does not follow my finger

I am newbie. Plsease help me.

Thanks for reading!!!

This is my css i try:

.myanimation {
      animation : mymove .3s linear;
      -webkit-animation : mymove .3s linear;
}
.removeanimation {
    animation : remove .3s linear;
    -webkit-animation : remove .3s linear;
}
@keyframes mymove
{
    0%   {width: 20%;}
    25%  {width: 40%;}
    50%  {width: 60%;}
    75%  {width: 80%;}
    100% {width: 100%;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    0%   {width: 20%;}
    25%  {width: 40%;}
    50%  {width: 60%;}
    75%  {width: 80%;}
    100% {width: 100%;}
}
@keyframes remove
{
    0%   {width: 100%;}
    25%  {width: 80%;}
    50%  {width: 60%;}
    75%  {width: 40%;}
    100% {width: 20%;}
}

@-webkit-keyframes remove /*Safari and Chrome*/
{
    0%   {width: 100%;}
    25%  {width: 80%;}
    50%  {width: 60%;}
    75%  {width: 40%;}
    100% {width: 20%;}
}

this is javascript (i use hammer.js):

$(".play").hammer().on("swiperight", function (event) {
        $('#mainSetting').removeClass('hide');
        $('#mainSetting').removeClass('removeanimation');
        $('#mainSetting').addClass('myanimation');
        $('#mainSetting').css("width","100%");
    });

    $("#mainSetting").hammer().on("swipeleft", function(event) {
            $('#mainSetting').removeClass('myanimation');
            $('#mainSetting').addClass('removeanimation');
            $('#mainSetting').css("width","10%");
            setTimeout(function(){$('#mainSetting').addClass('hide')},400);
    });

Answer 1

Have not tested, but combined with the fiddle, you would simple replace the jQuery for opening and closing on click with the hammer.js implementation. It would be something like this:

var animate = $('.animate');

var hammeropen = Hammer(element).on("swipedown", function(event) {
    $('animate').addClass('open');
});

var hammerclose = Hammer(element).on("swipeup", function(event) {
    $('animate').removeClass('open');
});

At least according to the hammer.js documentation.

For the CSS, you would just need this for the item you want to act like the android top bar that slides from top down:

.animate {
    position:fixed;
    left:0;
    right:0;
    background:#333;
    top:0;
    bottom:90%;
    max-height:20px;
    transition:all 0.5s ease;
    z-index:2;
    text-align:center;
    color:#fff;
}

.animate.open {
    bottom:0;
    max-height:100%;
}