JSFiddle - React, Tailwind, and code Playground
by centripetaldevelopments
HTML
<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="homescreen.html" class="fisheyeItem"><img src="jquery/home.png" width="30" /><span>Home</span></a>
<a href="emailus.html" class="fisheyeItem"><img src="jquery/email.png" width="30" /><span>Email</span></a>
<a href="http://www.facebook.com/pages/Centripetal-Developments/218322191545985" class="fisheyeItem"><img src="jquery/display.png" width="30" /><span>"Like" us</span></a>
<a href="logos.html" class="fisheyeItem"><img src="jquery/clock.png" width="30" /><span>Logo's</span></a>
<a href="effects.html" class="fisheyeItem"><img src="jquery/web.png" width="30" /><span>Effects+</span></a>
<a href="homescreen.html" class="fisheyeItem"><img src="jquery/home.png" width="30" /><span>Home</span></a>
<a href="emailus.html" class="fisheyeItem"><img src="jquery/email.png" width="30" /><span>Email</span></a>
<a href="http://www.facebook.com/pages/Centripetal-Developments/218322191545985" class="fisheyeItem"><img src="jquery/display.png" width="30" /><span>"Like" us</span></a>
<a href="logos.html" class="fisheyeItem"><img src="jquery/clock.png" width="30" /><span>Logo's</span></a>
<a href="effects.html" class="fisheyeItem"><img src="jquery/web.png" width="30" /><span>Effects+</span></a>
</div>
</div>
<div id="fisheye2" class="fisheye">
<div class="fisheyeContainter">
<a href="homescreen.html" class="fisheyeItem2"><span>Home</span><img src="jquery/home.png" width="30" /></a>
<a href="emailus.html" class="fisheyeItem2"><span>Email</span><img src="jquery/email.png" width="30" /></a>
<a href="http://www.facebook.com/pages/Centripetal-Developments/218322191545985" class="fisheyeItem2"><span>"Like" us</span><img src="jquery/display.png" width="30" /></a>
...
CSS
<style type="text/css" media="screen">
.fisheye{
text-align: center;
height: 50px;
position: relative;
}
.banner {
text-align: center;
height: 50px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: white;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: white;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 50px;
width: 200px;
left: 525px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
</style>
JavaScript
< script type = "text/javascript" >
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 40,
proximity: 90,
halign: 'center'
}
)
$('#fisheye2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 40,
proximity: 80,
alignment: 'left',
valign: 'bottom',
halign: 'center'
}
)
}
);
< /script>