What is Proximity.js ?
Proximity.js is a new jQuery Plugin that allows you to create a nice grid effect.
How to use Proximity
Create a HTML list
Create your web page, with a <ul> list in it, like this :
<ul id="proximity">
<li>
<p>1</p>
</li>
<li>
<p>2</p>
</li>
<li>
<p>...</p>
</li>
</ul>Your CSS must transform you list into a grid. Here is an example :
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#proximity{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#proximity li{
width: 9.85%;
height: 25%;
margin: 0;
padding: 0;
display: inline-block;
float: left;
background-color: #999999;
border: 1px solid #333;
position: relative;
}
#proximity li p{
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
text-align: center;
font-size: 3em;
display:block;
position:absolute;
top: 50%;
height: 9px;
margin-top: -0.6em;
}
You must create different states for your boxes. Here is the list of states available :
| State | Description |
|---|---|
| current | Current is the state for the current box |
| topLeft | The box directly on the top left corner of the current box |
| topCenter | The box directly above the current box |
| topRight | The box directly on the top right corner of the current box |
| bottomLeft | The box directly on the bottom left corner of the current box |
| bottomCenter | The box directly below the current box |
| bottomRight | The box directly on the bottom right corner of the current box |
| left | Left box beside the current box |
| right | Right box beside the current box |
Initialization
Include jQuery & Proximity.js into your webpage :
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.proximity.js"></script>
Finally, initialize the grid :
<script type="text/javascript">
$(document).ready(function(){
$('#proximity li').proximity(10);
});
</script>And that's it !
Authors and Contributors
Idea by @titoo87 & @regulardesigner. See a real-life example here.
Project is no longer maintained. Feel free to fork it and use it whatever you want, just don't forget to show us your work !