Creating a top-to-bottom pull effect on a single page, similar to the Android title bar, can be achieved using CSS3

Question

Creating a top-to-bottom pull effect on a single page, similar to the Android title bar, can be achieved using CSS3

Is there a way to achieve an effect in HTML that resembles the pull title bar animation from top to bottom in Android?

Any suggestions on how to create this effect or what tools I would need?

Currently, when I swipe, the page simply displays a following animation and does not mimic my finger movements.

I am fairly new to this. Any help is greatly appreciated.

Thank you for taking the time to read this!

This is the CSS code I have tried:

.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 the JavaScript (using 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);
    });

javascript android jquery html css

Answer 1

Answer №1

If you haven't tested it yet, combining the fiddle with this solution would involve replacing the jQuery for opening and closing on click with the hammer.js implementation. Here's a possible code snippet:

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');
});

This is based on information from the hammer.js documentation.

To style the item to resemble an android top bar that slides down from the top, you can use the following CSS:

.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%;
}

Answer 2

If you haven't tested it yet, combining the fiddle with this solution would involve replacing the jQuery for opening and closing on click with the hammer.js implementation. Here's a possible code snippet:

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');
});

This is based on information from the hammer.js documentation.

To style the item to resemble an android top bar that slides down from the top, you can use the following CSS:

.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%;
}

Creating a top-to-bottom pull effect on a single page, similar to the Android title bar, can be achieved using CSS3

Answer №1

Similar questions

Setting up package.json to relocate node_modules to a different directory outside of the web application:

Node(Meteor) experiencing a memory leak due to setTimeout

The button should only be visible when the input is selected, but it should vanish when a different button within the form is

What is the most efficient way to iterate through array elements within a div element sequentially using React?

Is there a way to update an image dynamically within CSS using the :before pseudo-element?

Problem with implementing AJAX Post functionality in back-end coding

Tips for customizing the color of mat-select placeholder text?

Retrieve the heading from a pop-up box

"Deactivate the escaping feature in PHP when using heredoc syntax

Using React and Ant Design: Sharing state between multiple <Select> components within a <Form> element

Leveraging the power of React in conjunction with an HTML template

Difficulty with BCRYPT retrieving information from MySQL

Having Trouble with the Fancybox Title Attribute Showing Up?

Issues surrounding the break function in PHP and Jquery

404 error when accessing static content in Struts2

Incorporate a distinct identifier for every menu item within the Material UI TablePagination

I keep receiving multiple header errors from ExpressJS even though I am positive that I am only sending a single header

PHP data is not displayed by Ajax

Creating a water vessel design using CSS

Can you explain the function of MathUtils.euclideanModulo and how it sets itself apart from the traditional modulo operation?