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
  • #35288

    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


    And the css

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

    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


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