Das Verwischen Fisheye-Effekts auf einem vertikalen Textmenü

Question

Ich suche vorhandenes Skripts, die eine vertikale Textmenü von Text zu verwischen und Zoomen es nach dem Mauszeiger animieren werden.

Ich versuche, diese Aktionen auszuführen:

1. OS X artige Bewegung auf Maus schweben, das kann 'Zoom' der Text in und aus
2. In einem nicht fokussierten Zustand, würde der Text unscharf
3. Wenn ein Benutzer ihre Zeiger näher an den Text bewegt, würde der Text schärfen.

Hier ist ein Flash-Beispiel , dass einige der Effekte zeigt, aber ich würde wirklich lieber JavaScript verwenden und nicht verwenden ‚nach unten‘, ‚nach oben‘ und ‚der Option‘ Tasten, natürlich.

Answer 1

Ich bin nicht sicher, dass Sie dies in Javascript tun ...

Answer 2

Hier ist ein Open-Source-Skript, das ich denke, könnte für Sie arbeiten (oder zumindest nach geringfügigen Änderungen)

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

Und ein Tutorial über die Verwendung es: http://simply-basic.com/tools/fisheye-menu -für-your-Website /

Edit:

wurde mir klar, dass das Skript oben wahrscheinlich nicht Text sehr gut behandeln würde. Leider ist Verwischung Text nicht leicht in Javascript gemacht. Es könnte möglich sein, das Canvas-Element, aber ich konnte nichts auf einer schnellen Google-Suche finden, und dies würde wahrscheinlich nicht mit älteren Browsern kompatibel sein.

Hier ist ein weiteres Skript, das ein Fisheye-Effekt auf die Textelemente in einer Liste hat: http://aleph-null.tv/article/20080522-1839-265.xml/Text-based-Fish-Eye-Effect . Dies ist wahrscheinlich näher an, was Sie suchen, aber es ist auf jeden Fall nicht so glatt und erlaubt Ihnen nicht, Text zu verschwimmen wie Flash der Fall ist.

Answer 3

Nicht eine strenge Antwort auf diese alte Frage, aber heute kann man so etwas wie dies leicht mit CSS3 (ohne Javascript) implementieren kann:

.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>