1

テキストをぼかし、マウス ポインターに従ってズームすることで、垂直テキスト メニューをアニメーション化する既存のスクリプトを探しています。

私はこれらのアクションを達成しようとしています:

  1. テキストを「ズーム」できるマウス ホバー時の OS X のような動き
  2. ピントが合っていない状態では、テキストがぼやけてしまいます
  3. ユーザーがポインターをテキストに近づけると、テキストがシャープになります。

いくつかの効果を示すFlash の例を次に示しますが、私は JavaScript を使用し、「ダウン」、「アップ」、および「選択」ボタンを当然使用しないことを好みます。

4

3 に答える 3

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。これはおそらくあなたが探しているものに近いですが、間違いなくスムーズではなく、フラッシュのようにテキストをぼかすことはできません.

于 2009-03-29T23:58:13.877 に答える
1

Javascriptでこれを行うことができるかどうかはわかりません...

于 2009-03-30T00:22:08.797 に答える
0

この古い質問に対する厳密な答えではありませんが、今日、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>

于 2015-01-21T20:21:04.923 に答える