Эффект размытия рыбий глаз в вертикальном текстовом меню

Question

Я ищу существующие сценарии, которые будут анимировать вертикальное текстовое меню, размывая текст и масштабируя его в соответствии с указателем мыши.

Я пытаюсь выполнить следующие действия:

1. OS X-подобное движение при наведении мыши, которое может «увеличивать» и уменьшать текст
2. В несфокусированном состоянии текст будет размытым
3. Когда пользователь перемещает указатель ближе к тексту, текст становится более резким.

Вот пример Flash , который демонстрирует некоторые эффекты, но я бы действительно предпочел использовать JavaScript и не использовать кнопки «вниз», «вверх» и «выбор», естественно.

Answer 1

Я не уверен, что вы можете сделать это в Javascript ...

Answer 2

Вот скрипт с открытым исходным кодом, который, я думаю, мог бы работать для вас (или, по крайней мере, после незначительных изменений)

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

И учебник по его использованию: http://simply -basic.com / инструменты / Fisheye-меню для-вашего-сайта /

Edit:

Я понял, что приведенный выше скрипт, вероятно, не очень хорошо справится с текстом. К сожалению, размытие текста нелегко сделать в javascript. Это может быть возможно при использовании элемента canvas, но мне не удалось найти что-либо в быстром поиске в Google, и это, вероятно, будет несовместимо со старыми браузерами.

Вот еще один скрипт, который имеет эффект «рыбий глаз» на текстовые элементы в списке: http://aleph -null.tv / article / 20080522-1839-265.xml / Text-based-Fish-Eye-Effect . Это, вероятно, ближе к тому, что вы ищете, но определенно не так гладко и не позволяет размыть текст, как это делает Flash.

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>