Javascript Jelly Input field

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header>
  <p>Inspired by ANDREJ RADISIC Material Up "Jelly Input field"</p>
  <a href="https://dribbble.com/aradisic">
    Andrej Radisic</a>
</header><!--header-->
<div class="centered">
  <div class="content">
    <!--grid example-->
    <div class="sml-10">
    <!--grid example-->
    <div class="field text-field">
      <label class="">username</label>
      <div class="input">
        <input type="text" name="" placeholder="" value="">
      </div>
      <!--grid-->
      </div>
      <!--grid-->
    </div><!--field-->
  </div><!--content-->
</div>

Javascript Jelly Input field.markdown

Javascript Jelly Input field

Material Design Jelly Input Implemented with JQuery and D3. Not meant for multiple fields but could easily be extended into a plugin.

A Pen by Mark Campbell on CodePen.

License.

script.js

var lineData = [ 
  { "x": 1,   "y": 5},  
  { "x": 100,  "y": 5}, 
  { "x": 200, "y": 5}
];
var lineData2 = [ 
    { "x": 1,   "y": 5},  
    { "x": 100,  "y": 10}, 
    { "x": 200, "y": 5}
  ];
var lineData3 = [ 
    { "x": 1,   "y": 5},  
    { "x": 100,  "y": 0}, 
    { "x": 200, "y": 5}
  ];
var lineData4 = [ 
  { "x": 1,   "y": 7},  
  { "x": 100,  "y": 8}, 
  { "x": 200, "y": 7}
];
var lineFunction = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate("monotone");
var svgContainer =d3.select("div.text-field").append("svg")
  .attr("class", 'border');
var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(lineData))
.attr("class", 'line')
.attr("stroke-width", 1)
.attr("fill", "none");
$("input[type='text']").hover(function(){
  console.log($(this).parent().siblings('label'));
    d3.select(".line").transition()
            .duration(150).ease('sin')
      .attr("d", lineFunction(lineData2)).transition()
            .duration(150).ease('sin')
      .attr("d", lineFunction(lineData3)).transition()
            .duration(150).ease('sin')
      .attr("d", lineFunction(lineData));
},
function(){
  if( !$(this).val() ) {
      $(this).parent().siblings('label').removeClass('active');
  }else{
      $(this).parent().siblings('label').addClass('active');
  }
  d3.select(".line").transition()
            .duration(150).ease('sin')
      .attr("d", lineFunction(lineData4)).transition()
            .duration(150).ease('sin')
      .attr("d", lineFunction(lineData));
});
$("input[type='text']").focusin(function(){
  $(this).parent().siblings('label').addClass('focus');
});
$("input[type='text']").focusout(function(){
  $(this).parent().siblings('label').removeClass('focus');
  if( !$(this).val() ) {
      $(this).parent().siblings('label').removeClass('active');
  }else{
      $(this).parent().siblings('label').addClass('active');
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

style.css

body{
    font-family: 'Roboto', sans-serif;
    background:#fff;
    overflow: hidden;
}
.field + .field{margin-top:20px;}
.field:hover{
  label,label.active{
    top: -10px;
    font-size: 50%;
    color:#dadada;
  }
  .line{
    stroke:#7fbd38;
  }
}
.field{
  width:100%;
  display:block;
  position:relative;
  label.active{
    font-size: 50%;
    color:#dadada;
    top:25px;
  }
  label.focus{
    font-size: 50%;
    top: -10px;
    color:#dadada;
  }
  label{
    position:absolute;
    font-size: 11px;
    z-index:2;
    left:0px;
    top:5px;
    color:#797979;
    .transition(all 150ms ease-in-out);
  }
  .input{
    position:relative;
  }
  input{
    height:20px;
    width:255px;
    border:none;
    outline: none;
    color:#797979;    
  }
  .line{
    .transition(all 150ms ease-in-out);
    stroke:#dadada;
  }
}

//ANIMATION

header{
    text-align:center;
    color:white;
    display:block;
    position:absolute;
    top:0px;right:0px;left:0px;
    height:90px;
    padding:10px;
    background:#2f2f2f;
    margin-bottom:10px;
    div{text-align:center;}
    a{color:white;}
    a span{margin-left:5px;margin-right:5px;}
}
.centered{
  position:absolute;
  margin-top:90px;
  height:100%;width:100%;
  top:0px;bottom:0px;left:0px;right:0px;
}
.sml-10{
  width:220px;
}
.text-field{margin-bottom:30px;}
//SET UP
.content{
  position:absolute;
  margin:auto;
  height:50px;
  width:260px;
  top:50px;left:0px;right:0px;
}
.border{
  position:absolute;
  bottom:-15px;
  display:block;
  width:100%;
  height:20px;
}



//MIXINS
.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}
.border-radius(@string){
    border-radius:~'@{string}';
    -moz-border-radius: ~'@{string}';
    -webkit-border-radius:~'@{string}';
}