javascript - Quarter-circle in top right corner -

i looking make quarter-circle place in top right corner of website (fixed) , want animate towards center when user scrolls ( have code working shrinking element not element or center)

i have header shrinking following code:

html (script)

$(function(){  var shrinkheader = 50;  $(window).scroll(function() {  var scroll = getcurrentscroll();   if ( scroll >= shrinkheader ) {        $('header').addclass('shrink');     }     else {         $('header').removeclass('shrink');     }  }); 

with shrink class applied header when user scrolls. switch on quarter circle when figure out.

note: white filled icon in middle (acting nav toggle button)

edit: asking how make quarter-circle sits top right of screen (fixed) , can animated top right corner (circle's center)

i looking make quarter-circle place in top right corner of website (fixed) want animate towards center when user scrolls

i asking how make quarter-circle sits top right of screen (fixed) , can animated top right corner (circle's center)

judging above, seems want know how create quarter-circle , make shrink (such goes towards own top-right corner).

creating quarter-circle simple , can done css itself. svg recommended creating shapes simple. needed create square , set it's bottom-left border radius 100%. positioning (fixed) on top right corner of page simple. add position: fixed top , right 0px.

now shape shrink, change height , width of element 0px , add transition effect. in below snippet, have done using animation visible in snippet window can put 2 properties in class , toggle on/off depending on whether user has scrolled page or not.

^{note: other div , body css in snippet demo.}

.quarter-circle {    position: fixed;    top: 0px;    right: 0px;    height: 75px;    width: 75px;    line-height: 75px;    text-align: center;    background: yellowgreen;    border-bottom-left-radius: 100%;    border: 2px solid;    font-size: 1.5rem;    animation: shrink 2s ease infinite;  }  @keyframes shrink {    {      height: 50px;      width: 50px;      line-height: 50px;    }  }  .some-content {    min-height: 125vh;    background: tomato;  }  body {    margin: 0;    padding: 0;  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  <div class='quarter-circle'><i class="fa fa-home fa-fw"></i>  </div>  <div class='some-content'></div>

---

as have noticed in above snippet, animation bit jerky (the shape shivers when animation reaches end). because animating height , width properties both of super expensive because result in relayout, repaint , compositing. instead, can use transform: scale achieve similar effect in below snippet.

.quarter-circle {    position: fixed;    top: 0px;    right: 0px;    height: 75px;    width: 75px;    line-height: 75px;    text-align: center;    background: yellowgreen;    border-bottom-left-radius: 100%;    border: 2px solid;    font-size: 1.5rem;    animation: shrink 2s ease infinite;    transform-origin: top right;  }  @keyframes shrink {    {      transform: scale(.75);    }  }  .some-content {    min-height: 125vh;    background: tomato;  }  body {    margin: 0;    padding: 0;  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  <div class='quarter-circle'><i class="fa fa-home fa-fw"></i>  </div>  <div class='some-content'></div>

one drawback of using transform: scale icon or text inside shape scaled down. may or may not desirable outcome , hence choose accordingly.