Pack of 15 unique placeholder animations
CSS HTML JavaScript
Permalink
Failed to load latest commit information.
src Fixed bug: hidden inputs issue Nov 23, 2016
static Demo #15: fixing id bug Nov 19, 2016
LICENSE Initial commit Nov 14, 2016
README.md Update README.md Nov 22, 2016
index.html Fixed bug: hidden inputs issue Nov 23, 2016

README.md

Foxholder

Pack of 15 unique placeholder animations. Just pick the demo you like most and install on your website in 1 minute!

View Demo

Foxholder Demo

List of Features

  1. Smooth and professional-looking CSS3 animations for placeholder
  2. 15 unique effects
  3. Easy to install
  4. Crossbrowser Effects (IE 9+, Safari 9+, FF, Opera, Chrome, Edge)

How to Use

  • Put basic HTML markup:
<div class="your-class">
  <form>
    .... your inputs and textareas and your submit button (use only <button> tag for it)
  </form>
</div>
  • Use placeholder attribute and id attribute for inputs and textareas. Note! Use only tag for submit buttons
<div class="your-class">
    <input id="your-id-1" type="text" placeholder="My Input" />
    <textarea id="your-id-2" placeholder="My Textarea"></textarea>
    <button type="submit">Submit</button>
</div>
  • Add foxholder-styles.css in your
<link rel="stylesheet" href="css/foxholder-styles.css" />
  • Add foxholder.js in your or before closing tag after jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/foxholder.js"></script>
  • Initialize your Foxholder in your script file or an inline script tag
 jQuery('.your-class').foxholder({
    demo: 1 //or other number of demo (1-15) you want to use
  });