Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript A circle pulsating image masking prototype

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #35288
    macpro43
    Member

    So the basic description is it is a button that once you push it, it will start pulsating with the rest of the image will be revealed by a css border radius expanding. So as you would say SYNC-ing animation like it is trying to connect to a wifi or infrared system.

    Here is the JS

    $(function(){
    $(“#bt”).click(function(){
    $(“.sync_btn”).toggleClass(“btn_change”);
    });
    });

    And the css

    #sync_btn_contain{
    height: 250px;
    width: 250px;
    margin-right: auto;
    margin-left: auto;
    border: thin solid #666;
    }

    .sync_btn{
    width: 105px;
    height: 105px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background-image: url(img/sync_button.png);
    margin-right: auto;
    margin-left: auto;
    background-repeat: no-repeat;
    background-position: -40px;
    margin-top: 45px;
    }

    .btn_change {
    width: 195px;
    height: 195px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    -webkit-transition: width .5s ease, height .5s ease;
    -moz-transition: width .5s ease, height .5s ease;
    -o-transition: width .5s ease, height .5s ease;
    -ms-transition: width .5s ease, height .5s ease;
    transition: width .5s ease, height .5s ease;
    background-position: 7px;
    }

    So what the problem is it is working right, but once you click the button it expands but from the top and not from the middle. Its sliding and not revealing the the covered part correctly.

    Probably has to do with a position?

    Anything would be great

    Thanks

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.