在垂直文本菜单上模糊鱼眼效果

Question

我正在搜索现有的脚本，这些脚本将通过模糊文本并根据鼠标指针对其进行缩放来为垂直文本菜单设置动画。

我正在努力完成这些行动：

1. 鼠标悬停时类似OS X的移动，可以“缩放”文本进出
2. 在非聚焦状态下，文字会模糊
3. 当用户将指针移近文本时，文本会锐化。

Here's a Flash example演示了一些效果，但我更喜欢使用JavaScript，而不是自然地使用'down'，'up'和'select'按钮。

Answer 1

这是一个我认为可以为您工作的开源脚本（或者至少在经过微小修改后）

http://marcgrabanski.com/pages/code/fisheye-menu

使用它的教程： http://simply-basic.com/tools/fisheye-menu-for-your-website/

编辑：

我意识到上面的脚本可能不会很好地处理文本。不幸的是，模糊文本在javascript中不容易完成。可能有可能使用canvas元素，但我无法在快速Google搜索中找到任何内容，这可能与旧浏览器不兼容。

这是另一个对列表中的文本项具有鱼眼效果的脚本：http://aleph-null.tv/article/20080522-1839-265.xml/Text-based-Fish-Eye-Effect。这可能更接近你正在寻找的东西，但它绝对不是那么流畅，也不会让你像flash一样模糊文字。

Answer 2

我不确定你是否可以在Javascript中执行此操作...

Answer 3

对这个老问题不是一个严格的答案，但今天你可以用CSS3轻松实现这样的东西（没有任何javascript）：

.fancy-bar {
    height: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
}

.fancy-bar .item {
    display: inline-block;
    margin: 5px;
}

.fancy-bar .item .ball {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.fancy-bar .item-black .ball {
    background-color: black;
}

.fancy-bar .item-red .ball {
    background-color: red;
}

.fancy-bar .item-green .ball {
    background-color: green;
}

.fancy-bar .item-brown .ball {
    background-color: brown;
}

.fancy-bar .item-orange .ball {
    background-color: orange;
}

.fancy-bar .item:hover .ball {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.fancy-bar .item .title {
    text-align: center;
    font-size: 11px;
    font-family: sans-serif;
    color: #ccc;
    text-shadow: #777 0px 0px 2px;
    opacity: 0.8;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s;
}

.fancy-bar .item:hover .title {
    font-size: 13px;
    opacity: 1;
    text-shadow: none;
}

.fancy-bar .item-black:hover .title {
    color: black;
}

.fancy-bar .item-red:hover .title {
    color: red;
}

.fancy-bar .item-green:hover .title {
    color: green;
}

.fancy-bar .item-brown:hover .title {
    color: brown;
}

.fancy-bar .item-orange:hover .title {
    color: orange;
}

<div class="fancy-bar">

<div class="item item-black">
  <div class="ball"></div>
  <div class="title">First</div>
</div>

<div class="item item-red">
  <div class="ball"></div>
  <div class="title">Second</div>
</div>

<div class="item item-green">
  <div class="ball"></div>
  <div class="title">Third</div>
</div>

<div class="item item-brown">
  <div class="ball"></div>
  <div class="title">Fourth</div>
</div>

<div class="item item-orange">
  <div class="ball"></div>
  <div class="title">Fifth</div>
</div>
  
</div>