Grafic ecuatie

by MariusNastasa

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://hevyweb.github.io/jquery-easing-parabola/jq.easing.parabola.js"></script>
<div id="stage">
  <div id="axisX">X</div>
  <div id="axisY">Y</div>
  <div id="zero">0</div>
  <div id="ticker"></div>
</div>
<br/>
<div id="parameters">
  <labe>
    X 
    <input type="text" id="x" value="200">
  </labe>
  <label>
    Y 
    <input type="text" id="y" value="-150">
  </label>
  <label>
    Durata
    <input type="text" id="time" value="5000"> ms
  </label>
</div>
<button id="try">Afiseaza!</button>
<button id="reset">Reset</button>

CSS

#stage{
  position: relative;
  background: repeating-linear-gradient(transparent 0, transparent 20px, #000 21px), repeating-linear-gradient(to left, transparent 0, transparent 20px, #000 21px), linear-gradient(to left, transparent 0, transparent 250px, #000 251px, #000 252px, transparent 253px), linear-gradient(transparent 0, transparent 250px, #000 251px, #000 252px, transparent 253px);
  width: 500px;
  height: 500px;
  border: 1px solid #000;
}
#axisX{
  position: absolute;
  top: 252px;
  right: 5px;
  font-weight: bold;
  font-size: 20px;
}

#axisY{
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  top: -1px;
  left: 253px;
}

#zero{
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  top: 252px;
  left: 254px;
}

#ticker{
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 1px solid #00406C;
  position: absolute;
  top: 245px;
  left: 243px;
  z-index: 2;
  background: radial-gradient(circle at 3px 2px, #fff 0, transparent 100%), #0096FF;
  box-shadow: 0 0 10px 1px #0096FF;
}
button{
  margin: 5px;
  color: #fff;
  padding: 5px;
  cursor: pointer;
  border: 0 none;
}

#try{
  background: #3D9E3D
}

#reset{
  background: #DC4134
}

.spot{
  position: absolute;
  width: 2px;
  height: 2px;
  background:#DC4134
}

input{
  width: 40px;
  padding: 0 5px;
}

JavaScript

$(document).ready(function(){
$('#try').click(function(e){
		reset();
    var offset = $('#ticker').offset();
    var time = parseInt($('#time').val());
    //This is a parabolic animation by Y axis
    $('#ticker').animate({
    	top: (offset.top + parseInt($('#y').val())) + 'px'
    }, {
        'duration': time,
        'queue': false,
        'easing': 'parabola'
    })
    //This is a linear animation by X axis
    $('#ticker').animate({
    		left: (offset.left + parseInt($('#x').val())) + 'px'
      }, {
        'duration': time,
        'queue': false,
        'easing': 'linear',
        'step': drawSpot
    });
});
$('#reset').click(reset);

function reset(){
		$('#ticker').stop().removeAttr('style');
    $('.spot').remove();
}

function drawSpot(){
		var offset = $('#ticker').offset();
		$('<div class="spot"/>')
    .offset({
    left: offset.left - 4,
    top: offset.top - 4
    }).appendTo('#stage');
}
});